微信小程序动画(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 相关文章推荐
Angular中的Promise对象($q介绍)
Mar 03 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
详解vue 图片上传功能
Apr 30 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
react ant Design手动设置表单的值操作
Oct 31 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
php mysql数据库操作分页类
2008/06/04 PHP
php对称加密算法示例
2014/05/07 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
Python中的函数作用域
2018/05/07 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
python实现自动化上线脚本的示例
2019/07/01 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
企业治理工作自我评价
2013/09/26 职场文书
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
中专生毕业自我鉴定
2013/11/01 职场文书
物流司机岗位职责
2013/12/28 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
党性心得体会
2014/09/03 职场文书
医院营销工作计划
2015/01/16 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python