PC端页面 + TweenMax实战应用

TweenMax在PC端实战应用

欢迎学习 TweenMax在PC端实战应用 我们这套课程，完全是为了更好的理解TweenMax如何实现动画才创建的，希望可以给大家有多一点的启发。

1. 计算算法与常用语法总结

var t = new TimelineMax()

t.to(选择器,持续时间,{具体动画1,具体动画2...},延迟时间)

多个动画如何计算延迟时间，用上一行的动画用持续时间+延迟时间，作为基数然后就可以算出下一个动画应该延迟几秒了，比如：

 t.to('#box',1,{left:100},1)
 t.to('#box',2,{width:90},3) //延迟1秒
 t.to('#box',2,{height:90},6) //延迟1秒

上面的公式有一些不动态，如果改了一个时间，下面的都需要修改，维护很麻烦，如何去解决呢？

t.to('#box',1,{left:100},1)
t.to('#box',2,{width:90},"+=1")
t.to('#box',2,{height:90},"+=1")
//+=1的意思就是，不管上面你加多少秒，我都在原有基础上加上1秒

意思跟上面是一样的，都是加入延迟一秒，区别是动态和写死的区别

2. 小案例1，进入状态

大家可以发现动画是依次执行
========================================
<script src="TweenMax.min.js"></script>
========================================
<style>
  #box{position: absolute; width: 30px; height: 30px; background: #ccc;}
</style>
========================================
<div id="box"></div>
========================================
var t = new TimelineMax();
t.to('#box',1,{left:100})
t.to('#box',2,{width:90})
t.to('#box',2,{height:90})
t.to('#box',2,{top:200})
t.to('#box',2,{rotationZ:180})
t.to('#box',2,{opacity:0})

gif动画预览