微信小程序开发之animation循环动画实现的让云朵飘效果


Posted in Javascript onJuly 14, 2017

本文实例讲述了微信小程序开发之animation循环动画实现的让云朵飘效果。分享给大家供大家参考,具体如下:

微信小程序提供了实现动画的api——animation,但却不能循环播放,都是一次性的,动完就Over了,下面提供一个用微信小程序的animation来实现循环动画的玩具,抛砖引玉,希望大家能想出更好的方法来实现真正的循环。说是玩具是因为这个循环动画通过js脚本的setInterval来实现的,但'setInterval'在实际运行中会出现越来越严重的延迟,这是由于js的单线程运行模式所决定的(具体可以搜本关资料看),所以动画间隙并不是那么流畅,所以先玩玩吧,让我们来实现让云朵飘……

截图如下:

微信小程序开发之animation循环动画实现的让云朵飘效果

实现代码:

index.wxml

<view class="clouds">
   <image animation="{{animationCloudData}}" class="yun1" src="../../img/yun1.png"></image>
  </view>

index.js

onReady: function () {
  // 页面渲染完成
  // 实例化一个动画
  var that = this;
  var i = 0
  var ii = 0
  var animationData = wx.createAnimation({
   duration: 1000, // 默认为400   动画持续时间,单位ms
   timingFunction: 'ease-in-out',
   //transformOrigin: '4px 91px'
  });
  var animationCloudData = wx.createAnimation({
   duration: 1000, // 默认为400   动画持续时间,单位ms
   timingFunction: 'ease-in-out',
   //transformOrigin: '4px 91px'
  });
  // 顺序执行,当已经执行完上面的代码就会开启定时器
  // 循环执行代码
  //dotAnFun = setInterval(function () {});  
  /*setInterval(function () {
   // 动画脚本定义
   //animationData.rotate(6 * (++i)).step()
   //animationData.scale(2, 2).rotate(45).step().scale(1, 1).step();
   animationData.translateY(10).step({ duration: 500 }).translateY(-10).step({ duration: 500 });
   // 更新数据
   that.setData({
    // 导出动画示例
    animationData: animationData.export(),
    //animationCloudData: animationCloudData.export(),    
   })
   ++i;
   console.log(i);
  }.bind(that), 2000);//循环时间 这里1000是1秒
  */
  //动画的脚本定义必须每次都重新生成,不能放在循环外
  animationCloudData.translateX(200).step({ duration: 5000 }).translateX(0).step({ duration: 5000 });
  // 更新数据
  that.setData({
   // 导出动画示例
   //animationData: animationData.export(),
   animationCloudData: animationCloudData.export(),
  })
  setInterval(function () {
   //动画的脚本定义必须每次都重新生成,不能放在循环外
   animationCloudData.translateX(300).step({ duration: 5000 }).translateX(-100).step({ duration: 5000 });
   // 更新数据
   that.setData({
    // 导出动画示例
    //animationData: animationData.export(),
    animationCloudData: animationCloudData.export(),
   })
   ++ii;
   console.log(ii);
  }.bind(that),10000);//3000这里的设置如果小于动画step的持续时间的话会导致执行一半后出错
}

index.wxss

.clouds{
 margin-top:320rpx; 
}
.yun1{
 width:320rpx;
 height: 120rpx;
}

附:参考备用:

/*
  var that = this;
  // 页面渲染完成
  //实例化一个动画
  var animation = wx.createAnimation({
   duration: 1000,
   timingFunction: 'ease',
  })
  this.animation = animation
  animation.scale(2, 2).rotate(45).step().scale(1,1).step();
  //导出动画
  this.setData({
   animationData: animation.export()
  })
  var i = 0;
  // 顺序执行,当已经执行完上面的代码就会开启定时器
  /*setTimeout(function () {
   that.setData({
    animationData: animation.export()
   });
   i++;
   console.log(i);
  }, 1000);*/
  /*setInterval(function () {
   //循环执行代码 
    that.setData({
     animationData: animation.export()
    });
   i++;
   console.log(i); 
  }, 1000) //循环时间 这里是1秒  
 }*/

更多关于JavaScript

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
Jquery中map函数的用法
Jun 03 Javascript
Highcharts入门之简介
Aug 02 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 #Javascript
vue component组件使用方法详解
Jul 14 #Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 #Javascript
Vue filters过滤器的使用方法
Jul 14 #Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 #Javascript
Vue computed计算属性的使用方法
Jul 14 #Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 #Javascript
You might like
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
python主线程捕获子线程的方法
2018/06/17 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
python实现名片管理系统项目
2019/04/26 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
中科软笔试题和面试题
2014/10/07 面试题
机械设计制造专业个人求职信
2013/09/25 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
党课培训心得体会
2014/09/02 职场文书
投标单位介绍信
2015/05/05 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
关于Vue中的options选项
2022/03/22 Vue.js
js作用域及作用域链工作引擎
2022/07/07 Javascript