微信小程序 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 相关文章推荐
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
js loading加载效果实现代码
Nov 24 Javascript
有关DOM元素与事件的3个谜题
Nov 11 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
JS实现可视化文件上传
Sep 08 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
JavaScript隐式类型转换代码实例
May 29 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 mongodb扩展时 需要注意的事项
2013/06/18 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
百度留言本js 大家可以参考下
2009/10/13 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
js实现微信聊天效果
2020/08/09 Javascript
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python解析最简单的验证码
2016/01/07 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
Python如何实现单例模式
2016/06/03 面试题
企业项目策划书
2014/01/11 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
热情服务标语
2014/10/07 职场文书
财务务虚会发言材料
2014/10/20 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python