Qt图片旋转演示基于QML

最新推荐文章于 2025-05-09 21:54:17 发布

自由软件开发者

最新推荐文章于 2025-05-09 21:54:17 发布

阅读量713

点赞数 1

CC 4.0 BY-SA版权

分类专栏： QT编程文章标签： servlet jar java

本文链接：https://blog.youkuaiyun.com/fittec/article/details/127098940

QT编程专栏收录该内容

148 篇文章

订阅专栏

这篇博客展示了如何使用QML实现一个简单的图片旋转动画。当点击图片时，图片会从0度开始顺时针旋转90度，动画结束后自动反向旋转回初始状态。通过RotationAnimation和MouseArea组件，实现了交互式的旋转效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

演示效果

主要通过旋转动画实现,从0度到90度旋转,动画停止后再反向旋转

 //旋转动画
    RotationAnimation{
        id: idRotationAni
        target: idImgToRatation //被旋转的目标
        from: 0
        to: 90
        duration: 100
        //动画结束
        onStopped: {
            //还原图片角度
            idRotationAni.from = isRotation ? 0 : 90;
            idRotationAni.to = isRotation ? 90 : 0;
            isRotation = !isRotation;
        }
    }

点击图片时执行旋转动画

//鼠标点击区域
        MouseArea{
            anchors.fill: parent
            onClicked:{
                if(!idRotationAni.running){
                   idRotationAni.start();//启动旋转动画
                }
            }
        }

完整源码:

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("Qt图片旋转演示基于QML")

    property bool isRotation : false //是否已旋转,默认未旋转
    //被旋转的图片组件
    Image {
        id:idImgToRatation
        height: 300
        width: 300
        anchors.centerIn: parent //居中
        source: "qrc:/image.png" //图片URL
        //鼠标点击区域
        MouseArea{
            anchors.fill: parent
            onClicked:{
                if(!idRotationAni.running){
                   idRotationAni.start();//启动旋转动画
                }
            }
        }
    }
    //旋转动画
    RotationAnimation{
        id: idRotationAni
        target: idImgToRatation //被旋转的目标
        from: 0
        to: 90
        duration: 100
        //动画结束
        onStopped: {
            //还原图片角度
            idRotationAni.from = isRotation ? 0 : 90;
            idRotationAni.to = isRotation ? 90 : 0;
            isRotation = !isRotation;
        }
    }
}