微信小程序动画(Animation)的实现及执行步骤


Posted in Javascript onOctober 28, 2018

简单总结一下微信动画的实现及执行步骤。

一、实现方式

官方文档是这样说的:①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

因为小程序是数据驱动的,给这句话加上数字标注分为三步:

微信小程序动画(Animation)的实现及执行步骤

前两步是定义一个动画并设置都要干什么,然后把这个设置好的“规则”扔给界面上的某个元素,让它按照这个规则执行。

当然如果有多个元素的animation="{{ani}}",也都会执行这个动画规则。

二、用例子说话

新建一个小程序,把没用的删掉修改一下,做个简单例子,上图

微信小程序动画(Animation)的实现及执行步骤

代码如下:

index.wxml,一个helloworld,一个按钮

<view class="container">
 <view class="usermotto" animation="{{ani}}">
  <text class="user-motto">{{motto}}</text>
 </view>
 <button bindtap='start'>动画</button>
</view>

index.wxss, 为了看着方便加了个边框

.usermotto {
 margin-top: 100px;
 border: solid;
}

index.js

Page({
 data: {
  motto: 'Hello World',
 },
 start:function(){
  var animation = wx.createAnimation({
   duration: 4000,
   timingFunction: 'ease',
   delay: 1000
  });
  animation.opacity(0.2).translate(100, -100).step()
  this.setData({
   ani: animation.export()
  })
 }
})

 三、相关参数及方法

简单介绍一下例子中的几个参数和方法(其他的详见官方文档):

      duration: 动画持续多少毫秒
      timingFunction: “运动”的方式,例子中的 'ease'代表动画以低速开始,然后加快,在结束前变慢 
      delay: 多久后动画开始运行

      opacity(0.2) 慢慢变透明

      translate(100, -100) 向X轴移动100的同时向Y轴移动-100

      step(): 一组动画完成,例如想让上例中的HelloWorld向右上方移动并变透明后,再次向左移动50可以继续写 animation.translateX( -50).step() , 作用就是向右上方移动和变透明是同时进行, 这两种变化完成之后才会进行向左运行的一步。

例子:Github

总结

以上所述是小编给大家介绍的微信小程序动画(Animation)的实现及执行步骤,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
浅谈JS的二进制家族
May 09 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 #Javascript
javascript中函数的写法实例代码详解
Oct 28 #Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 #Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 #Javascript
vue中使用protobuf的过程记录
Oct 26 #Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 #Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 #Javascript
You might like
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
PHP实现小偷程序实例
2016/10/31 PHP
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
JS跨域问题详解
2014/11/25 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
详解JavaScript的变量
2019/04/04 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Django中URL的参数传递的实现
2019/08/04 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
高级方案规划工程师岗位职责
2013/11/29 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
补充协议书范本
2014/04/23 职场文书
法制宣传月活动总结
2014/04/29 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
企业年检委托书范本
2014/10/14 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
少先队工作总结2015
2015/05/13 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
优秀志愿者感言
2015/08/01 职场文书
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js