微信小程序 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 相关文章推荐
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
jQuery实现文档树效果
Feb 20 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 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
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
linux下编译安装memcached服务
2014/08/03 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
JavaScript运算符小结
2015/06/03 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
jquery选择器简述
2015/08/31 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
大学军训通讯稿
2014/01/13 职场文书
先进个人事迹材料
2014/01/25 职场文书
公司晚会策划方案
2014/05/17 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
培养联系人考察意见
2015/06/01 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
超市主管竞聘书
2015/09/15 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python