微信小程序动画(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 版本]
Mar 20 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
Angularjs过滤器使用详解
May 25 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 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读写文件的方法(生成HTML)
2006/11/27 PHP
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
PHP修改session_id示例代码
2014/01/08 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
python使用cPickle模块序列化实例
2014/09/25 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
树莓派升级python的具体步骤
2020/07/05 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
高二生物教学反思
2014/01/27 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
宾馆客房管理制度
2015/08/06 职场文书