Qt Quick Beispiele - Animation

Dies ist eine Sammlung von QML-Animationsbeispielen.

Animation ist eine Sammlung von kleinen QML-Beispielen zum Thema Animation. Jedes Beispiel ist eine kleine QML-Datei, die einen bestimmten Typ oder eine bestimmte Funktion hervorhebt.

Weitere Informationen über Animationen finden Sie unter Wichtige Konzepte in Qt Quick - Zustände, Übergänge und Animationen.

Ausführen des Beispiels

Zum Ausführen des Beispiels von Qt Creatorauszuführen, öffnen Sie den Modus Welcome und wählen Sie das Beispiel aus Examples aus. Weitere Informationen finden Sie unter Erstellen und Ausführen eines Beispiels.

ColorAnimation

ColorAnimation verwendet Farbanimationen, um einen Himmel von Tag auf Nacht umzublenden.

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 verwendet Zahlenanimationen, um einen Kreis auf und ab hüpfen zu lassen.

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

Animatoren

Animators verwendet Animatoren, um ein Symbol auf- und abzuspringen.

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
}

Behaviors

Behaviors verwendet Behaviors, um ein Rechteck an die Stelle zu bewegen, auf die Sie klicken.

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

Wackeliger Text

Wiggly Text demonstriert die Verwendung komplexerer Verhaltensweisen zum Animieren und Wackeln von Text, wenn Sie ihn ziehen. Zu diesem Zweck wird jedem Buchstaben eine komplexe Bindung zugewiesen:

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

Dann werden Verhaltensweisen verwendet, um die Bewegung der einzelnen Buchstaben zu animieren:

            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 verwendet komplexe Verhaltensweisen, um die Schläger einem Ball folgen zu lassen und so ein unendliches Tennisspiel zu simulieren. Auch hier wird eine Bindung, die von anderen Werten abhängt, auf die Position angewendet und ein Verhalten sorgt für die Animation.

Weichzeichnende Kurven

Easing Curves zeigt alle Easing-Kurven, die in Qt Quick Animationen verfügbar sind.

Zustände

States demonstriert, wie die Eigenschaften eines Elements zwischen verschiedenen Zuständen variieren können.

Es werden mehrere Zustände definiert:

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

Übergänge

Transitions nimmt das States-Beispiel und animiert die Eigenschaftsänderungen durch das Setzen von Übergängen:

// 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 animiert ein Bild entlang einer Bézier-Kurve unter Verwendung eines 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 animiert ein Bild entlang derselben Bézier-Kurve, wobei stattdessen PathInterpolator verwendet wird.

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

Beispielprojekt @ code.qt.io

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.