微信小程序动画(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 相关文章推荐
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 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和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
Django自定义过滤器定义与用法示例
2018/03/22 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
Java模拟试题
2014/11/10 面试题
团队精神演讲稿
2013/12/31 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
出生公证书样本
2014/04/04 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
Java 死锁解决方案
2022/05/11 Java/Android