This is a collection of QML Animation examples.
动画 is a collection of small QML examples relating to animation. Each example is a small QML file emphasizing a particular type or feature.
For more information about animations, visit 重要 Qt Quick 概念 - 状态、过渡和动画 .
要运行范例从 Qt Creator ，打开 欢迎 模式，然后选择范例从 范例 。更多信息，拜访 构建和运行范例 .
ColorAnimation uses color animations to fade a sky from day to night.
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 } } } }
PropertyAnimation uses number animations to bounce a circle up and down.
// 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 } }
动画师 uses animators to bounce an icon up and down.
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 }
行为 uses behaviors to move a rectangle to where you click.
// 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 } }
摆动文本 demonstrates using more complex behaviors to animate and wiggle some text around as you drag it. It does this by assigning a complex binding to each letter:
x: follow ? follow.x + follow.width : container.width / 6
y: follow ? follow.y : container.height / 2
Then, it uses behaviors to animate the movement of each letter:
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 } }
Tv Tennis uses complex behaviors to make the paddles follow a ball to simulate an infinite tennis game. Again, a binding which depends on other values is applied to the position and a behavior provided the animation.
y: ball.direction == 'left' ? ball.y - 45 : page.height/2 -45; Behavior on y { SpringAnimation{ velocity: 300 } }
缓和曲线 shows off all the easing curves available in Qt Quick animations.
状态 demonstrates how the properties of an item can vary between states .
It defines several 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 } }
过渡 takes the States example and animates the property changes by setting 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 } }
PathAnimation animates an image along a bezier curve using a 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() } }
PathInterpolator animates an image along the same bezier curve, using a 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 } } }