Qml-Timeline的使用

Timeline的概述

1. Timeline：根据关键帧及其缓和曲线指定项目的值
2. 属性currentFrame : double：当前帧
   属性enabled : bool：是否使能时间线
   属性endFrame : double：结束帧值
   属性startFrame : double：起始帧值
3. Timeline 虚配合 TimelineAnimation类和KeyframeGroup类使用。
4. TimelineAnimation 控制时间线动画相关的属性
5. KeyframeGroup类包括关键帧作用目标和属性，以及包含多个Keyframe(关键帧)；
6. Keyframe控制关键帧在时间线中位置、关键帧对应属性值以及缓和曲线。

Timeline的实例代码

import QtQuick
import QtQuick.Timeline//Item Timeline 时间线使用//Timeline 由起始帧，结束帧 控制帧量，animations:控制帧的动画；KeyframeGroups 由KeyframeGroup 对象组成，KeyframeGroup包含关键帧组成，关键帧就是在多少帧，对应属性值为多少//TimeLine 的使用需要引入 QtQuick.Timeline;   Timeline 由 起始帧（startFrame），结束帧(endFrame) ，动画列表animations; 可以使用KeyframeGroup 对象 给关键帧动画设置相关值
//KeyframeGroup 由目标（target）,目标属性（property）,和关键帧值列表（keyframes）;keyframes由对象 Keyframe构成，keyframe由属性 帧值（frame）、对应属性值(value)、easing 三个值构成Item {Timeline {id: timelinestartFrame: 0endFrame: 100enabled: trueanimations: [TimelineAnimation {pingPong: true                          //true,动画结束后，返回;false 动画停在endFrame位置id: xPositionAnimationduration: 5000                          //相当于5s中有100 帧画面from: 0to: 100}]KeyframeGroup {target: rect1property: "x"keyframes:[Keyframe { frame: 0; value: 0 },Keyframe { frame: 50; value: 100 },Keyframe { frame: 100; value: 400 }]}KeyframeGroup {target: rect2property: "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: rect1x: 0y: 25width: 50height: 50color: "#800000"MouseArea{anchors.fill: parentonClicked: {xPositionAnimation.start();}}}Rectangle {id: rect2x: 0y: 125width: 50height: 50color: "#008000"}}

Timeline实例代码运行结果如下：

1.效果如下