TweenMax的学习

TweenMax的介绍

• 一般情况下我们使用jquery必须使用animate,然后后面接回调函数才能操作动画。
• 它最大的弊端就是操作不了时间。不方便。比如我就想要运动过程中在第三秒输出一句话，他很难实现.
• 所以这个时候TweenMax诞生了。他完美的解决了这个问题
• TweenMax在使用的时候他必须要首先调用jquery 否则他实现不了

TweenMax使用介绍

• 在使用之前无论如何都必须要创建一个对象,所有的方法都是围绕这个对象进行

var move = new TimelineMax(); //创建对象

• move.to(argument1,argument2,argument3,argument4)
• to方法就是绑定动画效果,他一共接受4个参数
• 第一个参数: 元素名称例如 "#nav"表示绑定的是id是nav的元素
• 第二个参数: 动画的时间 表示 执行一个动画要多久
• 第三个参数: 表示要改变的属性。注意他只能是对象,并且值里面不加单位
  • 例如{"left":300,"width":200}
  • 这里要特别注意的就是onComplete:function(){}表示的是动画完成后要执行的方法
  • onReverseComplete:function(){} //表示动画反转完成后要执行的方法
  • ease:Bounce.easeIn, //表示运动的形式。(了解就好)
  • 完整版本的:

  t.to("#div1",1,{ease:Bounce.easeIn,left:300,width:300,onComplete:function(){console.log("第一个动画正序结束")},onReverseComplete:function(){console.log("第一个动画倒序结束")}},1);
  

• 第四个参数:表示的就是延迟时间 表示等待的时间
  • 一般情况下他后面接受的是数字，但是你要是想每个动画都需要延迟的话只有 "+=1"或者"-=1"
  • 这里特别注意的就是""引号千万不能少
  • 1表示的就是1S 你要是想500MS可以用 0.5s
• 动画效果见下边

动画效果.gif

对应的代码

to方法就到这了

---

播放与停止与反转

• move.play();表示动画的播放
• move.stop(); 表示动画的停止,一上来用一次这样动画不会自己播放
• move.reverse(); //表示动画的反转。意思就是从后向前执行
• 效果图如下:

运动效果1.gif

---

插入状态和状态查询

• move.add(arguments1) //参数可以是字符串,也可以是要执行的函数。。不过一般都是字符串.
• move.tweenTo(arguments1) //参数可以使字符串。也可以是时间
• move.seek(argument1) //等价于 tweenTo,只不过没有过渡了，直接切断.
• move.clear(); //清除所有的动画
• move.time(); //获取到时间

---

状态查询

• move.getLabelTime(arguments1) //获取到从开始到当前状态的时间,参数就是一个状态,返回值就是时间
• move.getLabelBefore(arguments) //获取上一个状态，传递的是一个时间数字，返回值是状态的字符串，如果没有则返回下一个状态返回null
• move.getLabelAfter(arguments)//同上只不过获取到的是下一个状态
• move.currentLabel():获取当前状态 返回值是状态的字符串

---

动画的时间

• move.time() //每一帧动画的时间
• move.totalDuration() //获取动画的时长

以上就掌握到这里