1.安装插件
<script src="TweenMax.min.js"></script>
let t = new TimelineMax();
2.运动方式
| 语法 | 解释 |
|---|---|
| to | 到哪里 |
| from | 设置终点位置，往回运动 |
| fromTo | 从设置好的开始位置，移动到设置好的结束位置 |
t.to("#box",2,{x:400})
t.from("#box",2,{x:400})
t.fromTo("#box",2,{x:400},{x:600})
3.运动属性
| 语法 | 解释 |
|---|---|
| width | 宽度 |
| height | 高度 |
| left | 左 |
| right | 右 |
| autoAlpha、opacity | 透明度 |
| x、y | 位移 |
| scale、scaleX、scaleY | 缩放 |
| rotation、rotationX、rotationY、rotationZ | 旋转 |
| skewX、skewY | 斜切 |
4.运动效果ease
| 语法 | 解释 |
|---|---|
| Linear | 线性变化 |
| Back | 高度 |
| Bounce | 弹跳变化 |
| Circ | 圆形变化 |
| Cubic | 立方体变化 |
| Elastic | 橡皮圈变化 |
| Expo | 爆炸变化 |
| Quad | 变化 |
| Quint | 变化 |
| Sine | 正弦变化 |
语法：t.to("元素",动画时长,{操作动画},延迟多长时间)
如何应用如下：
t.to("#box",2,{
x:400
ease:Linear.easeIn //easeOut,easeInOut
})
5.两个元素运动
动效演示gif： flash时间轴
t.to("#box1",1,{x:400})
t.to("#box2",1,{x:400})
动态图：
动效演示gif： flash时间轴
t.to("#box1",1,{x:400})
==================================
下面两行是等价的
t.to("#box2",1,{x:400},5)加入延迟
t.to("#box2",1,{x:400,delay:5})加入延迟
动效演示gif： flash时间轴
t.to("#box1",1,{x:400})
t.to("#box2",1,{x:400},'-=0.5')在原有的基础上减去一半
=====================================================
也可以把最后一个t去掉，变成链式操作
t.to("#box1",1,{x:400})
.to("#box2",1,{x:400},'-=0.5')
6.多个元素运动，同时运动
动效演示gif： flash时间轴
t.staggerTo("div",1,{x:400}) // 这句话同理 t.staggerFrom("div",1,{x:400})
动态图展示：
t.staggerTo("div",1,{
cycle:{
x:[100,200,300] //按照100,200,300，100,200,300的顺序运动
}
},1)
动效演示gif：
t.staggerTo("div",1,{
cycle:{
x:function(i){
//i为每个元素的索引
return i*30
}
}
},1)
动效演示gif：
t.staggerTo("div",1,{
cycle:{
x:function(i){
if(i<5){
return 100
}else{
return 300
}
}
}
},1)
7.曲线运动bezier
动效演示gif：
t.staggerTo("#box","2",{
cycle:{
bezier:function(){
return [
{x:0,y:0},//起点
{x:200,y:200},//途径点
{x:400,y:0},//终点
{x:200,y:200},
{x:0,y:0}
]
}
}
})
8.回调函数
var t = new TimelineMax();
t.to("#box","2",{
x:100,
onstart:function(){
console.log('onstart')
},
onUpdate:function(){
console.log('onUpdate')
},
onComplete:function(){
console.log('onComplete')
}
})
9.当完成时利用onComplete函数，改变当前this.target的背景色
var t = new TimelineMax();
t.to("#box","2",{
x:100,
onstart:function(){
console.log('onstart')
},
onUpdate:function(){
console.log('onUpdate')
},
onComplete:function(){
console.log('onComplete')
}
})
10.如何实现3D动画
t.set('div',{transformPerspective:300})
t.to("div",1,{
rotationY:45,
},1)
11.改变3D动画原点transformOrigin
t.set('div',{transformPerspective:300,transformOrigin:'left'})
t.to("div",1,{
rotationY:45,
},1)
