微信小程序动画(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 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
Angular的MVC和作用域
Dec 26 Javascript
谈谈JS中的!!
Dec 07 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 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中iconv函数使用方法
2008/05/24 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
实例讲解php实现多线程
2019/01/27 PHP
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
javascript每日必学之多态
2016/02/23 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python算术运算符实例详解
2017/05/31 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
包装类的功能、种类、常用方法
2012/01/27 面试题
养成教育经验材料
2014/05/26 职场文书
委托书的写法
2014/08/30 职场文书
法人委托书范本格式
2014/09/15 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
python办公自动化之excel的操作
2021/05/23 Python
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android