动画(Animation)和过度(Transition)元素
- Transition - 状态改变的过度动画
- SequentialAnimation - 串行执行动画
- ParallelAnimation - 并行执行动画
- Behavior - 为属性变化指定默认动画
- PropertyAction - 动画中设置立即改变的属性值(Sets immediate property changes during animation)
- PauseAnimation - 在动画中引入暂停
- SmoothedAnimation - 运行属性平滑的过渡到一个新的值
- SpringAnimation - 以弹跳式的方式给属性设置一个新值
- ScriptAction - 动画中执行脚本
动画属性元素的数据类型
- PropertyAnimation - 属性改变动画
- NumberAnimation - qreal类型属性改变动画
- Vector3dAnimation - QVector3d类型属性改变动画
- ColorAnimation - 颜色改变动画
- RotationAnimation -旋转动画
- ParentAnimation - parent更改动画
- AnchorAnimation - 描点改变动画
在QML中,向属性值应用animation元素来创建动画.Animation元素通过篡改属性的值来产生平滑的过度.同样,也可使用状态过度(state transition)向状态变化设置一个动画.
要创建动画,需要使用与要创建动画的属性类型相匹配的animation元素,应用的动画(animation)与需要的行为类型有关.
触发动画
有很多种方式在对象上设置动画.
直接的属性动画Direct Property Animation
要实现立即移动或动画移动,可直接设置属性值.这可以在信号处理函数或附加属性中实现
Rectangle {
id: blob
width: 75; height: 75
color: "blue"
MouseArea {
anchors.fill: parent
onClicked: blob.color = "green"
}
}
然而,为产生更多控制,属性动画(property animation)使用在属性变化值之间进行插值实现了平滑移动.属性动画提供了定时控制和由easing curves指定的不同插值曲线.
Rectangle {
id: flashingblob
width: 75; height: 75
color: "blue"
opacity: 1.0
MouseArea {
anchors.fill: parent
onClicked: {
animateColor.start()
animateOpacity.start()
}
}
PropertyAnimation {id: animateColor; target: flashingblob; properties: "color"; to: "green"; duration: 100}
NumberAnimation {
id: animateOpacity
target: flashingblob
properties: "opacity"
from: 0.99
to: 1.0
loops: Animation.Infinite
easing {type: Easing.OutBack; overshoot: 500}
}
}
特定的属性动画元素(property animation elements)与PropertyAnimation元素的实现相比效率更好.他们向不同的QML类型如int,color,rotation设置动画,PropertyAnimation可以设置parent改变动画
状态变化的过度
States是属性的配置集合,针对不同的状态设置不同的属性值.状态变化直接导致其中的属性变化;动画平滑过度可产生生动的状态变化效果.
Transition元素自动实现了动画元素(animation elements)的功能,为状态变化引起的属性变化产生插值.要设置一个对象的过度(transition),可构造其transitions属性.
按钮可能有两个状态,用户点击时为pressed状态,用户释放鼠标后为released状态.我们可以为每个状态设置不同的属性配置.过度(transition)可以为状态从pressed改变为released产生动画.同样也可为状态从released改变为pressed产生动画
Rectangle {
width: 75; height: 75
id: button
state: "RELEASED"
MouseArea {
anchors.fill: parent
onPressed: button.state = "PRESSED"
onReleased: button.state = "RELEASED"
}
states: [
State {
name: "PRESSED"
PropertyChanges { target: button; color: "lightblue"}
},
State {
name: "RELEASED"
PropertyChanges { target: button; color: "lightsteelblue"}
}
]
transitions: [
Transition {
from: "PRESSED"
to: "RELEASED"
ColorAnimation { target: button; duration: 100}
},
Transition {
from: "RELEASED"
to: "PRESSED"
ColorAnimation { target: button; duration: 100}
}
]
}
to和from属性绑定到特定的状态名称上,可以设置过度(transition)针对的属性变化.为简化或使过度对称,可设置to属性为通配符星号("*"),指示这个过度可用于所有的状态改变
transitions:
Transition {
to: "*"
ColorAnimation { target: button; duration: 100}
}
默认的行为动画(Default Animation as Behaviors)
默认的属性动画使用行为动画(behavior animations)来设置.使用指定属性的Behavior元素声明的动画,使属性值变化时产生动画.然而,Behavior元素有一个enabled属性可设置行为动画的使能.
下面是一个球(ball)组件,可对其x,y,color属性设置行为动画(behavior animation).行为动画被设置为模拟弹性效果.当球移动时就会在属性值变化上应用这个弹性效果
Rectangle {
width: 75; height: 75; radius: width
id: ball
color: "salmon"
Behavior on x {
NumberAnimation {
id: bouncebehavior
easing {
type: Easing.OutElastic
amplitude: 1.0
period: 0.5
}
}
}
Behavior on y {
animation: bouncebehavior
}
Behavior {
ColorAnimation { target: ball; duration: 100 }
}
}
有很多种方式给属性设置行为动画.Behavior on <property>声明是给属性设置行为动画的便利方式
串行或并行执行动画
动画可并行或串行运行.并行动画可同时执行一组动画,而串行动画按顺序执行一组动画:一个执行完毕后在执行另一个.在SequentialAnimation 和ParallelAnimation中分组的动画将串行或并行执行.
下面的banner组件需要一个挨一个的显示多个图标或广告.opacity属性变为1.0来表示一个不透明对象.使用SequentialAnimation元素,前一个动画执行完毕后才会执行opacity动画.ParallelAnimation元素将同时执行动画
Rectangle {
id: banner
width: 150; height: 100; border.color: "black"
Column {
anchors.centerIn: parent
Text {
id: code
text: "Code less."
opacity: 0.01
}
Text {
id: create
text: "Create more."
opacity: 0.01
}
Text {
id: deploy
text: "Deploy everywhere."
opacity: 0.01
}
}
MouseArea {
anchors.fill: parent
onPressed: playbanner.start()
}
SequentialAnimation {
id: playbanner
running: false
NumberAnimation { target: code; property: "opacity"; to: 1.0; duration: 200}
NumberAnimation { target: create; property: "opacity"; to: 1.0; duration: 200}
NumberAnimation { target: deploy; property: "opacity"; to: 1.0; duration: 200}
}
}
一旦有动画被放在了SequentialAnimation 或 ParallelAnimation中, 他们就不会再独立的启动或停止.串行或并行动画必须作为一个组合来启动或停止.
SequentialAnimation元素在执行过度动画(transition animations)时也很有效,因为在过度中的动画是并行执行的.
有关在QML中创建和组合多个动画的演示请见Animation basics example.
控制动画
有不同的方式控制动画.
动画回放
所有的动画元素都是从Animation元素继承的;这些元素为动画元素提供了必要的属性和方法.动画元素具有start(),stop(),resume(),pause()和complete()方法--这些方法控制了动画的执行.
Easing
Easing曲线定义动画如何在起始值和终止值间产生插值.不同的easing曲线定义了一系列的插值.easing曲线简化了创建动画的效果--如弹跳效果, 加速, 减速, 和周期动画.
QML对象中可能对每个属性动画都设置了不同的easing曲线.同时也有不同的参数用于控制曲线,有些是特除曲线独有的.更多信息见easing 文档.
easing example 可视化的演示了不同easing曲线类型效果.
其他动画元素
此外,QML提供了几个对动画有用的其他元素:
- PauseAnimation: 允许停止动画
- ScriptAction: 允许在动画期间执行JavaScript,可与StateChangeScript配合来重用已存在的脚本.
- PropertyAction: 在动画期间直接修改属性,而不会产生属性变化动画
下面是针对不同属性类型的特殊动画元素
- SmoothedAnimation: 特殊的NumberAnimation,当目标值发生改变时提供平滑的动画效果
- SpringAnimation: 指定mass, damping 和epsilon等特殊属性来提供一个弹簧效果的动画
- ParentAnimation: 用在parent变化时的动画
- AnchorAnimation: 用在描点变化时的动画