微信小程序 Animation实现图片旋转动画示例
2019/6/27 7:46:16
本文主要是介绍微信小程序 Animation实现图片旋转动画示例,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
最近小程序中有一个图片旋转的需求,最初是想着通过切换多张图片达到旋转的效果,后来发现微信小程序带有动画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时初始化,不然第二次打开同一页面会有问题。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持找一找教程网。
这篇关于微信小程序 Animation实现图片旋转动画示例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist