GSAP Tweenlite 补间不会缓和

Question

我正在使用 GSAP 构建动画横幅，基本动画效果很好，但补间不会缓动，并且在添加更多缓动语句（如弹跳）时将完全停止运行。

我正在使用这段代码来制作所有东西的动画。

 <script type="text/javascript" src="js/TweenLite.min.js"></script>
 <script type="text/javascript" src="js/CSSPlugin.min.js"></script>
    <script>
        window.onload = function(){
            var logo = document.getElementById("logo");

            TweenLite.to("#logo", 1, {left:"90px"});
            TweenLite.from("#container", 0.50, {left:"-400px",opacity:0,delay:1});
            TweenLite.from("#control", 1, {scale:0,opacity:0,delay:2});
            TweenLite.from("#cta", 0.15, {scale:0,opacity:0,delay:3.5,ease: Bounce.easeOut,});
        }
    </script>

我错过了什么吗？真让我沮丧。

Answer 1

我看到两个问题：

1) 你的ease后面多了一个逗号:

//BAD:
TweenLite.from("#cta", 0.15, {scale:0,opacity:0,delay:3.5,ease: Bounce.easeOut,});

//GOOD: 
TweenLite.from("#cta", 0.15, {scale:0,opacity:0,delay:3.5,ease: Bounce.easeOut});

2) Bounce ease 不在核心 TweenLite 文件中 - 您需要加载 EasePack 或仅加载 TweenMax（其中包括 TweenLite、CSSPlugin、EasePack 和许多其他内容）。如果您担心文件大小，这应该不是问题，因为 TweenMax 已列入每个主要广告网络的白名单（这意味着它的文件大小是免费的），而且它可能是网络广告中缓存最广泛的文件。

小提示：如果您还没有尝试过 TimelineLite 或 TimelineMax 工具（也是 GSAP 的一部分），您会爱上它们，尤其是在广告方面。它们会让您更轻松地管理您的时间和实验，并在您工作时跳到动画的不同部分。您的代码也可以更简洁：

window.onload = function(){
    var tl = new TimelineLite();
    tl.to("#logo", 1, {left:90})
      .from("#container", 0.5, {left:-400, opacity:0})
      .from("#control", 1, {scale:0, opacity:0}, "+=0.5")
      .from("#cta", 0.15, {scale:0, opacity:0, ease: Bounce.easeOut}, "+=1.5");
}

现在您可以调整任何单个动画的时间，并且更改会级联到其余部分。就像您需要将第一个补间延长 0.5 秒一样，您不必再编辑后续补间的所有 "delay" 值。另外，现在您已经有了一个 TimelineLite 对象，您可以使用 pause()、seek()、reverse()、timeScale() 或任何您想要的对象。它将为您开启全新的工作流程可能性。

您可能会感兴趣： https://greensock.com/position-parameter https://greensock.com/sequence-video

另外请记住，https://greensock.com/forums 的论坛中有一个很棒的社区，致力于帮助解决特定于 GSAP 的问题。

补间快乐！

GSAP Tweenlite 补间不会缓和

GSAP Tweenlite tweens will not ease

animation

gsap