微信小程序动画(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高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 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实现下载功能的代码
2012/09/29 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Python实现常见的回文字符串算法
2018/11/14 Python
python爬取内容存入Excel实例
2019/02/20 Python
python add_argument()用法解析
2020/01/29 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
测量实习生自我鉴定
2013/09/19 职场文书
应用心理学个人求职信范文
2013/12/11 职场文书
自我评价个人范文
2013/12/16 职场文书
端午节活动策划方案
2014/03/09 职场文书