• 简书网微信公众号二维码
您当前的位置: 首页 > 知识百科 > 微信小程序平移动画怎么开发

微信小程序平移动画怎么开发

时间:2023-07-01 14:05 阅读数:59 人阅读 分类:知识百科

  不同的微信小程序有不同的小程序功能,所以你想要什么样的效果就要找到相应的小程序进行开发,其实整个过程并不是很难,接下来小编为大家讲解一下怎样进行微信小程序平移动画的开发。

  一、.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属*

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

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

  以上就是微信小程序平移动画的开发方式,参照以上流程,你就可以开发出微信动画的小程序了,希望这个教程能够对你有所帮助。更多相关教程请关注微信小程序素材网。

  

  小程序界面怎么设计?如何设计小程序界面?

  微信小程序服务端怎么开发?

  微信小程序怎么链接数据?