From 33b96d318502f8d3534a55fd281914ac249dbc3c Mon Sep 17 00:00:00 2001 From: Boris Yumankulov Date: Thu, 7 Aug 2025 15:05:39 +0500 Subject: [PATCH] chore(documentation): mention goBackDetailPage animation in theme guide Signed-off-by: Boris Yumankulov --- documentation/theme_guide/README.md | 87 ++++++++++++++++++++++---- documentation/theme_guide/README.ru.md | 87 ++++++++++++++++++++++---- 2 files changed, 148 insertions(+), 26 deletions(-) diff --git a/documentation/theme_guide/README.md b/documentation/theme_guide/README.md index 3139a6f..e848e66 100644 --- a/documentation/theme_guide/README.md +++ b/documentation/theme_guide/README.md @@ -52,42 +52,103 @@ The `GAME_CARD_ANIMATION` dictionary controls all animation parameters for game ```python GAME_CARD_ANIMATION = { - # Animation type when transitioning to a detailed page - # Available values: "fade", "slide_left", "slide_right", "slide_up", "slide_down", "bounce" + # Type of animation when entering and exiting the detail page + # Possible values: "fade", "slide_left", "slide_right", "slide_up", "slide_down", "bounce" "detail_page_animation_type": "fade", - # Border width settings (in pixels) + # Border width of the card in idle state (no hover or focus). + # Affects the thickness of the border when the card is not highlighted. + # Value in pixels. "default_border_width": 2, + + # Border width on hover. + # Increases the border thickness when the cursor is over the card. + # Value in pixels. "hover_border_width": 8, + + # Border width on focus (e.g., selected via keyboard). + # Increases the border thickness when the card is focused. + # Value in pixels. "focus_border_width": 12, + + # Minimum border width during pulsing animation. + # Sets the minimum border thickness during the "breathing" animation. + # Value in pixels. "pulse_min_border_width": 8, + + # Maximum border width during pulsing animation. + # Sets the maximum border thickness during pulsing. + # Value in pixels. "pulse_max_border_width": 10, - # Animation duration (in milliseconds) + # Duration of the border thickness animation (e.g., on hover or focus). + # Affects the speed of transition between different border widths. + # Value in milliseconds. "thickness_anim_duration": 300, + + # Duration of one pulsing animation cycle. + # Defines how fast the border "pulses" between min and max values. + # Value in milliseconds. "pulse_anim_duration": 800, + + # Duration of the gradient rotation animation. + # Affects how fast the gradient border rotates around the card. + # Value in milliseconds. "gradient_anim_duration": 3000, - # Gradient animation angles (in degrees) + # Starting angle of the gradient (in degrees). + # Defines the initial rotation point of the gradient when the animation starts. "gradient_start_angle": 360, + + # Ending angle of the gradient (in degrees). + # Defines the end rotation point of the gradient. + # A value of 0 means a full 360-degree rotation. "gradient_end_angle": 0, - # Smoothing curves for smooth animations + # Easing curve type for border expansion animation (on hover/focus). + # Affects the "feel" of the animation (e.g., smooth acceleration or deceleration). + # Possible values: strings corresponding to QEasingCurve.Type (e.g., "OutBack", "InOutQuad"). "thickness_easing_curve": "OutBack", + + # Easing curve type for border contraction animation (on mouse leave/focus loss). + # Affects the "feel" of returning to the original border width. "thickness_easing_curve_out": "InBack", - # Gradient colors for animated stroke + # Gradient colors for the animated border. + # A list of dictionaries where each defines a position (0.0–1.0) and color in hex format. + # Affects the appearance of the border on hover or focus. "gradient_colors": [ - {"position": 0, "color": "#00fff5"}, - {"position": 0.33, "color": "#FF5733"}, - {"position": 0.66, "color": "#9B59B6"}, - {"position": 1, "color": "#00fff5"} + {"position": 0, "color": "#00fff5"}, # Start color (cyan) + {"position": 0.33, "color": "#FF5733"}, # 33% color (orange) + {"position": 0.66, "color": "#9B59B6"}, # 66% color (purple) + {"position": 1, "color": "#00fff5"} # End color (back to cyan) ], - # Duration of transitions to the detailed page + # Duration of the fade animation when entering the detail page "detail_page_fade_duration": 350, + + # Duration of the slide animation when entering the detail page "detail_page_slide_duration": 500, - "detail_page_zoom_duration": 400 + + # Duration of the bounce animation when entering the detail page + "detail_page_bounce_duration": 400, + + # Duration of the fade animation when exiting the detail page + "detail_page_fade_duration_exit": 350, + + # Duration of the slide animation when exiting the detail page + "detail_page_slide_duration_exit": 500, + + # Duration of the bounce animation when exiting the detail page + "detail_page_bounce_duration_exit": 400, + + # Easing curve type for animation when entering the detail page + # Applies to slide and bounce animations + "detail_page_easing_curve": "OutCubic", + + # Easing curve type for animation when exiting the detail page + # Applies to slide and bounce animations + "detail_page_easing_curve_exit": "InCubic" } ``` diff --git a/documentation/theme_guide/README.ru.md b/documentation/theme_guide/README.ru.md index bda96b9..12d3132 100644 --- a/documentation/theme_guide/README.ru.md +++ b/documentation/theme_guide/README.ru.md @@ -52,42 +52,103 @@ def custom_button_style(color1, color2): ```python GAME_CARD_ANIMATION = { - # Тип анимации при переходе на детальную страницу - # Доступные значения: "fade", "slide_left", "slide_right", "slide_up", "slide_down", "bounce" + # Тип анимации при входе и выходе на детальную страницу + # Возможные значения: "fade", "slide_left", "slide_right", "slide_up", "slide_down", "bounce" "detail_page_animation_type": "fade", - # Настройки ширины обводки (в пикселях) + # Ширина обводки карточки в состоянии покоя (без наведения или фокуса). + # Влияет на толщину рамки вокруг карточки, когда она не выделена. + # Значение в пикселях. "default_border_width": 2, + + # Ширина обводки при наведении курсора. + # Увеличивает толщину рамки, когда курсор находится над карточкой. + # Значение в пикселях. "hover_border_width": 8, + + # Ширина обводки при фокусе (например, при выборе с клавиатуры). + # Увеличивает толщину рамки, когда карточка в фокусе. + # Значение в пикселях. "focus_border_width": 12, + + # Минимальная ширина обводки во время пульсирующей анимации. + # Определяет минимальную толщину рамки при пульсации (анимация "дыхания"). + # Значение в пикселях. "pulse_min_border_width": 8, + + # Максимальная ширина обводки во время пульсирующей анимации. + # Определяет максимальную толщину рамки при пульсации. + # Значение в пикселях. "pulse_max_border_width": 10, - # Длительности анимаций (в миллисекундах) + # Длительность анимации изменения толщины обводки (например, при наведении или фокусе). + # Влияет на скорость перехода от одной ширины обводки к другой. + # Значение в миллисекундах. "thickness_anim_duration": 300, + + # Длительность одного цикла пульсирующей анимации. + # Определяет, как быстро рамка "пульсирует" между min и max значениями. + # Значение в миллисекундах. "pulse_anim_duration": 800, + + # Длительность анимации вращения градиента. + # Влияет на скорость, с которой градиентная обводка вращается вокруг карточки. + # Значение в миллисекундах. "gradient_anim_duration": 3000, - # Углы анимации градиента (в градусах) + # Начальный угол градиента (в градусах). + # Определяет начальную точку вращения градиента при старте анимации. "gradient_start_angle": 360, + + # Конечный угол градиента (в градусах). + # Определяет конечную точку вращения градиента. + # Значение 0 означает полный поворот на 360 градусов. "gradient_end_angle": 0, - # Кривые сглаживания для плавных анимаций + # Тип кривой сглаживания для анимации увеличения обводки (при наведении/фокусе). + # Влияет на "чувство" анимации (например, плавное ускорение или замедление). + # Возможные значения: строки, соответствующие QEasingCurve.Type (например, "OutBack", "InOutQuad"). "thickness_easing_curve": "OutBack", + + # Тип кривой сглаживания для анимации уменьшения обводки (при уходе курсора/потере фокуса). + # Влияет на "чувство" возврата к исходной ширине обводки. "thickness_easing_curve_out": "InBack", - # Цвета градиента для анимированной обводки + # Цвета градиента для анимированной обводки. + # Список словарей, где каждый словарь задает позицию (0.0–1.0) и цвет в формате hex. + # Влияет на внешний вид обводки при наведении или фокусе. "gradient_colors": [ - {"position": 0, "color": "#00fff5"}, - {"position": 0.33, "color": "#FF5733"}, - {"position": 0.66, "color": "#9B59B6"}, - {"position": 1, "color": "#00fff5"} + {"position": 0, "color": "#00fff5"}, # Начальный цвет (циан) + {"position": 0.33, "color": "#FF5733"}, # Цвет на 33% (оранжевый) + {"position": 0.66, "color": "#9B59B6"}, # Цвет на 66% (пурпурный) + {"position": 1, "color": "#00fff5"} # Конечный цвет (возвращение к циану) ], - # Длительности переходов на детальную страницу + # Длительность анимации fade при входе на детальную страницу "detail_page_fade_duration": 350, + + # Длительность анимации slide при входе на детальную страницу "detail_page_slide_duration": 500, - "detail_page_zoom_duration": 400 + + # Длительность анимации bounce при входе на детальную страницу + "detail_page_bounce_duration": 400, + + # Длительность анимации fade при выходе из детальной страницы + "detail_page_fade_duration_exit": 350, + + # Длительность анимации slide при выходе из детальной страницы + "detail_page_slide_duration_exit": 500, + + # Длительность анимации bounce при выходе из детальной страницы + "detail_page_bounce_duration_exit": 400, + + # Тип кривой сглаживания для анимации при входе на детальную страницу + # Применяется к slide и bounce анимациям + "detail_page_easing_curve": "OutCubic", + + # Тип кривой сглаживания для анимации при выходе из детальной страницы + # Применяется к slide и bounce анимациям + "detail_page_easing_curve_exit": "InCubic" } ```