QML动画和过度

动画（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改变动画.

不同动画属性的更多信息详见Controlling Animations小节.

状态变化的过度

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>声明是给属性设置行为动画的便利方式.

行为属性的演示内容见Behaviors example.

串行或并行执行动画

动画可并行或串行运行.并行动画可同时执行一组动画,而串行动画按顺序执行一组动画:一个执行完毕后在执行另一个.在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变化时的动画(见ParentChange)
• AnchorAnimation: 用在描点变化时的动画(见AnchorChanges)