动画Animation可是一个QML元素中特别重要的东西.而且家族也特别庞大,下面我们来一一介绍
首先是动画之祖 Animation
属性:type | 含义 |
---|---|
alwaysRuntoEnd:bool | 总是能够完成当前迭代,不受中途stop,running控制 |
loops:int | 动画循环多少次 |
paused:bool | 当前动画是否停止了 |
running:bool | 当前动画是否运行 |
//动画之祖拥有 stared()和stopped()信号
接下来是从Animation继承下来的一套了
首当其冲的是入门必学的一套 PropertyAnimation
属性:type | 含义 |
---|---|
duration:int | 以毫秒为单位,表示动画一个周期的执行时间 |
easing | 复合属性,用于表示动画执行缓冲曲线行为,拥有以下属性 1.easing.type 缓冲类型 2.easing.amplitude 振幅 3.easing.overshoot 预订点4.easing.period 时期 5.easing.bezierCurve 贝塞尔曲线 |
exclude:list | 保存不执行该动画的对象列表 |
from:variant | 动画的起始属性值 |
to:variant | 动画的终点属性值 |
properties:string property:string |
决定哪些属性执行该动画 |
targets:Object targets:list |
决定哪些对象执行该动画 |
这下我们知道了如何执行动画.PropertyAnimation其实已经表明了大多数动画的表现方式,但是对于一个完整的界面,我们还需要表示动画的运行方式,是串行还是并行,接下来介绍这两种动画
ParallelAnimation 平行动画
SequentiialAnimation 串行动画
用来表示这两种动画
Demo
import QtQuick 2.7
Rectangle {
id:root;
width:700;
height:600;
Image {
id:ball;
asynchronous:true;
source:"./images/ball.png";
x:20;
y:400;
ParallelAnimation {
id:animation;
SequentialAnimation {
NumberAnimation {
target:ball;
property:"y";
from:400;
to:50;
duration:5000 * 0.4;
}
NumberAnimation {
target:ball;
property:"y";
from:50;
to:400;
duration:5000 * 0.6;
}
}
ParallelAnimation {
NumberAnimation {
target:ball;
property:"x";
from:20;
to:400;
duration:5000;
}
NumberAnimation {
target:ball;
property:"rotation";
from:0;
to:1080;
duration:5000;
}
}
}
MouseArea {
id:ballarea;
onClicked:function () {
ball.x = 20;
ball.y = 400;
ball.rotation = 0;
animation.running = true;
}
anchors.fill:ball;
}
}
}