Back to Qt.io
Contact Us Blog Download Qt
Auf dieser Seite

Qt Quick Beispiele – Animation

Dies ist eine Sammlung von QML-Animationsbeispielen.

Himmelsverlauf, der über dem grünen Boden von Blau zu Dunkelblau übergeht

„Animation“ ist eine Sammlung kleiner QML-Beispiele zum Thema Animation. Jedes Beispiel ist eine kleine QML-Datei, die einen bestimmten Typ oder eine bestimmte Funktion hervorhebt.

Weitere Informationen zu Animationen finden Sie unter „Wichtige Konzepte in Qt Quick – Zustände, Übergänge und Animationen“.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

ColorAnimation

„ColorAnimation“ nutzt Farbanimationen, um den Himmel von Tag zu Nacht überblenden zu lassen.

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

Animators

„Animators“ verwendet Animatoren, um ein Symbol auf und ab hüpfen zu lassen.

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
}

Verhalten

„Behaviors“ nutzt Verhaltensweisen, 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
    }
}

Wackelnder Text

„Wiggly Text“ demonstriert die Verwendung komplexerer Verhaltensweisen, um Text beim Ziehen zu animieren und hin und her zu bewegen. Dazu wird jedem Buchstaben eine komplexe Bindung zugewiesen:

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

Anschließend werden Verhaltensweisen verwendet, um die Bewegung jedes Buchstabens 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“ nutzt komplexe Verhaltensweisen, damit die Schläger dem Ball folgen und so ein endloses Tennismatch simulieren. Auch hier wird eine von anderen Werten abhängige Bindung auf die Position angewendet, und ein Verhalten sorgt für die Animation.

Beschleunigungs- und Abbremskurven

„Easing Curves“ zeigt alle in „ Qt Quick “-Animationen verfügbaren Beschleunigungs- und Abbremskurven.

Zustände

„Zustände“ veranschaulicht, wie sich die Eigenschaften eines Elements zwischen verschiedenen Zuständen ändern können.

Es definiert mehrere Zustände:

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

„Übergänge“ greift das Beispiel „Zustände“ auf und animiert die Eigenschaftsänderungen durch das Festlegen 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 }
    }

Pfadanimation

„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, verwendet dabei jedoch einen „ 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
        }
    }
}

Beispielprojekt @ code.qt.io

© 2026 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.