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动画预览