1.局部或全局引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
2.vue中代码示例
//创建时间轴对象
const tl = new TimelineMax();
//使用api
tl
// Ground
.staggerFrom(
[
"#Capa_1 > g > path:nth-child(1)",
"#Capa_1 > circle:nth-child(7)",
"#Capa_1 > path:nth-child(6)",
"#Capa_1 > circle:nth-child(5)",
],
1,
{
scaleY: 0,
scaleX: 0,
transformOrigin: "center",
ease: Bounce.easeOut,
stagger: 0.2
}
)
.staggerFrom(
[
// "#Capa_1 > path:nth-child(3)", "#Capa_1 > path:nth-child(2)",
"#car1",
"#car2",
],
1,
{ ease: Bounce.easeOut, stagger: 0 ,opacity: 0},
// { scaleX: 0.9,scaleY: 0.9, transformOrigin: "left", ease: Bounce.easeOut, stagger: 0 ,opacity: 0}
)
.staggerFrom(
[
"#arrow1",
".arrowHead1",
"#arrow2",
".arrowHead2",
"#arrow3",
".arrowHead3",
"#arrow4",
".arrowHead4",
"#arrow5",
".arrowHead5",
],
3,
{ ease: Bounce.easeOut, stagger: 0.2 ,opacity: 0},
// { scaleX: 0.6,scaleY: 1, transformOrigin: "left", ease: Bounce.easeOut, stagger: 0.3 ,stroke: "#00e5f7"}
)
// .from("#Capa_1 > path:nth-child(4)", 1, {
// scaleY: 0,
// transformOrigin: "bottom",
// ease: Bounce.easeOut
// })
在本示例中，sraggerFrom()接受一个含有element选择器的array作为第一参数，接受一个数值（代表动画持续时间）作为第二参数，接受一个包含css属性的对象作为第三参数。
对比css3，最好用的是参数1的多项选择器和参数3中的stagger（执行间隔时间）,执行后的动画会按array中选择器顺序执行，并以stagger时间为间隔执行，以制造链式动画效果。
