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.