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


Posted in Javascript onAugust 22, 2018

最近小程序中有一个图片旋转的需求,最初是想着通过切换多张图片达到旋转的效果,后来发现微信小程序带有动画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时初始化,不然第二次打开同一页面会有问题。

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

Javascript 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
Vue动态获取width的方法
Aug 22 #Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 #Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 #Javascript
Vue之mixin全局的用法详解
Aug 22 #Javascript
React中使用UEditor百度富文本的方法
Aug 22 #Javascript
VUE 全局变量的几种实现方式
Aug 22 #Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 #Javascript
You might like
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
php中使用GD库做验证码
2016/03/31 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
django文档学习之applications使用详解
2018/01/29 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
详解Python循环作用域与闭包
2019/03/21 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
Python try except finally资源回收的实现
2021/01/25 Python
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
农民入党思想汇报
2014/01/03 职场文书
新郎父亲婚宴答谢词
2014/01/11 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
利用Redis实现点赞功能的示例代码
2022/06/28 Redis