微信小程序开发之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 相关文章推荐
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
JS控制输入框内字符串长度
May 21 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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利用事务处理转账问题
2015/04/22 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
python urllib爬取百度云连接的实例代码
2017/06/19 Python
Python3匿名函数用法示例
2018/07/25 Python
python Django 创建应用过程图示详解
2019/07/29 Python
python实现在一个画布上画多个子图
2020/01/19 Python
浅析Python 序列化与反序列化
2020/08/05 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
特步官方商城:Xtep
2017/03/21 全球购物
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
给导游的表扬信
2014/01/10 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
董事长秘书工作职责
2014/06/10 职场文书
教师辞职书范文
2015/02/26 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
mysql sock文件存储了什么信息
2022/07/15 MySQL