Roson讲Qt#36 QML动画实例大全

绝地灬酷狼 2022-09-13 15:16 172阅读 0赞

# 1.颜色动画(ColorAnimation) #

下面这个示例使用颜色的变化来展示天空和草坪从白天到晚上的变化。

gradient: Gradient {
          GradientStop {
              position: 0.0
              SequentialAnimation on color {
                  loops: Animation.Infinite
                  ColorAnimation { from: "#14148c"; to: "#0E1533"; duration: 5000 }
                  ColorAnimation { from: "#0E1533"; to: "#14148c"; duration: 5000 }
              }
          }
          GradientStop {
              position: 1.0
              SequentialAnimation on color {
                  loops: Animation.Infinite
                  ColorAnimation { from: "#14aaff"; to: "#437284"; duration: 5000 }
                  ColorAnimation { from: "#437284"; to: "#14aaff"; duration: 5000 }
              }
          }
      }

![e96fc21f0dc44f4ba8def56edadc46af.gif][]

# 2.属性动画(PropertyAnimation) #

下面这个示例使用数字动画来展示一个上下弹跳的圆圈。

// Animate the y property. Setting loops to Animation.Infinite makes the
      // animation repeat indefinitely, otherwise it would only run once.
      SequentialAnimation on y {
          loops: Animation.Infinite
    
          // Move from minHeight to maxHeight in 300ms, using the OutExpo easing function
          NumberAnimation {
              from: smiley.minHeight; to: smiley.maxHeight
              easing.type: Easing.OutExpo; duration: 300
          }
    
          // Then move back to minHeight in 1 second, using the OutBounce easing function
          NumberAnimation {
              from: smiley.maxHeight; to: smiley.minHeight
              easing.type: Easing.OutBounce; duration: 1000
          }
    
          // Then pause for 500ms
          PauseAnimation { duration: 500 }
      }

![66d87c3b5141405ca1f4a7210e48cfff.gif][]

# 3.动画家(Animators) #

下面这个示例使用动画家来展示一个上下弹跳的图标

SequentialAnimation {
          SequentialAnimation {
              ParallelAnimation {
                  YAnimator {
                      target: smiley;
                      from: smiley.minHeight;
                      to: smiley.maxHeight
                      easing.type: Easing.OutExpo;
                      duration: 300
                  }
                  ScaleAnimator {
                      target: shadow
                      from: 1
                      to: 0.5
                      easing.type: Easing.OutExpo;
                      duration: 300
                  }
              }
              ParallelAnimation {
                  YAnimator {
                      target: smiley;
                      from: smiley.maxHeight;
                      to: smiley.minHeight
                      easing.type: Easing.OutBounce;
                      duration: 1000
                  }
                  ScaleAnimator {
                      target: shadow
                      from: 0.5
                      to: 1
                      easing.type: Easing.OutBounce;
                      duration: 1000
                  }
              }
          }
          PauseAnimation { duration: 500 }
          running: true
          loops: Animation.Infinite
      }

![435b90199f934b0fa2355f203ff0df17.gif][]

# 4.   Behaviors(Behaviors) #

下面这个示例使用Behaviors将矩形移动到您鼠标的位置。

// Set an 'elastic' behavior on the focusRect's y property.
      Behavior on y {
          NumberAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
      }

![7cf19da57c7645ee907ba4f91e2226a0.gif][]

# 5.扭动的文本(Wiggly Text) #

Wiggly Text演示了使用更复杂的行为来动画和拖动文本。它通过给每个字母分配一个复杂的绑定来实现:

x: follow ? follow.x + follow.width : container.width / 6
    y: follow ? follow.y : container.height / 2

然后，它使用行为来动画每个字母的运动:

Behavior on x { enabled: container.animated; SpringAnimation { spring: 3; damping: 0.3; mass: 1.0 } }
    Behavior on y { enabled: container.animated; SpringAnimation { spring: 3; damping: 0.3; mass: 1.0 } }

![2b024011ae624453969c94d5d4bea5c4.gif][]

# 6.电视网球(   Tv Tennis) #

电视网球使用复杂的行为，使球拍跟随球，模拟无限网球游戏。同样，依赖于其他值的绑定被应用到位置和动画提供的行为。

y: ball.direction == 'left' ? ball.y - 45 : page.height/2 -45;
      Behavior on y { SpringAnimation{ velocity: 300 } }

![3bca4f7f8ccd4957b34382e9ca2ba7d6.gif][]

# 7.缓冲曲线(   Easing Curves) #

![6e03d51e625745f6a8abcd9fcf1e4b19.gif][]

# 8.状态(   States) #

States演示了项目的属性如何在不同的状态之间变化。  
它定义了几个状态:

// In state 'middleRight', move the image to middleRightRect
      State {
          name: "middleRight"
          PropertyChanges { target: userIcon; x: middleRightRect.x; y: middleRightRect.y }
      },
    
      // In state 'bottomLeft', move the image to bottomLeftRect
      State {
          name: "bottomLeft"
          PropertyChanges { target: userIcon; x: bottomLeftRect.x; y: bottomLeftRect.y  }
      }

![eeb7d3f85f2a4abe9af2adb60696839c.gif][]

# 9.转换(   Transitions) #

Transitions以States为例，并通过设置Transitions来动画属性的变化:

// Transitions define how the properties change when the item moves between each state
      transitions: [
    
          // When transitioning to 'middleRight' move x,y over a duration of 1 second,
          // with OutBounce easing function.
          Transition {
              from: "*"; to: "middleRight"
              NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce; duration: 1000 }
          },
    
          // When transitioning to 'bottomLeft' move x,y over a duration of 2 seconds,
          // with InOutQuad easing function.
          Transition {
              from: "*"; to: "bottomLeft"
              NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: 2000 }
          },
    
          // For any other state changes move x,y linearly over duration of 200ms.
          Transition {
              NumberAnimation { properties: "x,y"; duration: 200 }
          }

![8f4d24e285e647d19ba4e598a9a129c4.gif][]

# 10.路径动画(PathAnimation) #

使用PathAnimation沿贝塞尔曲线动画图像。

PathAnimation {
          id: pathAnim
    
          duration: 2000
          easing.type: Easing.InQuad
    
          target: box
          orientation: PathAnimation.RightFirst
          anchorPoint: Qt.point(box.width/2, box.height/2)
          path: Path {
              startX: 50; startY: 50
    
              PathCubic {
                  x: window.width - 50
                  y: window.height - 50
    
                  control1X: x; control1Y: 50
                  control2X: 50; control2Y: y
              }
    
              onChanged: canvas.requestPaint()
          }
      }

![995fa4b1585549baadd625259a84f6b6.gif][]

# 11.路径插入器(PathInterpolator) #

使用PathInterpolator沿贝塞尔曲线动画图像。

PathInterpolator {
          id: motionPath
    
          path: Path {
              startX: 50; startY: 50
    
              PathCubic {
                  x: window.width - 50
                  y: window.height - 50
    
                  control1X: x; control1Y: 50
                  control2X: 50; control2Y: y
              }
    
              onChanged: canvas.requestPaint()
          }
    
          SequentialAnimation on progress {
              running: true
              loops: -1
              PauseAnimation { duration: 1000 }
              NumberAnimation {
                  id: progressAnim
                  running: false
                  from: 0; to: 1
                  duration: 2000
                  easing.type: Easing.InQuad
              }
          }
      }

![818e7a3b8e554983a433c5beecfab14c.gif][]

[e96fc21f0dc44f4ba8def56edadc46af.gif]: /images/20220828/12d9c47132874ed6a4e57ef23e235db7.png
[66d87c3b5141405ca1f4a7210e48cfff.gif]: /images/20220828/2ab78a8854064d2cb1e2b551b3b26066.png
[435b90199f934b0fa2355f203ff0df17.gif]: /images/20220828/8632f709fd6945788ed9b5eb51cfc79d.png
[7cf19da57c7645ee907ba4f91e2226a0.gif]: /images/20220828/5645d6a1670e47528ae47e8bc06eb1ad.png
[2b024011ae624453969c94d5d4bea5c4.gif]: /images/20220828/29e80a50e4104bdb9002ee534a125bd1.png
[3bca4f7f8ccd4957b34382e9ca2ba7d6.gif]: /images/20220828/6cd12accd22d4cac9d41cecf9d59797c.png
[6e03d51e625745f6a8abcd9fcf1e4b19.gif]: /images/20220828/e610a73decd543839a2de774e8afdfd8.png
[eeb7d3f85f2a4abe9af2adb60696839c.gif]: /images/20220828/6ec7fd66d1a64a85b41e8d2904b71bc2.png
[8f4d24e285e647d19ba4e598a9a129c4.gif]: /images/20220828/b78a0824ff9a4a7e99c4ea89e30627d2.png
[995fa4b1585549baadd625259a84f6b6.gif]: /images/20220828/1c89e84b964344208199cc7ae0df85e0.png
[818e7a3b8e554983a433c5beecfab14c.gif]: /images/20220828/6331cb1d5b02401b991880dcff9b2296.png