微信小程序动画(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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
非常不错的一个javascript 类
Nov 07 Javascript
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
js密码强度检测
Jan 07 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
JS实现躲避粒子小游戏
Jun 18 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
用header 发送cookie的php代码
2007/03/16 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
详解jQuery事件
2017/01/13 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
js实现移动端轮播图
2020/12/21 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
python中reload重载实例用法
2020/12/15 Python
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
汽车专业求职信
2014/06/05 职场文书
大学生就业求职信
2014/06/12 职场文书
医学生求职自荐书
2014/06/12 职场文书
会计岗位职责
2015/02/03 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL