0%

PropertyAnimation属性说明

发表于 分类于 ，
本文字数： 5.9k 阅读时长 ≈ 5 分钟

相关控件：SequentialAnimation NumberAnimation

PropertyAnimation提供了一种方法来动态更改属性的值。根据使用动画的方式，通常使用的属性集将不同。

本文: https://www.lovejia.win/blog/article/PropertyAnimation.html
参考原文：http://doc.qt.io/qt-5/qml-qtquick-propertyanimation.html
参考译文：http://blog.csdn.net/seanyxie/article/details/37817983

属性说明

duration : int

此属性保存动画的持续时间（以毫秒为单位）。
默认值为250。

easing

easing.type : enumeration
easing.amplitude : real
easing.overshoot : real
easing.period : real
easing.bezierCurve : list
指定用于动画的缓动曲线，要指定缓动曲线，需要至少指定类型。对于某些曲线，还可以指定振幅，周期和/或过冲。默认缓动曲线为Easing.Linear。
可用类型有：
Easing.Linear - 线性（t）函数的缓和曲线：速度是常数。
Easing.InQuad - 二次（t ^ 2）函数的缓冲曲线：从零速度加速。
Easing.OutQuad - 二次（t ^ 2）函数的缓冲曲线：减速至零速度。
Easing.InOutQuad - 对于二次（t ^ 2）函数的缓冲曲线：加速度直到中间，然后减速。
Easing.OutInQuad - 二次（t ^ 2）函数的缓冲曲线：减速直到中间，然后加速。
Easing.InCubic - 对于立方（t ^ 3）函数的缓冲曲线：从零速度加速。
Easing.OutCubic - 对于立方（t ^ 3）函数的缓冲曲线：减速至零速度。
Easing.InOutCubic - 缓和曲线为立方（t ^ 3）函数：加速直到中途，然后减速。
Easing.OutInCubic - 缓和曲线为立方（t ^ 3）函数：减速直到中间，然后加速。
Easing.InQuart - 对于四次（t ^ 4）函数的缓冲曲线：从零速度加速。
Easing.OutQuart - 对于四次（t ^ 4）函数的渐变曲线：减速到零速度。
Easing.InOutQuart - 缓和四次（t ^ 4）函数的曲线：加速直到中间，然后减速。
Easing.OutInQuart - 缓和四次（t ^ 4）函数的曲线：减速直到中间，然后加速。
Easing.InQuint - 用于五次（t ^ 5）函数的渐变曲线：从零速度加速。
Easing.OutQuint - 用于五次（t ^ 5）函数的缓冲曲线：减速到零速度。
Easing.InOutQuint - 缓和曲线为五次（t ^ 5）函数：加速直到中间，然后减速。
Easing.Linear 线性（t）函数的缓和曲线：速度是常数。
Easing.InQuad 二次（t ^ 2）函数的缓冲曲线：从零速度加速。
Easing.OutQuad 二次（t ^ 2）函数的缓冲曲线：减速至零速度。
Easing.InOutQuad 对于二次（t ^ 2）函数的缓冲曲线：加速度直到中间，然后减速。
Easing.OutInQuad 二次（t ^ 2）函数的缓冲曲线：减速直到中间，然后加速。
Easing.InCubic 对于立方（t ^ 3）函数的缓冲曲线：从零速度加速。
Easing.OutCubic 对于立方（t ^ 3）函数的缓冲曲线：减速至零速度。
Easing.InOutCubic 缓和曲线为立方（t ^ 3）函数：加速直到中途，然后减速。
Easing.OutInCubic 缓和曲线为立方（t ^ 3）函数：减速直到中间，然后加速。
Easing.InQuart 对于四次（t ^ 4）函数的缓冲曲线：从零速度加速。
Easing.OutQuart 对于四次（t ^ 4）函数的渐变曲线：减速到零速度。
Easing.InOutQuart 缓和四次（t ^ 4）函数的曲线：加速直到中间，然后减速。
Easing.OutInQuart 缓和四次（t ^ 4）函数的曲线：减速直到中间，然后加速。
Easing.InQuint 用于五次（t ^ 5）函数的渐变曲线：从零速度加速。
Easing.OutQuint 用于五次（t ^ 5）函数的缓冲曲线：减速到零速度。
Easing.InOutQuint 缓和曲线为五次（t ^ 5）函数：加速直到中间，然后减速。
Easing.OutInQuint - 缓和曲线为五次（t ^ 5）函数：减速直到中间，然后加速。
Easing.InSine - 正弦（sin（t））函数的渐变曲线：从零速度加速。
Easing.OutSine - 正弦曲线（sin（t））的曲线：减速到零速度。
Easing.InOutSine - 正弦（sin（t））函数的缓冲曲线：加速直到中间，然后减速。
Easing.OutInSine - 正弦（sin（t））函数的渐变曲线：减速直到中间，然后加速。
Easing.InExpo - 指数（2 ^ t）函数的渐变曲线：从零速度加速。
Easing.OutExpo - 指数（2 ^ t）函数的渐变曲线：减速至零速度。
Easing.InOutExpo - 指数（2 ^ t）函数的缓和曲线：加速直到中间，然后减速。
Easing.OutInExpo - 指数（2 ^ t）函数的缓和曲线：减速直到中间，然后加速。
Easing.InCirc - 圆形（sqrt（1-t ^ 2））函数的渐变曲线：从零速度加速。
Easing.OutCirc - 圆形（sqrt（1-t ^ 2））函数的缓动曲线：减速至零速度。
Easing.InOutCirc - 缓冲曲线为圆形（sqrt（1-t ^ 2））函数：加速直到中间，然后减速。
Easing.OutInCirc - 缓冲曲线为圆形（sqrt（1-t ^ 2））函数：减速直到中间，然后加速。
Easing.InElastic - 弹性（指数衰减正弦波）函数的缓冲曲线：从零速度加速。
峰值振幅可以用振幅参数设置，衰减周期可以用周期参数设置。
Easing.OutElastic - 弹性（指数衰减正弦波）函数的缓冲曲线：减速至零速度。
峰值振幅可以用振幅参数设置，衰减周期可以用周期参数设置。
Easing.InOutElastic - 弹性（指数衰减正弦波）函数的缓冲曲线：加速直到中间，然后减速。
Easing.OutInElastic - 弹性（指数衰减正弦波）函数的缓冲曲线：减速直到中间，然后加速。
Easing.InBack - 用于后面的缓冲曲线（过冲立方函数：（s + 1）* t ^ 3-s * t ^ 2）：从零速度加速。
Easing.OutBack - 后退的缓冲曲线（超调三次函数：（s + 1）* t ^ 3 - s * t ^ 2）减速：减速到零速度。
Easing.InOutBack - 缓冲曲线（过冲立方函数：（s + 1）* t ^ 3 - s * t ^ 2）缓慢进/出：加速直到中间，然后减速。
Easing.OutInBack - 后退的缓冲曲线（超调立方衰减：（s + 1）* t ^ 3 - s * t ^ 2）缓和/ in：减速直到中途，然后加速。
Easing.InBounce - 反弹曲线（指数衰减抛物线反弹）功能：从零速度加速。
Easing.OutBounce - 弹跳曲线（指数衰减抛物线跳动）功能：减速至零速度。
Easing.InOutBounce - 缓和曲线的反弹（指数衰减抛物线跳动）功能缓和进/出：加速直到中途，然后减速。
Easing.OutInBounce - 缓和曲线（指数衰减抛物线反弹）功能缓和/ in：减速直到中途，然后加速。
Easing.Bezier - 由easing.bezierCurve属性定义的自定义缓动曲线。
有关不同缓动设置的演示，请参见缓动曲线。

exclude : list

此属性保存不受此动画影响的项目。

from : variant

此属性保存动画的起始值。
如果PropertyAnimation在Transition或Behavior中定义，则此值默认为在Transition的开始状态中定义的值，或者是触发Behavior时该属性的当前值。

properties : string / property : string / target : Object / targets : list

这些属性用作一组，以确定哪些属性应该是动画。单数和复数形式在功能上相同。单数形式略微优化，所以如果只有一个目标/属性动画，应该尝试使用它们。

to : variant

此属性保存动画的结束值。
如果PropertyAnimation是一种内定义的过渡或行为，这个值默认值中的最终状态定义的过渡，或触发属性变化值行为。

功能简述

PropertyAnimation提供了一种方法来动态更改属性的值。
它可以用于以多种方式定义动画：
在Transition（转型）
在Behavior(行为)
作为property value source(属性值源)
在signal handler（信号处理程序中）
Standalone（独立）
根据使用动画的方式，通常使用的属性集将不同。
注意：PropertyAnimation继承抽象动画类型。这包括用于控制动画的附加属性和方法。

例

下面示例要使由于状态更改而更改其属性x或y属性的任何对象生成动画，请使用InOutQuad缓动曲线：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    states: State {
        name: "moved"
        PropertyChanges { target: rect; x: 50 }
    }

    transitions: Transition {
        PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
    }
}

以下示例要对矩形x属性的所有更改进行动画处理：

1
2
3
4
5
6
7
8
Rectangle {
    width: 100; height: 100
    color: "red"

    Behavior on x { PropertyAnimation {} }

    MouseArea { anchors.fill: parent; onClicked: parent.x = 50 }
}

以下示例重复动画矩形的x属性：

1
2
3
4
5
6
7
8
9
10
Rectangle {
    width: 100; height: 100
    color: "red"

    SequentialAnimation on x {
        loops: Animation.Infinite
        PropertyAnimation { to: 50 }
        PropertyAnimation { to: 0 }
    }
}

例如，theObject点击时淡出：

1
2
3
4
5
6
7
8
9
10
11
Rectangle {
    width: 100; height: 100
    color: "red"
    opacity:1;
    id:theObject

    MouseArea {
        anchors.fill: theObject
        onClicked: PropertyAnimation { target: theObject; property: "opacity"; to: 0 }
    }
}

例如，要使动画rect的width属性超过500ms，从当前宽度到30：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Rectangle {
    id: theRect
    width: 100; height: 100
    color: "red"

    // 这是一个独立的动画，它不是默认运行
    PropertyAnimation { 
        id: animation;
        target: theRect;
        property: "width";
        to: 30;
        duration: 500 
    }

    MouseArea { 
        anchors.fill: parent; 
        onClicked: animation.running = true 
    }
}

以下示例对于某些曲线，可以指定振幅，周期和/或过冲

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Item {
    id: rect
    width: 500
    height: 500

    Rectangle {
        id: theRect
        width: 100; height: 100
        color: "red"
        x:10; y:10

        PropertyAnimation {
            id:animation
            target: theRect
            properties: "y";
            easing.type: Easing.InOutElastic;
            easing.amplitude: 2.0;
            easing.period: 1.5
            to:400
        }

        MouseArea { 
            anchors.fill: parent; 
            onClicked: animation.running = true 
        }
    }
}

以下示例当动画用作值来源或在“Behavior”中时，可以推断要动画的默认目标和属性名称：

1
2
3
4
5
6
7
Rectangle {
    id: theRect
    width: 100; height: 100
    color: Qt.rgba(0,0,1)
    NumberAnimation on x { to: 500; loops: Animation.Infinite } //动画theRect的x属性 
    Behavior on y { NumberAnimation {} } ////动画theRect的y属性 
}

以下示例当独立使用动画时，需要明确指定目标和属性：

1
2
3
4
5
6
7
8
9
10
Rectangle {
    id: theRect
    width: 100; height: 100
    color: Qt.rgba(0,0,1)
    NumberAnimation { id: theAnim; target: theRect; property: "x"; to: 500 }
    MouseArea {
        anchors.fill: parent
        onClicked: theAnim.start()
    }
}

注意：在转换中使用时，属性动画假定与所有目标匹配，但没有属性。在实践中，这意味着你需要至少指定属性为了动画做任何事情。

您可能对下面的文章也感兴趣
------本文结束    感谢阅读------
你打赏你的,我分享我的！