StyleAnimation QML Type

A convenience type for animating style properties. More...

This type is in technology preview and is subject to change.

• List of all members, including inherited members

Properties

• 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

Detailed Description

StyleAnimation is an Animation that animates style properties when a control changes state. For example, setting animateBackgroundColors to true will animate all color properties of the background, such as background.color, background.border.color, background.image.color, and background.shadow.color. It is used inside a 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 is just a convenience Animation that handles listing the affected style properties automatically. The snippet above could also be written as:

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
        }
    }
}

A StyleAnimation can also be used together with other 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
        }
    }
}

See also ControlStyle.transition and ControlStyle.

Property Documentation

animateBackgroundBorder : bool

When true, animates the border width of the background delegate.

animateBackgroundColors : bool

When true, animates the color properties of the background delegate, including border and shadow colors.

See also animateColors and animateBackgroundGeometry.

animateBackgroundGeometry : bool

When true, animates the geometry properties of the background delegate, such as implicit size and margins.

animateBackgroundRadii : bool

When true, animates the corner radii of the background delegate.

animateBackgroundScaleAndRotation : bool

When true, animates the and rotation of the background delegate.

animateBackgroundShadow : bool

When true, animates the shadow properties of the background delegate, such as vertical offset, horizontal offset, scale, and blur. The shadow color is animated by animateHandleColors.

animateColors : bool

When true, animates all color properties across all delegates. This is a shorthand for enabling animateBackgroundColors, animateHandleColors, and animateIndicatorColors at once.

Note that ColorAnimation also animates all color properties that change during a transition when property and properties are both left unset. This makes it a an alternative to StyleAnimation when only colors need to be animated.

See also animateBackgroundColors, animateHandleColors, and animateIndicatorColors.

animateControlGeometry : bool

When true, animates the control's geometry properties, such as spacing and padding.

animateHandleBorder : bool

When true, animates the border width of the handle delegate and its sub-handles.

animateHandleColors : bool

When true, animates the color properties of the handle delegate and its sub-handles, including border and shadow colors.

See also animateColors and animateHandleGeometry.

animateHandleGeometry : bool

When true, animates the geometry properties of the handle delegate and its sub-handles, such as implicit size and margins.

animateHandleRadii : bool

When true, animates the corner radii of the handle delegate and its sub-handles.

animateHandleScaleAndRotation : bool

When true, animates the scale and rotation of the handle delegate and its sub-handles.

animateHandleShadow : bool

When true, animates the shadow properties of the handle delegate and its sub-handles, such as vertical offset, horizontal offset, scale, and blur. The shadow color is animated by animateHandleColors.

animateIndicatorBorder : bool

When true, animates the border width of the indicator delegate and its sub-indicators.

animateIndicatorColors : bool

When true, animates the color properties of the indicator delegate and its sub-indicators, including border and shadow colors.

See also animateColors and animateIndicatorGeometry.

animateIndicatorGeometry : bool

When true, animates the geometry properties of the indicator delegate and its sub-indicators, such as implicit size and margins.

animateIndicatorRadii : bool

When true, animates the corner radii of the indicator delegate and its sub-indicators.

animateIndicatorScaleAndRotation : bool

When true, animates the scale and rotation of the indicator delegate and its sub-indicators.

animateIndicatorShadow : bool

When true, animates the shadow properties of the indicator delegate and its sub-indicators, such as vertical offset, horizontal offset, scale, and blur. The shadow color is animated by animateHandleColors.

duration : int

The duration in milliseconds of the animation.

See also easing and PropertyAnimation.

easing : EasingCurve

The easing curve applied to the animation.

See also duration and PropertyAnimation.