微信小程序开发之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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
几款极品的javascript压缩混淆工具
May 16 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
如何在Vue中抽离接口配置文件
Oct 31 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 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中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
JS hashMap实例详解
2016/05/26 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
Python实现LRU算法的2种方法
2015/06/24 Python
python实现名片管理系统项目
2019/04/26 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
python web框架中实现原生分页
2019/09/08 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
安全生产汇报材料
2014/02/17 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
民主评议党员个人总结
2015/02/13 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL