动态元素:
1 动画(Animations):被用于属性的改变, 一个动画定义了属性值改变的曲线,将一个属性值变化从一个值过渡到另一个值.动画是由一连串的目标属性活动定义的,平缓的曲线算法能够引发一个定义时间内属性的持续变化。 所有在QtQuick中的动画都由同一个计时器来控制,因此他们始终保持同步,这也是提高了动画的性能和显示效果。动画控制了属性的改变,也就是值的插入。这是一个基本的概念,QML是基于元素,属性与脚本的。每一个元素都提供了许多的属性, 每一个属性都在等待使用动画。动画控制了属性的改变,每个元素都有大量的属性供任意使用。
常用的动画:
PropertyAnimation(属性动画): 使用属性值改变播放的动画
NumberAnimation(数字动画):使用数字改变播放的动画
ColorAnimation(颜色动画):使用颜色改变播放的动画
RotationAnimation(旋转动画):使用旋转改变播放的动画
特殊场景下使用的动画:
PauseAnimation(停止动画):运行暂停一个动画
SequentialAnimation(顺序动画): 允许动画有序播放
ParallelAnimation(并行动画):允许动画同时播放
AnchorAnimation(锚定动画):使用锚定改变播放的动画
ParentAnimation(父元素动画):使用父对象改变播放的动画
SmotthedAnimation(平滑动画):跟踪一个平滑值播放的动画
SpringAnimation(弹簧动画):跟踪一个弹簧变换的值播放的动画
PathAnimation(路径动画):跟踪一个元素对象的路径的动画
Vector3dAnimation(3D容器动画):使用QVector3d值改变播放的动画
动画元素:
propertyAction(属性动作)--->在播放动画是改变属性
ScriptAction(脚本动作)--->在播放动画是运行脚本
应用动画:应用方式
1 属性动画:在元素武安镇加载后自动运行 (NumberAnimation on PropertyName{to: xxx; duration: times})
2 属性动作:当属性值发生改变时自动运行 (behavior on propertuName{Animationname{duration: times}})
3 独立运行动画:使用start()函数来明确指定运行绘制runnint属性被设置为true
例子
Rectangle {
id: root
visible: true
width: 600
height: 1024
title: qsTr("Hello World")
Image{
id: bg_img
source: "qrc:img/load_bg.png"
anchors.fill: parent
smooth: true
}
MouseArea{
id: mousearea
anchors.fill: parent
onClicked: {
rocket1.y = rocket2.y = rocket3.y = 205
}
}
//Animation on 属性变化的策略,动画会在加载完成后立即播放
ClickableImg{
id: rocket1
x: 40; y: root.height - height
source: "qrc:img/rocket.png"
text: "animation on property"
//y值在4s时间内达到40
NumberAnimation on y{
to: 40; duration: 4000
}
onClicked: y = 40
}
//Behavior on 属性行为策略行为告诉属性值每时每刻都在变化 通过动画的方式来改变这个值 可以使用行为元素
//enabledL false来设置行为失效
ClickableImg{
id: rocket2
x: 152; y: root.height - height
source: "qrc:img/rocket.png"
text: "Behavior on property"
Behavior on y{
NumberAnimation{duration: 4000}
}
onClicked: y = y = 40+Math.random()*(1024-40)
}
//standalone animation 独立动画策略
/*每个动画由一个私有的元素定义并且可以写在文档任何地方。 点击图片调用函数start()来启动动画
* 每个动画都有start() stop() resume() restart()函数 这个动画自身可以比其他类型的动画更早
* 的获取到更多的相关信息。 我们只需要定义目标和目标元素的属性需要怎样改变的动画
* 我们定义一个to属性的值 在这个例子中我们也定义了一个from属性的值允许动画可以重复运行 */
ClickableImg{
id: rocket3
x: 263; y: root.height - height
source: "qrc:img/rocket.png"
onClicked: {
animation.start()
}
text: "standalone animation"
NumberAnimation{
id: animation
target: rocket3
property: 'y'
to: 40
duration: 4000
}
NumberAnimation{
id: animation1
target: rocket3
property: 'x'
to: 500
running:mousearea.pressed
}
}
缓冲曲线:
属性值的改变能够通过一个动画来控制,缓冲曲线属性影响了一个属性值改变的插值算法。在已经定义的动画都使用了一种线性的插值算法, 因为一个动画的默认缓冲类型为Easing.Linear 在一个小场景下x轴和y轴坐标改变可以得到更好的视觉效果。一个线性插值算法将在动画开始使用时from的值到动画结束时使用的to值绘制一条直线, 所以缓冲类型定义了曲线变化的情况
easing.type = Easing.InBounce
动画分组:(一组动画)
分组方法: 平行与连续 可以是用SequentialAnimation(连续动画)和ParallelAnimation(平行动画)来实现,他们作为动画的容器来包含其他的动画元素
平行动画:即并行运行分组中的各个动画
连续动画:则按照声明的顺序逐个执行动画
例子:
import QtQuick 2.0
DarkSquare {
id: root
width: 600
height: 1024
property int duration: 2000
GreenSquare {
id: square
x: 40; y: 260
}
MouseArea{
anchors.fill: parent
onClicked: {
square.x= 40
square.y= 260
anim.restart()
}
}
//平行动画
ParallelAnimation {
id: anim
//连续动画
SequentialAnimation{
//平移x
NumberAnimation {
target: square
property: "x"
from: 40
to: 500
duration: root.duration
}
//平移Y
NumberAnimation {
target: square
property: "y"
from: 260
to: 500
duration: root.duration
}
}
//角度旋转
RotationAnimation {
target: square
properties: "rotation"
from: 0
to: 720
duration: root.duration
}
}
}
状态:
通常我们将用户界面描述为一种状态。一个状态定义了一组属性的改变,并且会在一定的条件下呗触发。另外在这些状态转化过程中可以有一个过渡(定义了这些属性的动画或者附加动作, 当进入一个新的状态, 动作可以被执行)
为了让用户界面看起来更加自然,我们需要使用动画效果来增加一些过渡。 一个过渡能够被状态的改变触发
在QML中使用State元素来定义状态,需要与基础元素(Item)的states序列属性链接。
状态通过它的状态名来鉴别,由组成它的一系列简单属性来改变元素。默认的状态在初始化元素属性是定义, 命名为""(一个空的字符串)。状态的改变由分配一个元素新的状态属性名来完成。
另一种切换属性的方法是使用状态元素的when属性, shen属性能够被设置为一个表达式的结果,当结果为true时 状态被使用
过渡:
一系列的过渡能够被加入任何元素,一个过渡由状态的改变触发执行。你可以使用属性的from:和to:来定义状态改变的指定过渡。这两个属性就像一个过滤器,当过滤器为true时,过渡生效。你也可以使用“”来表示任何状态。例如from:”“; to:”*”表示从任一状态到另一个任一状态的默认值,这意味着过渡用于每个状态的切换。在这个例子中,我们期望从状态“go”到“stop”转换时实现一个颜色改变的动画。对于从“stop”到“go”状态的改变,我们期望保持颜色的直接改变,不使用过渡。我们使用from和to来限制过渡只在从“go”到“stop”时生效。在过渡中我们给每个灯添加两个颜色的动画,这个动画将按照状态的描述来改变属性。
例子:
import QtQuick 2.0
Rectangle {
id: root
width: 150
height: 400
property color black: "#1f1f21"
property color red: "#fc3d39"
property color green: "#53d769"
property color yellow: "#ffff37"
gradient: Gradient{
GradientStop{position: 0.0; color: "#2ed5fa"}
GradientStop{position: 1.0; color: "#2467ec"}
}
Rectangle{
id: light1
x: 25; y: 15
width: 100; height: width
radius: width/2
color: root.black
border.color: Qt.lighter(color, 1.1)
}
Rectangle{
id: light2
x: 25; y: 135
width: 100; height: width
radius: width/2
color: root.black
border.color: Qt.lighter(color, 1.1)
}
Rectangle{
id: light3
x: 25; y: 255
width: 100; height: width
radius: width/2
color: root.black
border.color: Qt.lighter(color, 1.1)
}
state: "stop"
states: [
State{
name: 'stop'
PropertyChanges {target: light1; color: root.red}
PropertyChanges {target: light2; color: root.black}
},
State{
name: 'go'
PropertyChanges {target: light1; color: root.black}
PropertyChanges {target: light2; color: root.green}
},
State{
name: 'wait'
PropertyChanges {target: light1; color: root.black}
PropertyChanges {target: light2; color: root.black}
PropertyChanges {target: light3; color: root.yellow}
}
]
MouseArea{
anchors.fill: parent
onClicked:{
if (parent.state == 'stop')
parent.state = 'wait'
else if(parent.state == 'wait')
parent.state = 'go'
else
parent.state = 'stop'
}
}
transitions:[
Transition {
from: "stop"; to: "wait"
ColorAnimation {
target: light1
properties: 'color'
duration: 2000
}
ColorAnimation {
target: light2
properties: 'color'
duration: 2000
}
},
Transition {
from: "wait"; to: "go"
ColorAnimation { target: light2; properties: "color"; duration: 2000 }
ColorAnimation { target: light3; properties: "color"; duration: 2000 }
}
]
}