属性

  1. ● alwaysRunToEnd : bool
  2. ● loops : int
  3. ● paused : bool
  4. ● running : bool

信号

  1. ● finished()
  2. ● started()
  3. ● stopped()

方法

  1. ● complete()
  2. ● pause()
  3. ● restart()
  4. ● resume()
  5. ● start()
  6. ● stop()

Animation子类

AnchorAnimation, Animator, ParallelAnimation, ParentAnimation, PathAnimation, PauseAnimation, PropertyAction, PropertyAnimation, ScriptAction, and SequentialAnimation

PropertyAnimation

属性动画，将属性从一个状态到另一个状态切换表现为动画。

  1. PropertyAnimation {
  2.   id: animateColor;
  3.   target: flashingblob;
  4.   properties: "color";
  5.   to: "green";
  6.   duration: 1000
  7. }

SequentialAnimation

顺序执行动画，内部动画执行的顺序是阻塞顺序执行的，只有前面start的动画执行完毕后才能执行后续的动画。

  1. Rectangle {
  2.   width: 100; height: 100
  3.   color: "red"
  5.   SequentialAnimation on color   //顺序执行动画
  6.   {
  7.     ColorAnimation { to: "yellow"; duration: 1000 }
  8.     ColorAnimation { to: "blue"; duration: 1000 }
  9.   }
  10. }

ColorAnimation

继承自PropertyAnimation，ColorAnimation是一种专门的PropertyAnimation，它定义了在颜色值更改时应用的动画。

属性

  1. from : color
  2. to : color

属性中近特殊指定了to、from的类型，其余皆是继承与PropertyAnimation

NumberAnimation

继承自PropertyAnimation，数字动画是一种专门的属性动画，它定义了当数值更改时要应用的动画。

属性

  1. //numberanimation内部成员
  2. ● from : real
  3. ● to : real
  4. //有propertyanimation继承而来
  5. ● duration : int
  6. ● easing
  7.   ○ easing.amplitude : real
  8.   ○ easing.bezierCurve : list<real>
  9.   ○ easing.overshoot : real
  10.   ○ easing.period : real
  11.   ○ easing.type : enumeration
  12. ● exclude : list<Object>
  13. ● from : variant
  14. ● properties : string
  15. ● property : string
  16. ● target : Object
  17. ● targets : list<Object>
  18. ● to : variant
  19. //由animation继承来
  20. ● alwaysRunToEnd : bool
  21. ● loops : int
  22. ● paused : bool
  23. ● running : bool
  24. ● complete()
  25. ● finished()
  26. ● pause()
  27. ● restart()
  28. ● resume()
  29. ● start()
  30. ● started()
  31. ● stop()
  32. ● stopped()

Behavior

  1.     Rectangle {
  2.          width: 75; height: 75; radius: width
  3.          id: ball
  4.          color: "salmon"
  6.          MouseArea {
  7.              anchors.fill: parent
  8.              onClicked: {
  9.                 ball.x += 20
  10.                  ball.y +=10
  11.              }
  12.          }
  14.          //预先制作一个行为，针对某一个值得变化，这里当x变化时，就会触发下面的动画
  15.          Behavior on x {
  16.              NumberAnimation {
  17.                  id: bouncebehavior
  18.                  easing {
  19.                      type: Easing.OutElastic
  20.                      amplitude: 1.0
  21.                      period: 0.5
  22.                  }
  23.              }
  24.          }
  25.          Behavior on y {
  26.              animation: bouncebehavior
  27.          }
  28.          Behavior {
  29.              ColorAnimation { target: ball; duration: 100 }
  30.          }
  31.      }

操作实例：

  1. Rectangle {
  2.          id: flashingblob
  3.          width: 75; height: 75
  4.          color: "blue"
  5.          opacity: 1.0
  7.          MouseArea {
  8.              anchors.fill: parent
  9.              onClicked: {
  10.                  animateColor.start()       //需要手动开启动画，动画效果是同步执行的，一个执行完再执行下一个
  11.                  animateOpacity.start()
  12.                  animateWidth.start()
  13.              }
  14.          }
  16.          PropertyAnimation {
  17.              id: animateColor;
  18.              target: flashingblob;
  19.              properties: "color";
  20.              to: "green";
  21.              duration: 1000}
  23.          NumberAnimation {
  24.              id: animateOpacity
  25.              target: flashingblob
  26.              properties: "opacity"
  27.              from: 0.1
  28.              to: 1.0
  29. //             loops: Animation.Infinite
  30. //             easing {type: Easing.OutBack; overshoot: 500}
  31.              duration:2000
  32.         }
  33.          NumberAnimation {
  34.              id: animateWidth
  35.              target: flashingblob
  36.              properties: "width"
  37.              from: 75
  38.              to: 200
  39. //             loops: Animation.Infinite
  40. //             easing {type: Easing.OutBack; overshoot: 500}
  41.              duration:2000
  42.         }
  43.      }

QQ录屏20220716164159.mp4