微信小程序 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进行表单验证实例分析
Feb 10 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
vue实现扫码功能
Jan 17 Javascript
全面解析JavaScript Module模式
Jul 24 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数组应用之比较两个时间的相减排序
2008/08/18 PHP
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
浅析return false的正确使用
2013/11/04 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
详解Python多线程
2016/11/14 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
python3排序的实例方法
2020/10/20 Python
python3访问字典里的值实例方法
2020/11/18 Python
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
Java面向对象面试题
2016/12/26 面试题
成人大专生实习期的自我评价
2013/10/02 职场文书
编辑求职信样本
2013/12/16 职场文书
高二生物教学反思
2014/01/27 职场文书
班级活动策划书
2014/02/06 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
项目经理岗位职责
2015/01/31 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
MySQL数字类型自增的坑
2021/05/07 MySQL
教你一步步实现一个简易promise
2021/11/02 Javascript
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL