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

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

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
  }

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

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

6.电视网球( Tv Tennis)

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

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

7.缓冲曲线( Easing Curves)

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

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

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

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