Roson讲Qt#35 Qt Quick中的动画和转换(Animation and Transitions)

朴灿烈づ我的快乐病毒、 2022-09-12 13:42 136阅读 0赞

# 1.动画和转换类型 #

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:bottom;width:116pt;">Transition</td> 
 <td style="vertical-align:bottom;width:364pt;">Animates transitions during state changes</td> 
 <td style="vertical-align:bottom;width:203pt;">动画过渡期间的状态改变</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">SequentialAnimation</td> 
 <td style="vertical-align:bottom;">Runs animations sequentially</td> 
 <td style="vertical-align:bottom;">按顺序运行动画</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">ParallelAnimation</td> 
 <td style="vertical-align:bottom;">Runs animations in parallel</td> 
 <td style="vertical-align:bottom;">并行运行动画</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">Behavior</td> 
 <td style="vertical-align:bottom;">Specifies a default animation for property changes</td> 
 <td style="vertical-align:bottom;">指定属性更改的默认动画</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">PropertyAction</td> 
 <td style="vertical-align:bottom;">Sets immediate property changes during animation</td> 
 <td style="vertical-align:bottom;">设置动画期间的立即属性更改</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">PauseAnimation</td> 
 <td style="vertical-align:bottom;">Introduces a pause in an animation</td> 
 <td style="vertical-align:bottom;">在动画中引入暂停</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">SmoothedAnimation</td> 
 <td style="vertical-align:bottom;">Allows a property to smoothly track a value</td> 
 <td style="vertical-align:bottom;">允许属性平滑地跟踪值</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">SpringAnimation</td> 
 <td style="vertical-align:bottom;">Allows a property to track a value in a spring-like motion</td> 
 <td style="vertical-align:bottom;">允许属性以类似弹簧的方式跟踪值</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">ScriptAction</td> 
 <td style="vertical-align:bottom;">Runs scripts during an animation</td> 
 <td style="vertical-align:bottom;">在动画期间运行脚本</td> 
 </tr> 
 </tbody> 
</table>

基于数据类型的动画属性类型

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:bottom;width:116pt;">AnchorAnimation</td> 
 <td style="vertical-align:bottom;width:364pt;">Animates changes in anchor values</td> 
 <td style="vertical-align:bottom;width:203pt;">动画锚值的变化</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">ParentAnimation</td> 
 <td style="vertical-align:bottom;">Animates changes in parent values</td> 
 <td style="vertical-align:bottom;">动画父值的变化</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">PathAnimation</td> 
 <td style="vertical-align:bottom;">Animates an item along a path</td> 
 <td style="vertical-align:bottom;">沿路径动画一个项目</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">ColorAnimation</td> 
 <td style="vertical-align:bottom;">Animates changes in color values</td> 
 <td style="vertical-align:bottom;">动画颜色值的变化</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">NumberAnimation</td> 
 <td style="vertical-align:bottom;">Animates changes in qreal-type values</td> 
 <td style="vertical-align:bottom;">动画qreal类型值的变化</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">PropertyAnimation</td> 
 <td style="vertical-align:bottom;">Animates changes in property values</td> 
 <td style="vertical-align:bottom;">动画属性值的变化</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">RotationAnimation</td> 
 <td style="vertical-align:bottom;">Animates changes in rotation values</td> 
 <td style="vertical-align:bottom;">动画旋转值的变化</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">Vector3dAnimation</td> 
 <td style="vertical-align:bottom;">Animates changes in QVector3d values</td> 
 <td style="vertical-align:bottom;">动画改变QVector3d值</td> 
 </tr> 
 </tbody> 
</table>

动画是通过将动画类型应用于属性值来创建的。动画类型将插入属性值来创建平滑的过渡。同样，状态转换也可以为状态变化分配动画。  
要创建动画，请为要动画的属性的类型使用适当的动画类型，并根据需要的行为类型应用动画。

# 2.触发动画 #

有多种方法可以将动画设置为对象。

## 2.1直接属性动画 ##

动画是通过将动画对象应用到属性值来逐步改变属性来创建的。这些属性动画通过在属性值变化之间插入值来实现平滑的移动。属性动画提供定时控制，并允许通过缓和曲线进行不同的插值。

import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        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}
           }
        }
    }

专用属性动画类型的实现比PropertyAnimation类型更有效。它们用于将动画设置为不同的QML类型，如int、color和rotation。类似地，ParentAnimation可以动画父类的变化。

有关不同动画属性的更多信息，请参阅Controlling Animations。

## 2.2使用预定义的目标和属性 ##

在前面的例子中，PropertyAnimation和NumberAnimation对象需要指定特定的目标和属性值，以指定应该动画的对象和属性。这可以通过使用<Animation> on <Property>;语法，它指定要作为属性值源应用的动画。 
下面是两个使用此语法指定的PropertyAnimation对象:

Rectangle {
            id: rect
            width: 100; height: 100
            color: "red"
    
            PropertyAnimation on x { to: 100 }
            PropertyAnimation on y { to: 100 }
        }

当矩形加载时动画就开始了，并将自动应用于它的x和y值。自从<Animation> on <Property>语法中，没有必要将PropertyAnimation对象的目标值设置为rect，也没有必要将属性值设置为x和y。 
这也可以被分组动画使用，以确保组中的所有动画都应用到相同的属性。例如，前面的例子可以使用SequentialAnimation将矩形的颜色先设置为黄色，然后设置为蓝色:

Rectangle {
            width: 100; height: 100
            color: "red"
    
            SequentialAnimation on color {
                ColorAnimation { to: "yellow"; duration: 1000 }
                ColorAnimation { to: "blue"; duration: 1000 }
            }
        }

因为SequentialAnimation对象已经在颜色属性中使用<Animation> on <Property>语法，它的子ColorAnimation对象也会自动应用于此属性，而不需要指定目标或属性动画值。

## 2.3状态变化期间的转换 ##

Qt Quick States是一种属性配置，其中一个属性可以有不同的值来反映不同的状态。状态变化引起性质突变;动画平滑过渡，产生视觉上吸引人的状态变化。  
Transition类型可以包含动画类型，用于插入由状态更改引起的属性更改。若要将转换分配给对象，请将其绑定到transitions属性。  
一个按钮可能有两种状态，当用户单击按钮时的按下状态和当用户释放按钮时的释放状态。我们可以为每个状态分配不同的属性配置。一个过渡将使从压制状态到释放状态的变化生动起来。同样地，在从释放状态到按压状态的变化过程中也会有一个动画。

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}
              }
          ]
      }

![97db82eec447477eaabf3e7f9a93208a.gif][]

将to和from属性绑定到状态的名称将把特定的转换分配给状态更改。对于简单或对称转换，将to属性设置为通配符“\*”，表示转换适用于任何状态更改。

transitions:
        Transition {
            to: "*"
            ColorAnimation { target: button; duration: 100}
        }

## 2.4默认动画为行为 ##

默认属性动画是使用行为动画设置的。在行为类型中声明的动画应用于属性，并使任何属性值的更改动画。然而，行为类型有一个enabled属性来故意启用或禁用行为动画。  
一个ball组件可能有一个行为动画分配给它的x, y和颜色属性。可以设置行为动画来模拟弹性效果。实际上，当ball移动时，这个行为动画将对属性应用弹性效果。

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 }
          }
      }

有几种方法可以将行为动画分配给属性。财产行为声明是将行为动画赋值给属性的一种方便的方法。  
有关行为动画的演示，请参阅Qt Quick Examples - Animation。

# 3.并行或顺序播放动画 #

动画可以并行或顺序运行。并行动画将同时播放一组动画，而顺序动画将依次播放一组动画。在SequentialAnimation和ParallelAnimation中分组动画将顺序或并行播放动画。  
横幅组件可以一个接一个地显示几个图标或口号。不透明度属性可以转换为表示不透明对象的1.0。使用SequentialAnimation类型，不透明度动画将在前一个动画结束后播放。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类型对于播放过渡动画也很有用，因为动画在过渡内部是并行播放的。

# 4.控制动画 #

控制动画有不同的方法。

##  ##

## 4.1动画播放和取样 ##

所有的动画类型都继承自animation类型。不可能创建动画对象;相反，这种类型为动画类型提供了基本的属性和方法。动画类型有start()、stop()、resume()、pause()、restart()和complete()——所有这些方法都控制动画的执行。

## 4.2动画缓冲 ##

缓动曲线定义了动画如何在起始值和结束值之间进行插值。不同的缓动曲线可能会超出所定义的插值范围。缓动曲线简化了动画效果的创建，如反弹效果、加速、减速和循环动画。

对于每个属性动画，QML对象可能有不同的缓动曲线。也有不同的参数来控制曲线，其中一些是专属于特定的曲线。

## 4.3其他类型的动画 ##

此外，QML还提供了其他一些对动画有用的类型:

*  PauseAnimation:启用动画期间的暂停
 *  ScriptAction:允许JavaScript在动画期间执行，可以与StateChangeScript一起使用，以重用现有的脚本
 *  PropertyAction:在动画过程中立即更改属性，而不是将属性更改动画化

下面这些是专门的动画类型，用于动画不同的属性类型：

*  SmoothedAnimation:一个专门的数字动画，当目标值改变时，它可以平滑地改变动画
 *  SpringAnimation:提供了一个类似弹簧的动画，具有一些特殊的属性，如质量、阻尼和ε介子
 *  ParentAnimation:用于动画父变量的变化(参见ParentChange)
 *  AnchorAnimation:用于动画锚的变化(参见AnchorChanges)

# 5.分享动画实例 #

不支持在Transitions或Behaviors之间共享动画实例，这可能会导致未定义的行为。在下面的例子中，改变矩形的位置很可能不会被正确动画。

Rectangle {
          // NOT SUPPORTED: this will not work correctly as both Behaviors
          // try to control a single animation instance
          NumberAnimation { id: anim; duration: 300; easing.type: Easing.InBack }
          Behavior on x { animation: anim }
          Behavior on y { animation: anim }
      }

最简单的解决方法是为两个行为重复NumberAnimation。如果重复的动画相当复杂，你也可以考虑创建一个自定义动画组件，并为每个行为分配一个实例，例如:

// MyNumberAnimation.qml
      NumberAnimation { id: anim; duration: 300; easing.type: Easing.InBack }

// main.qml
      Rectangle {
          Behavior on x { MyNumberAnimation {} }
          Behavior on y { MyNumberAnimation {} }
      }

参见Qt Quick Examples - Animation。

[97db82eec447477eaabf3e7f9a93208a.gif]: /images/20220828/fd2eb8f1c6224c38869917e1a3c91d43.png