欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序 Animation实现图片旋转动画示例

程序员文章站 2022-06-20 13:34:20
最近小程序中有一个图片旋转的需求,最初是想着通过切换多张图片达到旋转的效果,后来发现微信小程序带有动画api,然后就改由image+animation来实现。 首先在wx...

最近小程序中有一个图片旋转的需求,最初是想着通过切换多张图片达到旋转的效果,后来发现微信小程序带有动画api,然后就改由image+animation来实现。

首先在wxml中定义image

<image class="bth_image2" mode="aspectfit" animation="{{animation}}" src='../../images/***.png'></image>

注意其中的animation属性,image就由它来实现动画。

而{{animation}}我们在js的data中定义

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()
    })
   },

相关代码

var _animation;
var _animationindex
const _animation_time = 500;
pages {
...
 onshow: function () {
  _animation = wx.createanimation({
   duration: _animation_time,
   timingfunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
   delay: 0,
   transformorigin: '50% 50% 0'
})
},

/**
 * 实现image旋转动画,每次旋转 120*n度
 */
 rotateani: function (n) {
  _animation.rotate(120 * (n)).step()
this.setdata({
   animation: _animation.export()
})
},

/**
 * 开始旋转
 */
 startanimationinterval: function () {
var that = this;
  that.rotateani(++_loadimagepathindex); // 进行一次旋转
  _animationintervalid = setinterval(function () {
   that.rotateani(++_loadimagepathindex);
}, _animation_time); // 没间隔_animation_time进行一次旋转
},

/**
 * 停止旋转
 */
 stopanimationinterval: function () {
if (_animationintervalid> 0) {
   clearinterval(_animationintervalid);
   _animationintervalid = 0;
}
},
}

微信自带的animation可以实现一次动画,然后可以通过setinterval来达到不断旋转的目的,在使用时,控制startanimationinterval和stopanimationinterval即可。

注意:

这里为什么不直接给_animation.rotate(120 * (n)).step()设置一个足够大的值,原因有两点:

1、我们需要便利的控制开始和停止,

2、animation在小程序进入后台后,会持续运行,占用手机内存和cpu,而小程序依赖于微信,在iphone上会导致微信被终止运行

在使用animation时,会发现有时候出现旋转速度很快或者反向旋转再正向旋转的清空,这都是由于rotate的值设置有问题。

1、rotate的值应该是上一次结束时的值,
2、如果设置了全局变量,记得在oncreate时初始化,不然第二次打开同一页面会有问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。