微信小程序 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 相关文章推荐
jquery 注意事项与常用语法小结
Jun 07 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
layui导航栏实现代码
May 19 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 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
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
php字符串分割函数用法实例
2015/03/17 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
jQuery鼠标事件总结
2016/10/13 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
Vue 图片压缩并上传至服务器功能
2020/01/15 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
python 自动重连wifi windows的方法
2018/12/18 Python
python 格式化输出百分号的方法
2019/01/20 Python
Python使用贪婪算法解决问题
2019/10/22 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
资产经营总监岗位职责
2013/12/04 职场文书
事业单位公务员的职业生涯规划
2014/01/15 职场文书
中学生励志演讲稿
2014/04/26 职场文书
环保建议书作文400字
2015/09/14 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
TypeScript 内置高级类型编程示例
2022/09/23 Javascript