TweenMax practical application in PC terminal

Welcome to TweenMax on PC. This course was created to better understand how TweenMax works in animation.

1. Summary of calculation algorithm and common syntax

var t = new TimelineMax()

T o(selector, duration,{specific animation 1, specific animation 2… }, delay time)

How to calculate the delay time for multiple animations, the last line of animation uses the duration + delay time as the base and then we can calculate how many seconds the next animation should be delayed, for example:

 t.to('#box',1,{left:100},1)
 t.to('#box',2,{width:90},3) // Delay 1 second.'#box',2,{height:90},6) // Delay 1 secondCopy the code

Some of the above formulas are not dynamic. If the time is changed, all the following ones need to be modified, which is very troublesome to maintain. How to solve it?

t.to('#box',1,{left:100},1)
t.to('#box',2,{width:90},"+ = 1")
t.to('#box',2,{height:90},"+ = 1") //+=1 means that no matter how many seconds you add to the list, I will add 1 second to itCopy the code

Add delay of one second, the difference is dynamic and write dead difference

2. Small case 1, enter the state

You can find animation is executed in sequence = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = < 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})
Copy the code

GIF animation Preview