Qml TimeLine的使用

        在Qt中，QTimeline对象是用来帮助控制动画的。它是一个有点像定时器的对象:它有一个持续时间和一个用于start/stop/resume函数的接口。但是QTimeline对象做的更多。它有一个从开始到结束都在变化的值，并且有一个控制valueChanged信号发出频率的更新间隔。它可以运行一次或循环运行。

        QTimeline对象的一个明显用途是在GUI中控制动画。另一种用法是管理需要在指定时间内具有特定值范围的变量。Qtimeline是一个c++对象,没有导入到QML中。

        QtQuick-Timeline模块被添加到Qt-5.14中。这个模块有一个Timeline对象，可以在QML视图中创建/管理它。要使用QtQuick Timeline模块，需要安装Qt-5.14版本并选择包含QtQuick-Timeline模块的包。

import QtQuick 2.14
import QtQuick.Timeline 1.0
ApplicationWindow {
    id:root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


    Timeline {
        id: timeline
        startFrame: 0
        endFrame: 100
        enabled: true
        animations: [
            TimelineAnimation {
                pingPong: true
                id: xPositionAnimation
                duration: 5000
                from: 0
                to: 100

            }
        ]
        keyframeGroups: [
            KeyframeGroup {
                target: rect1
                property: "x"
                keyframes:[
                    Keyframe { frame: 0; value: 0 },
                    Keyframe { frame: 50; value: 100 },
                    Keyframe { frame: 100; value: 400 }
                ]

            },
            KeyframeGroup {
                target: rect2
                property: "x"
                Keyframe {frame: 0; value: 0 }
                Keyframe {frame: 50; value: 300 }
                Keyframe {frame: 100; value: 400 }
            }
        ]
        onCurrentFrameChanged: {
            console.log("current frame is " + currentFrame)
        }
    }

    Rectangle {
        id: rect1
        x: 0
        y: 25
        width: 50
        height: 50
        color: "#800000"
        MouseArea{
            anchors.fill: parent
            onClicked: {
                xPositionAnimation.start();
            }
        }
    }
    Rectangle {
        id: rect2
        x: 0
        y: 125
        width: 50
        height: 50
        color: "#008000"
    }
}

重要的值是'startFrame'和'endFrame'，以及一个包含至少一个TimelineAnimation的内部数组'animations'。每个TimelineAnimation对象都有一个以毫秒为单位的duration，以及整数from和to。这些值指的是时间轴中时间轴动画开始和结束的帧。每个TimelineAnimation可以有一个布尔值'pingpong', （动画结束后是否向后播放。这是一种创建循环动画的简单方法）。

最后，时间轴有一个名为“keyframeGroups”的数组。这个数组中的每个条目都是一个KeyframeGroup对象。每个KeyframeGroup对象都有一个“目标”对象，以及该对象的一个“属性”。每个KeyframeGroup在KeyframeGroup中也有一个Keyframe对象列表。关键帧对象有“frame”和“value”对，它们为时间轴中的特定帧赋值。

这个例子在数组中有三个KeyframeGroup对象。这些对象是用于TimelineAnimation的'frame_0'， 'frame_50'和'frame_100'。其中一个值在这些帧中从0到100到400，而另一个值在相同帧中从0到300到400。

当TimelineAnimation激活时，Timeline对象将自动为关键帧组中这些关键帧之间的帧创建中间值。默认情况下，这些中间值将使用线性近似。