QML 图片旋转

Image {
        id: loading_Image
        visible: true
        anchors.left: parent.left
        anchors.leftMargin: 590
        anchors.top: parent.top
        anchors.topMargin: 240
        source: "pic_loading_b.png"

        NumberAnimation {
            running: loading_Image.visible
            loops: Animation.Infinite
            target: loading_Image
            from: 0
            to: 360
            property: "rotation"
            duration: 1000
        }
    }

 

### 实现 QML 图片旋转动画 为了实现在 QML 中使用指针事件触发图片旋转动画,可以利用 `Rotation` 变换以及 `Behavior on angle` 来定义平滑过渡的效果。同时,通过监听鼠标点击或触摸事件来改变角度属性。 ```qml import QtQuick 2.15 import QtQuick.Controls 2.15 Item { width: 600; height: 400 Image { id: imageToRotate source: "https://example.com/image.png" anchors.centerIn: parent transform: Rotation { origin.x: imageToRotate.width / 2 origin.y: imageToRotate.height / 2 axis { x: 0; y: 0; z: 1 } Behavior on angle { NumberAnimation { duration: 500 } } } MouseArea { anchors.fill: parent onPressed: { // Start rotation when pressed down. imageToRotate.transform.angle += 90; } } } } ``` 上述代码展示了如何设置一个简单的图像组件并为其添加旋转行为[^1]。当用户按下此区域内的任意位置时,图像将会顺时针方向旋转90度,并且由于设置了 `NumberAnimation` ,这个变化会以持续时间为500毫秒的动画形式展现出来。 对于更加复杂的交互需求,比如拖拽控制旋转角度,则需要进一步捕捉移动过程中的坐标偏移量来进行动态计算: ```qml MouseArea { ... property real startAngle: 0 property point startPoint onPressed: { startPoint = mouse.position startAngle = imageToRotate.rotation.angle % 360 } onMouseXChanged: { let dx = (mouse.x - startPoint.x) * Math.PI / boundingRectangle.width imageToRotate.transform.angle = startAngle + dx * 180/Math.PI } } ``` 这段增强版的例子说明了怎样基于手指或鼠标的位移增量调整对象的角度值。这里采用弧度制转成角度的方式确保每次触控都能精确反映到最终呈现出来的视觉变换上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值