StyleAnimation QML Type

Un type pratique permettant d'animer les propriétés de style. En savoir plus…

Ce type est en préversion technologique et est susceptible d'être modifié.

• Liste de tous les membres, y compris les membres hérités

Propriétés

• animateBackgroundBorder : bool
• animateBackgroundColors : bool
• animateBackgroundGeometry : bool
• animateBackgroundRadii : bool
• animateBackgroundScaleAndRotation : bool
• animateBackgroundShadow : bool
• animateColors : bool
• animateControlGeometry : bool
• animateHandleBorder : bool
• animateHandleColors : bool
• animateHandleGeometry : bool
• animateHandleRadii : bool
• animateHandleScaleAndRotation : bool
• animateHandleShadow : bool
• animateIndicatorBorder : bool
• animateIndicatorColors : bool
• animateIndicatorGeometry : bool
• animateIndicatorRadii : bool
• animateIndicatorScaleAndRotation : bool
• animateIndicatorShadow : bool
• duration : int
• easing : EasingCurve

Description détaillée

StyleAnimation est une Animation qui anime les propriétés de style lorsqu'un contrôle change state. Par exemple, définir animateBackgroundColors sur true animera toutes les propriétés de couleur de l'background, telles que background.color, background.border.color, background.image.color et background.shadow.color. Elle s'utilise à l'intérieur d'un transition:

comboBox {
    background.color: "lightgray"
    hovered.background.color: "plum"

    indicator.color: "white"
    hovered.indicator.color: "pink"
    hovered.indicator.border.width: 4

    transition: Transition {
        StyleAnimation {
            animateBackgroundColors: true
            animateIndicatorColors: true
            animateIndicatorBorder: true
            easing.type: Easing.OutQuad
            duration: 500
        }
    }
}

StyleAnimation n'est qu'un « Animation » pratique qui se charge automatiquement de répertorier les propriétés de style concernées. L'extrait de code ci-dessus pourrait également s'écrire comme suit :

checkBox {
    background.color: "lightgray"
    hovered.background.color: "plum"

    indicator.color: "white"
    hovered.indicator.color: "pink"
    hovered.indicator.border.width: 4

    transition: Transition {
        ColorAnimation {
            properties: "background.color, background.border.color, background.image.color, background.shadow.color"
            + ", indicator.color, indicator.border.color, indicator.image.color, indicator.shadow.color"
            easing.type: Easing.OutQuad
            duration: 500
        }
        NumberAnimation {
            properties: "indicator.border.width"
            easing.type: Easing.OutQuad
            duration: 500
        }
    }
}

Une StyleAnimation peut également être utilisée conjointement avec d’autres animations :

slider {
    handle.color: "white"
    hovered.handle.color: "seagreen"
    hovered.handle.border.width: 8

    transition: Transition {
        StyleAnimation {
            animateHandleColors: true
            easing.type: Easing.OutQuad
            duration: 500
        }
        NumberAnimation {
            properties: "handle.border.width"
            easing.type: Easing.OutBounce
            duration: 1000
        }
    }
}

Voir également ControlStyle.transition et ControlStyle.

Documentation sur les propriétés

animateBackgroundBorder : bool

Lorsque la méthode true est appelée, elle active la propriété border width du délégué background.

animateBackgroundColors : bool

Lorsque true, anime les propriétés de couleur du délégué background, notamment les couleurs border et shadow.

Voir également animateColors et animateBackgroundGeometry.

animateBackgroundGeometry : bool

Lorsque true anime les propriétés géométriques du délégué background, telles que width, height et margins.

animateBackgroundRadii : bool

Lorsque la méthode true est appelée, elle anime le coin radii du délégué background.

animateBackgroundScaleAndRotation : bool

Lorsque la méthode true est appelée, elle anime la rotation du délégué background.

animateBackgroundShadow : bool

Lorsque true anime les propriétés d'ombre du délégué background, telles que vertical offset, horizontal offset, scale et blur. L'color d'ombre est animée par animateHandleColors.

animateColors : bool

Lorsque true est activé, toutes les propriétés de couleur sont animées sur l’ensemble des délégués. Il s’agit d’un raccourci permettant d’activer simultanément animateBackgroundColors, animateHandleColors et animateIndicatorColors.

Notez que ` ColorAnimation ` anime également toutes les propriétés de couleur qui changent au cours d’une transition lorsque ` property ` et ` properties ` ne sont pas définis. Cela en fait une alternative à ` StyleAnimation ` lorsque seules les couleurs doivent être animées.

Voir également animateBackgroundColors, animateHandleColors et animateIndicatorColors.

animateControlGeometry : bool

Lorsque true, les propriétés géométriques du contrôle sont animées, telles que spacing et padding.

animateHandleBorder : bool

Lorsque la méthode true est appelée, elle active l'border width e du délégué handle et son sub-handles.

animateHandleColors : bool

Lorsque true est appelé, il anime les propriétés de couleur du délégué handle et de son sub-handles, y compris les couleurs border et shadow.

Voir également animateColors et animateHandleGeometry.

animateHandleGeometry : bool

Lorsque true anime les propriétés géométriques du délégué handle et de ses sub-handles, telles que width, height et margins.

animateHandleRadii : bool

Lorsque la méthode true est appelée, elle anime le coin radii du délégué handle et son sub-handles.

animateHandleScaleAndRotation : bool

Lorsque true, il active les propriétés scale et rotation du délégué handle ainsi que sa propriété sub-handles.

animateHandleShadow : bool

Lorsque true, les propriétés d'ombre du délégué handle et de son sub-handles sont animées, notamment vertical offset, horizontal offset, scale et blur. L'color d'ombre est animée par animateHandleColors.

animateIndicatorBorder : bool

Lorsque la méthode true est appelée, elle active l'border width du délégué indicator et son sub-indicators.

animateIndicatorColors : bool

Lorsque true est appelé, il anime les propriétés de couleur du délégué indicator et de ses sub-indicators, y compris les couleurs border et shadow.

Voir également animateColors et animateIndicatorGeometry.

animateIndicatorGeometry : bool

Lorsque true anime les propriétés géométriques du délégué indicator et de ses sub-indicators, telles que width, height et margins.

animateIndicatorRadii : bool

Lorsque la méthode true est appelée, elle anime le coin radii du délégué indicator et son sub-indicators.

animateIndicatorScaleAndRotation : bool

Lorsque ` true` est appelé, il anime l'échelle et la rotation du délégué ` indicator ` et de son ` sub-indicators`.

animateIndicatorShadow : bool

Lorsque true, anime les propriétés d'ombre du délégué indicator et de ses sub-indicators, telles que vertical offset, horizontal offset, scale et blur. L'color d'ombre est animée par animateHandleColors.

duration : int

La durée de l'animation, exprimée en millisecondes.

Voir également easing et PropertyAnimation.

easing : EasingCurve

La courbe d'accélération appliquée à l'animation.

Voir également duration et PropertyAnimation.