QML教程（四）动画

分手后的思念是犯贱 2024-03-30 13:48 152阅读 0赞

目录

一、状态和转换

二、属性更改进行动画

XAnimator 水平动画

YAnimator 垂直动画

ScaleAnimator 缩放动画

RotationAnimator 旋转动画

OpacityAnimator 透明度动画

UniformAnimator 颜色动画

三、其他动画

四、精灵动画AnimatedSprite

Qt Quick提供了对属性进行动画处理的功能。对属性进行动画处理允许属性值在中间值之间移动，而不是立即更改为目标值。若要对项目的位置进行动画处理，可以对控制项目位置的属性（例如 x 和 y）进行动画处理，以便项目的位置在到达目标位置的途中更改每一帧。

Qt Quick提供了两种简单的方法，让UI组件随动画一起移动，而不是立即出现在新位置。

一、状态和转换

Qt Quick允许在State对象中声明各种UI状态。这些状态由基状态的属性更改组成。过渡是可以与项目关联的对象，用于定义当项目因状态更改时，而随之更改其属性将如何进行动画处理。

例：

  1. Item {
  2.     id: container
  3.     width: 320
  4.     height: 120
  6.     Rectangle {
  7.         id: rect
  8.         color: "red"
  9.         width: 120
  10.         height: 120
  12.         TapHandler {
  13.             onTapped: container.state === '' ? container.state = 'other' : container.state = ''
  14.         }
  15.     }
  16.     states: [
  17.         // This adds a second state to the container where the rectangle is farther to the right
  19.         State { name: "other"
  21.             PropertyChanges {
  22.                 target: rect
  23.                 x: 200
  24.             }
  25.         }
  26.     ]
  27.     transitions: [
  28.         // This adds a transition that defaults to applying to all state changes
  30.         Transition {
  32.             // This applies a default NumberAnimation to any changes a state change makes to x or y properties
  33.             NumberAnimation { properties: "x,y" }
  34.         }
  35.     ]
  36. }

二、属性更改进行动画

行为可用于指定属性更改时要使用的动画。然后，这将应用于所有更改，无论其来源如何。下面的示例使用行为对在屏幕上移动的按钮进行动画处理。
例：

  1. Item {
  2.     width: 320
  3.     height: 120
  5.     Rectangle {
  6.         color: "green"
  7.         width: 120
  8.         height: 120
  10.         // This is the behavior, and it applies a NumberAnimation to any attempt to set the x property
  11.         Behavior on x {
  13.             NumberAnimation {
  14.                 //This specifies how long the animation takes
  15.                 duration: 600
  16.                 //This selects an easing curve to interpolate with, the default is Easing.Linear
  17.                 easing.type: Easing.OutBounce
  18.             }
  19.         }
  21.         TapHandler {
  22.             onTapped: parent.x == 0 ? parent.x = 200 : parent.x = 0
  23.         }
  24.     }
  25. }

  1. XAnimator 水平动画

    1. Rectangle {
    2.     id: xmovingBox
    3.     width: 50
    4.     height: 50
    5.     color: "lightsteelblue"
    6.     XAnimator {
    7.         target: xmovingBox;
    8.         from: 10;
    9.         to: 0;
    10.         duration: 1000
    11.         running: true
    12.     }
    13. }

    简写形式：使用on语法进行绑定

    1. Rectangle {
    2.     width: 50
    3.     height: 50
    4.     color: "lightsteelblue"
    5.     XAnimator on x {
    6.         from: 10;
    7.         to: 0;
    8.         duration: 1000
    9.     }
    10. }

  2. YAnimator 垂直动画

    1. Rectangle {
    2.     id: ymovingBox
    3.     width: 50
    4.     height: 50
    5.     color: "lightsteelblue"
    6.     YAnimator {
    7.         target: ymovingBox;
    8.         from: 10;
    9.         to: 0;
    10.         duration: 1000
    11.         running: true
    12.     }
    13. }

    简写形式：使用on语法进行绑定

    1. Rectangle {
    2.     width: 50
    3.     height: 50
    4.     color: "lightsteelblue"
    5.     YAnimator on y {
    6.         from: 10;
    7.         to: 0;
    8.         duration: 1000
    9.     }
    10. }

  3. ScaleAnimator 缩放动画

    1. Rectangle {
    2.     id: scalingBox
    3.     width: 50
    4.     height: 50
    5.     color: "lightsteelblue"
    6.     ScaleAnimator {
    7.         target: scalingBox;
    8.         from: 0.5;
    9.         to: 1;
    10.         duration: 1000
    11.         running: true
    12.     }
    13. }

    简写形式：使用on语法进行绑定

    1. Rectangle {
    2.     width: 50
    3.     height: 50
    4.     color: "lightsteelblue"
    5.     ScaleAnimator on scale {
    6.         from: 0.5;
    7.         to: 1;
    8.         duration: 1000
    9.     }
    10. }

  4. RotationAnimator 旋转动画

    1. Rectangle {
    2.     id: rotatingBox
    3.     width: 50
    4.     height: 50
    5.     color: "lightsteelblue"
    6.     RotationAnimator {
    7.         target: rotatingBox;
    8.         from: 0;
    9.         to: 360;
    10.         duration: 1000
    11.         running: true
    12.     }
    13. }

    简写形式：使用on语法进行绑定

    1. Rectangle {
    2.     width: 50
    3.     height: 50
    4.     color: "lightsteelblue"
    5.     RotationAnimator on rotation {
    6.         from: 0;
    7.         to: 360;
    8.         duration: 1000
    9.     }
    10. }

  5. OpacityAnimator 透明度动画

    1. Rectangle {
    2.     id: opacityBox
    3.     width: 50
    4.     height: 50
    5.     color: "lightsteelblue"
    6.     OpacityAnimator {
    7.         target: opacityBox;
    8.         from: 0;
    9.         to: 1;
    10.         duration: 1000
    11.         running: true
    12.     }
    13. }

    简写形式：使用on语法进行绑定

    1. Rectangle {
    2.     width: 50
    3.     height: 50
    4.     color: "lightsteelblue"
    5.     OpacityAnimator on opacity{
    6.         from: 0;
    7.         to: 1;
    8.         duration: 1000
    9.     }
    10. }

  6. UniformAnimator 颜色动画

    1. ShaderEffect {
    2.     id: shader
    3.     width: 50
    4.     height: 50
    5.     property variant t;
    6.     UniformAnimator {
    7.         target: shader
    8.         uniform: "t"
    9.         from: 0
    10.         to: 1
    11.         duration: 1000
    12.         running: true
    13.     }
    14.     fragmentShader: "qrc:shader.frag.qsb"
    15. }

    简写形式：使用on语法进行绑定

    1. ShaderEffect {
    2.     width: 50
    3.     height: 50
    4.     property variant t;
    5.     UniformAnimator on t {
    6.         from: 0
    7.         to: 1
    8.         duration: 1000
    9.     }
    10.     fragmentShader: "qrc:shader.frag.qsb"
    11. }

三、其他动画

并非所有动画都必须绑定到特定的属性或状态。还可以更一般地创建动画，并在动画中指定目标项和属性。以下是执行此操作的不同方法的一些示例：

  1. Item {
  2.     width: 320
  3.     height: 120
  5.     Rectangle {
  6.         color: "blue"
  7.         width: 120
  8.         height: 120
  10.         // By setting this SequentialAnimation on x, it and animations within it will automatically animate
  11.         // the x property of this element
  12.         SequentialAnimation on x {
  13.             id: xAnim
  14.             // Animations on properties start running by default
  15.             running: false
  16.             loops: Animation.Infinite // The animation is set to loop indefinitely
  17.             NumberAnimation { from: 0; to: 200; duration: 500; easing.type: Easing.InOutQuad }
  18.             NumberAnimation { from: 200; to: 0; duration: 500; easing.type: Easing.InOutQuad }
  19.             PauseAnimation { duration: 250 } // This puts a bit of time between the loop
  20.         }
  22.         TapHandler {
  23.             // The animation starts running when you click within the rectangle
  24.             onTapped: xAnim.running = true
  25.         }
  26.     }
  27. }
  28. Item {
  29.     width: 320
  30.     height: 120
  32.     Rectangle {
  33.         id: rectangle
  34.         color: "yellow"
  35.         width: 120
  36.         height: 120
  38.         TapHandler {
  39.             // The animation starts running when you click within the rectangle
  40.             onTapped: anim.running = true;
  41.         }
  42.     }
  44.     // This animation specifically targets the Rectangle's properties to animate
  45.     SequentialAnimation {
  46.         id: anim
  47.         // Animations on their own are not running by default
  48.         // The default number of loops is one, restart the animation to see it again
  50.         NumberAnimation { target: rectangle; property: "x"; from: 0; to: 200; duration: 500 }
  52.         NumberAnimation { target: rectangle; property: "x"; from: 200; to: 0; duration: 500 }
  53.     }
  54. }

四、精灵动画AnimatedSprite

Qt Quick 精灵引擎是一个随机状态机，结合了切割包含多个动画帧的图像的能力。 

  1. AnimatedSprite {
  2.     source: "loading.png"
  3.     frameWidth: 64
  4.     frameHeight: 64
  5.     frameCount: 4
  6.     frameDuration: 500
  7. }

发表评论

表情：
评论列表 （有 0 条评论，152人围观）

还没有评论，来说两句吧...

相关阅读