方法一
js：
anim() {
let that = this;
var animation = uni.createAnimation({
duration: 3000,
timingFunction: 'ease'
});
this.animation = animation;
animation.rotateX(180).step();
this.animationData = animation.export();
}, 图片
<image ref="test" :animation="animationData" src="../../static/livePush/load.png" mode="aspectFill" class="load"></image>
就是想让这个动画旋转，H5有效果，App现在没有效果
方法二
anim(){
let that=this
let el = this.$refs.test;
animation.transition(el, {
styles: {
transform: 'rotate(360deg)',
},
duration: 8000, //ms
timingFunction: 'linear',
needLayout: false,
delay: 0 //ms
}, function(res) {
console.log(res);
that.anim();
})
},
<image ref='test' src="../../static/livePush/load.png" mode="aspectFill" class="load"></image>
两种都没有效果，马上自闭了
7 个回复
ang_y
大佬，问题解决了吗？
1***@qq.com - 你可愿与我再并肩
bindingX了解一下
林达斯 - 林达斯
我都是用css控制的，添加类删除类
谭小谭
能一直旋转吗
2021-11-29 17:07
9***@qq.com - 搞钱要紧
解决了吗
我也想在nvue 上实现一直旋转的效果
3***@qq.com
官方文档，nvue不支持
乔小猿
如何实现呀，找了半天没找到
1***@163.com - 大家好
思路：通过transition过渡transform旋转多圈实现一直旋转效果
1.定义两个全局变量beganRotate:false
setTimeout(()=>{
this.beganRotate = true
},500)
参考：
<view class="inner-icon" :class="{'inner-icon-rotate':beganRotate}" v-if="status=='loading'"></view>
data() {
return {
},
methods: {
loading(){
this.status='loading'
setTimeout(()=>{
this.beganRotate = true
},500)
}
}
.inner-icon {
width: 24rpx;
height: 24rpx;
border-radius: 50%;
border: 4rpx solid;
border-color: rgb(228, 228, 228) rgb(228, 228, 228) rgb(228, 228, 228) rgb(183, 183, 183);
margin-right: 4rpx;
transition-property: transform;
transition-duration: 10s;
transition-timing-function: linear;
}