StyleAnimation QML Type

用于对样式属性进行动画处理的便捷类型。更多内容...

此类型处于技术预览阶段，可能会有变动。

• 所有成员列表（包括继承的成员）

属性

• 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

详细说明

StyleAnimation 是一个Animation ，用于在控件发生变化时对样式属性进行动画处理state 。例如，将animateBackgroundColors 设置为true 将对background 的所有颜色属性（如background.color 、background.border.color 、background.image.color 和background.shadow.color ）进行动画处理。它用于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 只是一个便捷的Animation ，它会自动处理受影响的样式属性的列举。上面的代码片段也可以这样写：

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

StyleAnimation 还可以与其他动画结合使用：

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

另请参阅 ControlStyle.transition 和ControlStyle 。

属性文档

animateBackgroundBorder : bool

当true 调用时，会为background 委托的border width 属性进行动画处理。

animateBackgroundColors : bool

当true 时，会动画化background 委托的颜色属性，包括border 和shadow 颜色。

另请参阅 animateColors 和animateBackgroundGeometry 。

animateBackgroundGeometry : bool

当true 时，会动画化background 委托的几何属性，例如width 、height 和margins 。

animateBackgroundRadii : bool

当true 时，会为background 委托的radii 属性添加动画效果。

animateBackgroundScaleAndRotation : bool

当true 被调用时，会为background 委托的平移和旋转属性添加动画效果。

animateBackgroundShadow : bool

当true 时，会动画化background 委托的阴影属性，例如vertical offset 、horizontal offset 、scale 和blur 。阴影color 由animateHandleColors 进行动画化。

animateColors : bool

当设置 `true` 时，将对所有委托对象的所有颜色属性进行动画处理。这是同时启用 `animateBackgroundColors`、`animateHandleColors` 和 `animateIndicatorColors ` 的简写形式。

请注意，当property 和properties 均未设置时，ColorAnimation 也会对过渡过程中发生变化的所有颜色属性进行动画处理。这使得它成为StyleAnimation 的替代方案，适用于仅需对颜色进行动画处理的情况。

另请参阅 animateBackgroundColors 、animateHandleColors 以及animateIndicatorColors 。

animateControlGeometry : bool

当调用true 时，会动画化控件的几何属性，例如spacing 和padding 。

animateHandleBorder : bool

当true 时，会为handle 委托的border width 及其sub-handles 添加动画效果。

animateHandleColors : bool

当true 时，会动画化handle 委托及其sub-handles 的颜色属性，包括border 和shadow 颜色。

另请参阅 animateColors 和animateHandleGeometry 。

animateHandleGeometry : bool

当true 时，会动画化handle 委托及其sub-handles 的几何属性，例如width 、height 和margins 。

animateHandleRadii : bool

当true 时，会为handle 委托的radii 角及其sub-handles 添加动画效果。

animateHandleScaleAndRotation : bool

当true 时，会为handle 委托的scale 和rotation 以及其sub-handles 添加动画效果。

animateHandleShadow : bool

当true 时，会动画化handle 委托及其sub-handles 的阴影属性，例如vertical offset 、horizontal offset 、scale 和blur 。阴影color 由animateHandleColors 进行动画化。

animateIndicatorBorder : bool

当true 时，会为indicator 委托的border width 及其sub-indicators 添加动画效果。

animateIndicatorColors : bool

当true 时，会为indicator 委托及其sub-indicators 动画化颜色属性，包括border 和shadow 颜色。

另请参阅 animateColors 和animateIndicatorGeometry 。

animateIndicatorGeometry : bool

当true 时，会动画化indicator 委托及其sub-indicators 的几何属性，例如width 、height 和margins 。

animateIndicatorRadii : bool

当true 时，会为indicator 委托的radii 角及其sub-indicators 添加动画效果。

animateIndicatorScaleAndRotation : bool

当true 时，会为indicator 委托及其sub-indicators 的缩放和旋转效果添加动画。

animateIndicatorShadow : bool

当true 时，会动画化indicator 委托及其sub-indicators 的阴影属性，例如vertical offset 、horizontal offset 、scale 和blur 。阴影color 由animateHandleColors 进行动画化。

duration : int

动画的持续时间（以毫秒为单位）。

另请参阅 easing 和PropertyAnimation 。

easing : EasingCurve

应用于动画的缓动曲线。

另请参阅 duration 和PropertyAnimation 。