QML中的Animation（动画）

在QML Book中，这部分内容在第五章 Fluid Elements（动态元素）。

Animation动画用于控制属性值的变化（属性值随时间而变化就成了动画）。Qt Quick中的所有动画均由同一计时器控制，因此是同步的（QML Book上写的，文档我还没看到相关描述），这样可以提高动画的性能和视觉质量。

1.动画元素及应用

Qt Quick提供了一些常用的动画元素，比如：

• PropertyAnimation（属性动画）- 控制属性值的变化
• NumberAnimation（数值动画）- 控制qreal类型值的变化
• ColorAnimation（颜色动画）- 控制颜色值的变化
• RotationAnimation（旋转动画）- 控制旋转值的变化

 此外，还提供了一些特定场景下使用的动画，如PauseAnimation动画暂停，SequentialAnimation动画序列，ParallelAnimation并行动画等。可以在文档中搜Animation并查看他的那些子类。

动画可以通过以下几种方式应用（这里没包括状态和过渡的内容）：

• 属性动画 - 元素完全加载后自动运行
• 属性行为 - 属性值更改时自动运行
• 独立动画 - 手动调用start()或将running设置为true时运行

下面用代码来演示这三种方式的语法差别：

Row{
        spacing: 10

        Rectangle{
            id: rect_red
            width: 100; height: 100; color: "red"
            //属性动画，加载完就执行
            RotationAnimation on rotation {
                from: 0  //起始角度，默认为当前角度
                to: 360  //终止角度
                duration: 2000  //动画时间
                //running: true //默认加载完就run
                //loops: 1      //默认循环1次
            }
        }

        Rectangle{
            id: rect_green
            width: 100; height: 100; color: "green"
            //属性行为，属性改变时执行
            Behavior on rotation {
                RotationAnimation { duration: 1000 }
            }
            MouseArea{
                anchors.fill: parent
                onClicked: rect_green.rotation+=180; //触发属性行为
            }
        }

        Rectangle{
            id: rect_blue
            width: 100; height: 100; color: "blue"
            //独立动画，手动执行
            //每个动画都有一个start()，stop()，resume()，restart()函数
            RotationAnimation{
                id: rotation_blue
                target: rect_blue //关联动画对象
                from: 0
                to: 360
                duration: 2000
            }
            MouseArea{
                anchors.fill: parent
                onClicked: rotation_blue.start(); //手动执行
            }
        }
    }

2.缓和曲线

如果觉得匀速的动画太单调想要调节下动画的变化速度曲线（即缓和曲线），PropertyAnimation及其子类可以设置easing属性组来改变缓和曲线策略。easing属性组包含的设置有：type缓和曲线类型，amplitude幅度，period周期，overshoot过冲，bezierCurve贝塞尔等。

文档中列出的一些easing.type曲线类型（详情请查看PropertyAnimation文档）：

，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，

• easing.amplitude仅适用于弹跳和弹性曲线（Easing.InBounce，Easing.OutBounce，Easing.InOutBounce，Easing.OutInBounce，Easing.InElastic，Easing.OutElastic，Easing.InOutElastic或Easing.OutInElastic）。
• easing.overshoot适用的easing.type是：Easing.InBack，Easing.OutBack，Easing.InOutBack或Easing.OutInBack。
• easing.period适用的easing.type是：Easing.InElastic，Easing.OutElastic，Easing.InOutElastic或Easing.OutInElastic。
• easing.bezierCurve仅在easing.type为Easing.Bezier时适用。此属性是一个list ，它包含三个点的组，这些点定义了从0,0到1,1的曲线-control1，control2，终点：[cx1，cy1，cx2，cy2，endx，endy等。最后一点必须是1,1。

3.动画组

有时也需要执行一组动画，可以通过两种方式：顺序和并行执行。SequentialAnimation可以作为顺序动画的容器，ParallelAnimation可以作为并行动画的容器。当然，分组动画也可以嵌套，比如顺序动画中嵌套一个并行动画。

下面用代码演示下两种分组动画以及嵌套：

  
    Row{
        spacing: 10
        Rectangle{
            id: rect_sequential
            width: 100; height: 100; color: "orange"
            SequentialAnimation{
                id: sequential
                running: true //加载完就执行
                NumberAnimation{
                    target: rect_sequential
                    properties: "width"
                    to: 200
                    duration: 2000
                    easing.type: Easing.OutBack //改变缓和曲线类型
                }
                NumberAnimation{
                    target: rect_sequential
                    properties: "height"
                    to: 200
                    duration: 2000
                    easing.type: Easing.OutBack
                }
                //嵌套
                ParallelAnimation{
                    NumberAnimation{
                        target: rect_sequential
                        properties: "width"
                        to: 100
                        duration: 2000
                        easing.type: Easing.InOutBack
                    }
                    NumberAnimation{
                        target: rect_sequential
                        properties: "height"
                        to: 100
                        duration: 2000
                        easing.type: Easing.InOutBack
                    }
                }
            }
        }
        Rectangle{
            id: rect_parallel
            width: 100; height: 100; color: "purple"
            ParallelAnimation{
                id: parallel
                running: true //加载完就执行
                NumberAnimation{
                    target: rect_parallel
                    properties: "width"
                    to: 200
                    duration: 2000
                }
                NumberAnimation{
                    target: rect_parallel
                    properties: "height"
                    to: 200
                    duration: 2000
                }
            }
        }
    }

4.参考：

QML Book：http://qmlbook.github.io/ch05-fluid/fluid.html

文档：https://doc.qt.io/qt-5/qtquick-statesanimations-topic.html

文档：https://doc.qt.io/qt-5/qtquick-statesanimations-animations.html