Qt Quick Examples - Animation

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

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

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

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.

缓和曲线

缓和曲线 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 {
        userIcon {
            x: middleRightRect.x
            y: middleRightRect.y
        }
    }
},
// In state 'bottomLeft', move the image to bottomLeftRect
State {
    name: "bottomLeft"
    PropertyChanges {
        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

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

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

范例工程 @ code.qt.io