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）在你轻松之后还有一个额外的逗号：

//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）核心TweenLite文件中的Bounce轻松不是 - 你需要加载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秒一样，你不必再编辑所有的＆＃34;延迟＆＃34;后续补间的值。此外，您现在有一个TimelineLite对象，您可以暂停（），搜索（），反向（），timeScale（）或任何您想要的对象。它将为您打开全新的工作流程。

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

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

快乐的补间！

GSAP Tweenlite补间无法轻松

1 个答案: