微信小程序动画(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控件
May 07 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
vue select 获取value和lable操作
Aug 28 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
又拍云 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 地区分类排序算法
2013/07/01 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
CentOS安装pillow报错的解决方法
2016/01/27 Python
Python实现带百分比的进度条
2016/06/28 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
python 显示数组全部元素的方法
2018/04/19 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
应届毕业生的自我鉴定
2013/11/13 职场文书
初中学校对照检查材料
2014/08/19 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP