用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:35

作者:ForeverGuard,来自原文地址 本文相关跳坑指南:一、.js中封装旋转动画方法添加animation属性 data:{ animation:''" }改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会 ...

作者:ForeverGuard,来自

原文地址


本文相关跳坑指南:

一、.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. class="show-iconView">
  2. src="{{src}}" class="show-iconImage" animation="{{animation}}" mode="scaleToFill">

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

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

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏