Javascript 使用Greensock吐温在不同物品和不同时间褪色

我对GSAP非常陌生，我觉得它太棒了。然而，我无法解决如何分别淡入这些项目

第一个（这很好）表示第二个希望在某个时间淡入，第三个希望在某个时间淡入

JavaScript:

function startFinalAnimation(){
    var fa = new TimelineLite();
    fa.to(finalAvatar, 2, {scale: 0.45, delay: 0, opacity: 1, transformOrigin:"-3% 8.8%"});
    fa.to(finalContent, 4, {delay: 0, opacity: 1});
    fa.to(logo, 5, {delay: 0, opacity: 1});
}

的方法语法如下：

timeline.to(target, duration, vars, position);

第四个

position

参数可用于精确定位您希望孩子出现的位置。例如，您可以：

function startFinalAnimation(){
    var fa = new TimelineLite();
    fa.to(finalAvatar, 2, { scale: 0.45, opacity: 1, transformOrigin:"-3% 8.8%" });
    fa.to(finalContent, 4, { opacity: 1 }, '-=1');
    fa.to(logo, 5, { opacity: 1 }, '-=2');
}

这里，

-=1

（和

-=2

）基本上告诉我们，动画应该以

1

秒的重叠时间添加到上一个动画的结尾，而不是默认情况下添加到上一个动画的结尾

提供

位置的方法有很多种。上面，我使用了
-=
。其他选项包括（从下面提供的链接中获取）：


在绝对时间（1）
相对于允许间隙（“+=1”）或重叠（“-=1”）的时间线末尾
在标签上（“someLabel”）
相对于标签（“someLabel+=1”）

阅读更多关于
position
参数的信息：。
您可以为每个动画添加名称并设置延迟上限，我建议您观看他们的视频示例-它似乎不起作用，只是所有操作都同时发生。您可以准备一个快速小提琴吗？您需要先设置初始变量，在到达目标变量之前
TimeLineSite
的方法可以帮助您解决这一问题。解决同样问题的另一种方法是：首先设置值：。您可能想分享您的全部内容：）