nvue页面如何实现旋转动画

分类：uni-app

uniapp nvue 动画

方法一
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();
})
},

两种都没有效果，马上自闭了

2020-06-12 15:43 负责人:无分享

7 个回复

1***@163.com - 大家好

思路：通过transition过渡transform旋转多圈实现一直旋转效果
1.定义两个全局变量beganRotate:false

旋转时修改beganRotate值为true，注意当你的元素显示就需要旋转时应该给一个延时才能过渡
setTimeout(()=>{
this.beganRotate = true
},500)

参考：

data() {
return {

        status: 'loadmore',  
        beganRotate:false  
    }

},
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;
}

            .inner-icon-rotate {  
                transform: rotate(3600deg);  
            }

2***@qq.com

妙哉妙哉

2024-12-28 15:09

ang_y

大佬，问题解决了吗？

1***@qq.com - 你可愿与我再并肩

bindingX了解一下

林达斯 - 林达斯

我都是用css控制的，添加类删除类

谭小谭

能一直旋转吗

2021-11-29 17:07

9***@qq.com - 搞钱要紧

解决了吗
我也想在nvue 上实现一直旋转的效果

3***@qq.com

官方文档，nvue不支持

乔小猿

如何实现呀，找了半天没找到

要回复问题请先登录或注册

nvue页面如何实现旋转动画

7 个回复

公告

相关问题

nvue页面如何实现旋转动画

与内容相关的链接

7 个回复

公告

相关问题