微信小程序 animation API详解及实例代码


Posted in Javascript onOctober 08, 2016

动画水还是比较深的,这里只是简单介绍下小程序中动画的一些属性和注意事项,做动画前一定要整理好思路将动画一步步分解,再进行组合!这里只做引入。

wx.createAnimation(object)

看官方介绍

1.创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

2.调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的属性

这还是比较好理解的比如第一条对应代码animation: this.animation.export()
第二条比如缩放动画,也就说是一组scale,scaleX, scaleY…为一缩放动画组的一个动画方法,缩放动画组和旋转动画组通过step()链接,按顺序执行。代码中体验吧!看效果反过来看会更容易理解

主要属性:

微信小程序 animation API详解及实例代码

这里主要树下timingFunction和transformOrigin

timingFunction 设置动画效果

  1. linear 默认为linear 动画一直较为均匀
  2. ease 开始时缓慢中间加速到快结束时减速
  3. ease-in 开始的时候缓慢
  4. ease-in-out 开始和结束时减速
  5. ease-out 结束时减速
  6. step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
  7. step-end 保持 0% 的样式直到动画持续时间结束 一闪而过

transformOrigin 设置动画的基点 默认%50 %50 0

left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%

top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%

动画组及动画方法

样式:

微信小程序 animation API详解及实例代码

旋转:

微信小程序 animation API详解及实例代码

缩放:

微信小程序 animation API详解及实例代码

偏移:

微信小程序 animation API详解及实例代码

倾斜:

微信小程序 animation API详解及实例代码

矩阵变形:

微信小程序 animation API详解及实例代码

演示单个动画组效果

微信小程序 animation API详解及实例代码

wxml

<view class="container">
 <view animation="{{animation}}" class="view">我在做动画</view>
</view>
<button type="primary" bindtap="rotate">旋转</button>

js

Page({
 data:{
  text:"Page animation",
  animation: ''
 },
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
  // 页面渲染完成
  //实例化一个动画
  this.animation = wx.createAnimation({
   // 动画持续时间,单位ms,默认值 400
   duration: 1000, 
   /**
    * http://cubic-bezier.com/#0,0,.58,1 
    * linear 动画一直较为均匀
    * ease  从匀速到加速在到匀速
    * ease-in 缓慢到匀速
    * ease-in-out 从缓慢到匀速再到缓慢
    * 
    * http://www.tuicool.com/articles/neqMVr
    * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
    * step-end  保持 0% 的样式直到动画持续时间结束    一闪而过
    */
   timingFunction: 'linear',
   // 延迟多长时间开始
   delay: 100,
   /**
    * 以什么为基点做动画 效果自己演示
    * left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%
    * top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%
    */
   transformOrigin: 'left top 0',
   success: function(res) {
    console.log(res)
   }
  })
 },

 /**
  * 旋转
  */
 rotate: function() {
  //顺时针旋转10度
  //
  this.animation.rotate(150).step()
  this.setData({
   //输出动画
   animation: this.animation.export()
  })
 },

 onShow:function(){
  // 页面显示
 },
 onHide:function(){
  // 页面隐藏
 },
 onUnload:function(){
  // 页面关闭
 }
})

演示多个动画组效果

微信小程序 animation API详解及实例代码

这里我们只需要更改以下代码即可

  /**
   * 旋转
   */
  rotate: function() {
    //两个动画组 一定要以step()结尾
    /**
     * 动画顺序 顺时针旋转150度>x,y 放大二倍>x,y平移10px>x,y顺时针倾斜>改变样式和设置宽度宽度
     */
    this.animation.rotate(150).step().scale(2).step().translate(10).step().skew(10).step().opacity(0.5).width(10).step({ducation: 8000})
    this.setData({
      //输出动画
      animation: this.animation.export()
    })
  }

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
用js实现计算加载页面所用的时间
Apr 02 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
JavaScript实现select添加option
Jul 03 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 #Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 #Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 #Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 #Javascript
Javascript单例模式的介绍和实例
Oct 08 #Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 #Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 #Javascript
You might like
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
javascript之学会吝啬 精简代码
2010/04/25 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
this关键字的作用
2016/01/30 面试题
车间主管岗位职责
2013/11/14 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
2014年纠风工作总结
2014/12/08 职场文书
追悼会悼词大全
2015/06/23 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android