TweenMax是一款前端动画插件,可以做出很多效果,灵活性很高,最近闲暇之余学了一下,顺便做点记录。
插件的安装很简单,直接用script引入即可使用:
<script src="./js/TweenMax.min.js"></script>
开始的时候需要初始化一个对象:
var t = new TimelineMax();
to:单个元素,运动到某一点
t.to('.box', 3, { // 3秒时间内移动到绝对位置x=400的地方
left: 400 // 绝对位移
});
还有很多效果可以添加,比如Linear,Back,Bounce,Cire,Cubic,Elastic,Quad,Sine,Quint等,每个效果都有三种进出方式:easeIn、easeOut、easeInOut。
t.to('.box', 3, {
left: 400, // 绝对位移
// ease: Linear.easeIn
// ease: Linear.easeOut
// ease: Linear.easeInOut
// ease: Back.easeIn
// ease: Back.easeOut
// ease: Back.easeInOut
// ease: Bounce.easeIn
// ease: Bounce.easeOut
// ease: Bounce.easeInOut
// ease: Circ.easeIn
// ease: Circ.easeOut
// ease: Circ.easeInOut
// ease: Cubic.easeIn
// ease: Cubic.easeOut
// ease: Cubic.easeInOut
// ease: Elastic.easeIn
// ease: Elastic.eas