qml RotationAnimation详解

1、概述

RotationAnimation 是 Qt Quick 中用于对元素的旋转进行动画控制的类。它通过修改元素的 rotation 属性来实现旋转效果。RotationAnimation 继承自 Animation 类，因此可以与其他动画类一起使用，支持时间、延迟、重复等动画特性。该类特别适用于对 UI 元素进行旋转、翻转或360度转动等视觉效果的实现。

该动画常用于图标、按钮、图形等元素的旋转，尤其适用于需要动态旋转的交互式界面。

2、重要属性

• from (real)

  • 动画的起始旋转角度。默认值为 0。

• to (real)

  • 动画的结束旋转角度。默认值为 360。

• duration (int)

  • 动画的持续时间，单位为毫秒。表示从起始角度到结束角度的旋转所需要的时间。

• easing (Easing)

  • 缓动效果，用于控制旋转的过渡方式。例如 Easing.Linear 表示匀速旋转，Easing.InOutQuad 则表示旋转时先慢后快再慢。

• loops (int)

  • 动画的重复次数。默认值为 1，如果设置为 Infinity，则动画会无限循环。

• autoplay (bool)

  • 动画是否在创建时自动播放。默认值为 true，即创建时动画会自动开始。

• running (bool)

  • 动画的当前状态，true 表示正在播放，false 表示暂停或已结束。

• target (QObject)

  • 目标对象，通常为绑定的元素。

• property (string)

  • 目标对象的属性，这里通常是 rotation 属性。

3、重要方法

• pause()

  • 暂停动画的播放。

• resume()

  • 恢复动画的播放，恢复时从暂停的位置继续播放。

• stop()

  • 停止动画并将目标属性恢复到起始状态。

• start()

  • 启动动画。

• setRunning(bool)

  • 设置动画的运行状态，true 启动，false 停止。

4、重要信号

• finished()

  • 动画完成时触发，表示动画播放完毕。

• paused()

  • 动画被暂停时触发。

• started()

  • 动画开始时触发。

• runningChanged()

  • 当动画的 running 属性发生变化时触发。

5、常用枚举类型

• Easing
  • 缓动效果（Easing Function），用于控制旋转动画的运动方式。常见的枚举类型有：
    • Easing.Linear：匀速运动。
    • Easing.InQuad：加速运动，开始时较慢，逐渐加速。
    • Easing.OutQuad：减速运动，开始时较快，逐渐减慢。
    • Easing.InOutQuad：先慢加速，再慢减速。
    • Easing.InCubic：加速，速度较快的缓动效果。
    • Easing.OutCubic：减速，较为平滑的缓动效果。
    • Easing.InOutCubic：先加速，再减速，较为自然的过渡效果。

import QtQuick 2.14
import QtQuick.Window 2.12
import QtQuick.Controls 2.14

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("RotationAnimation Example")

    Rectangle {
        id: rect
        width: 200
        height: 200
        color: 'blue'
        anchors.centerIn: parent

        RotationAnimation on rotation {
            id: rotationAnimation
            from: 0
            to: 360
            duration: 2000
            easing.type: Easing.InOutQuad
            loops: Animation.Infinite
            target: rect

            onStarted: {
                console.log("Rotation animation started")
            }
            onFinished: {
                // 注意：由于设置了 loops: Animation.Infinite，这个信号实际上不会被触发
                console.log("Rotation animation finished (this will not be logged due to infinite loops)")
            }
            onStopped: {
                console.log("Rotation animation stopped manually")
            }
            onRunningChanged: {
                console.log("Rotation animation running state changed to: " + rotationAnimation.running)
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (rotationAnimation.running) {
                    rotationAnimation.stop()
                } else {
                    rotationAnimation.start()
                }
            }
        }
    }
}

觉得有帮助的话，打赏一下呗。。

           

需要商务合作（定制程序）的欢迎私信！！