On this page

RotationAnimator QML Type

The RotationAnimator type animates the rotation of an Item. More...

Import Statement: import QtQuick
Inherits:

Animator

Properties

Detailed Description

Animator types are different from normal Animation types. When using an Animator, the animation can be run in the render thread and the property value will jump to the end when the animation is complete.

The value of Item::rotation is updated after the animation has finished.

The following snippet shows how to use a RotationAnimator together with a Rectangle item.

Rectangle {
    id: rotatingBox
    width: 50
    height: 50
    color: "lightsteelblue"
    RotationAnimator {
        target: rotatingBox;
        from: 0;
        to: 360;
        duration: 1000
        running: true
    }
}

It is also possible to use the on keyword to tie the RotationAnimator directly to the rotation property of an Item instance.

Rectangle {
    width: 50
    height: 50
    color: "lightsteelblue"
    RotationAnimator on rotation {
        from: 0;
        to: 360;
        duration: 1000
    }
}

Note: Animator types have no benefit when a non-threaded render loop is used.

Note: It is recommended that applications consider designs based on multi-threaded, asynchronous principles, rather than relying on Animators to show animated content while doing expensive, blocking work on the main (GUI) thread. Instead of long, blocking operations, prefer using WorkerScript and asynchronous image loading in QML, and worker threads, parallel algorithms, Qt Concurrent, and coroutines in C++, thus keeping the entire application and UI responsive all the time.

See also Item::transformOrigin and ScaleAnimator.

Property Documentation

direction : enumeration

This property holds the direction of the rotation.

Possible values are:

ConstantDescription
RotationAnimator.Numerical(default) Rotate by linearly interpolating between the two numbers. A rotation from 10 to 350 will rotate 340 degrees clockwise.
RotationAnimator.ClockwiseRotate clockwise between the two values
RotationAnimator.CounterclockwiseRotate counterclockwise between the two values
RotationAnimator.ShortestRotate in the direction that produces the shortest animation path. A rotation from 10 to 350 will rotate 20 degrees counterclockwise.

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