微信小程序动画(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 相关文章推荐
js tab效果的实现代码
Dec 26 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
Javascript学习指南
Dec 01 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
微信小程序上传图片实例
May 28 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
ES6 解构赋值的原理及运用
May 25 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实现多级树型菜单
2006/10/09 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
PHP小程序自动提交到自助友情连接
2009/11/24 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
python计算最大优先级队列实例
2013/12/18 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
Python内存管理实例分析
2019/07/10 Python
pytorch 预训练层的使用方法
2019/08/20 Python
Python流程控制 if else实现解析
2019/09/02 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
Python descriptor(描述符)的实现
2020/11/15 Python
进程的查看和调度分别使用什么命令
2015/03/25 面试题
城市规划毕业生求职信
2013/10/10 职场文书
运动会解说词50字
2014/01/18 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
护校行动方案
2014/05/31 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书