小程序模板网

微信小程序连续旋转动画this.animation.rotate

作者:ForeverGuard,来自原文地址 
本文相关跳坑指南:跳坑《一百三十四》animation动画相关问题说明

 

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

添加animation属性

 

				
  1. data:{
  2. animation:''"
  3. }

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

 

				
  1. onShow: function() {
  2. console.log('index---------onShow()')
  3. this.animation = wx.createAnimation({
  4. duration: 1400,
  5. timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
  6. delay: 0,
  7. transformOrigin: '50% 50% 0',
  8. success: function(res) {
  9. console.log("res")
  10. }
  11. })
  12. },
  13. rotateAni: function (n) {
  14. console.log("rotate=="+n)
  15. this.animation.rotate(180*(n)).step()
  16. this.setData({
  17. animation: this.animation.export()
  18. })
  19. },
 

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

 

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

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

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



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23508.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询