微信小程序动画(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 相关文章推荐
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
JavaScript的==运算详解
Jul 20 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
js实现页面导航层级指示效果
Aug 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
C#静态方法与非静态方法实例分析
2014/09/22 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
vue实现循环切换动画
2018/10/17 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python操作MySQL数据库具体方法
2013/10/28 Python
Python 自动补全(vim)
2014/11/30 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
关于python3中setup.py小概念解析
2019/08/22 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
区域销售经理岗位职责
2013/12/10 职场文书
经典团队口号大全
2014/06/21 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
深入理解python协程
2021/06/15 Python
python 多态 协议 鸭子类型详解
2021/11/27 Python