使用 Greensock Tween 在不同的项目和不同的时间淡入淡出

Question

我是 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});
}

Answer 1

TimelineLite's .to()方法语法如下：

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 秒的重叠处将动画添加到上一个动画的结尾，而不是默认的在之前添加的动画的最后追加。

可以通过多种方式提供 position。上面，我使用了-=。其他选项是（取自下面提供的link）：

at an absolute time (1).

relative to the end of a timeline allowing for gaps ("+=1") or overlaps ("-=1").

at a label ("someLabel").

relative to a label ("someLabel+=1").

在此处阅读有关 position 参数的更多信息：Timeline Tip: Understanding the Position Parameter。

使用 Greensock Tween 在不同的项目和不同的时间淡入淡出

Fading in different items and different times using Greensock Tween

javascript

gsap