图片旋转问题(指针旋转问题)

1.最近项目速度表盘有个指针旋转的动画问题(卡了很久了)
2.因为项目都是使用的自动布局,所以这个表盘和指针也是用的自动布局
3.然后动画的时候一直跑偏,指针一直跑偏
4.后来找到原因,因为自动布局的话会对动画有一定的影响
5.然后更改自动布局的方式改成Frame (包括指针和表盘)
6.更改后,发现问题 _pointImageView.layer.anchorPoint = CGPointMake(1, 0); 指针图片旋转 如果添加上这句话的话,然后指针的图片就会跑偏,然后就百度一堆问题,找到原因,
7.根据博客http://blog.youkuaiyun.com/yongyinmg/article/details/37927793 上面的介绍,实际开发中,改变anchorPoint的值然后会导致layer层位置的变化,所有 按照博客上的说法:但是在实际使用没必要这么麻烦。修改anchorPoint而不想移动layer,在修改anchorPoint后再重新设置一遍frame就可以达到目的,这时position就会自动进行相应的改变。
8.所以我在设置完 _pointImageView.layer.anchorPoint = CGPointMake(1, 0),然后就对_pointImageView的frame从新就行赋值,然后旋转为题就解决了
9.哎,这个问题快纠结很长时间,所以啊,还是要多了解的。必经第一次写动画。

### 实现 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、付费专栏及课程。

余额充值