微信小程序连续旋转动画（this.animation.rotate）详解_网络技术

微信小程序连续旋转动画（this.animation.rotate）详解

发布时间 - 2026-01-11 00:33:13 点击率：次

微信小程序连续旋转动画

一、.js中封装旋转动画方法

　　添加animation属性

  data:{
    animation:''"
    }

　　改变animation的值（官网提供角度范围是-180~180，但是我发现角度越大会一直旋转）

 onShow: function() {
    console.log('index---------onShow()')
     this.animation = wx.createAnimation({
     duration: 1400,
     timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
     delay: 0,
     transformOrigin: '50% 50% 0',
     success: function(res) {
      console.log("res")
     }
    })
   },
   rotateAni: function (n) {
    console.log("rotate=="+n)
    this.animation.rotate(180*(n)).step()
    this.setData({
     animation: this.animation.export()
    })
   },

二、在.wxml中需要的控件上添加animation属性

 <view class="show-iconView">
   <image src="{{src}}" class="show-iconImage" animation="{{animation}}" mode="scaleToFill"></image>
 </view>

三、连续动画需要添加定时器

　　this.interval = setInterval所传参数每次++i就行！

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# 微信小程序 # 连续旋转动画 # 连续旋转动画实例代码 # 微信小程序动画（Animation）的实现及执行步骤 # 微信小程序 Animation实现图片旋转动画示例 # 微信小程序实现animation动画 # 微信小程序小程序制作及动画（animation样式）详解 # 详解微信小程序动画Animation执行过程 # 就行 # 希望能 # 越大 # 谢谢大家 # 官网 # 所传 # 我发现 # index # wx # log # function # console # createAnimation # linear # ease # timingFunction # duration # brush # data # class

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：已备好域名和空间，创建网站内容需要注意哪些版权问题？

下一篇：Linux目录结构与Windows系统的区别

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：已备好域名和空间，创建网站内容需要注意哪些版权问题？

下一篇：Linux目录结构与Windows系统的区别

微信小程序 连续旋转动画（this.animation.rotate）详解

微信小程序连续旋转动画（this.animation.rotate）详解