微信小程序开发之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 相关文章推荐
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
Vue声明式渲染详解
May 17 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
vue 解决异步数据更新问题
Oct 29 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
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
php数组添加元素方法小结
2014/12/20 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
Python re模块介绍
2014/11/30 Python
深入理解python函数递归和生成器
2016/06/06 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
详解Scrapy Redis入门实战
2020/11/18 Python
迪奥美国官网:Dior美国
2019/12/07 全球购物
企划主管岗位职责
2013/12/12 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
订货会主持词
2015/07/01 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL