GSAP Tweenlite補間不會緩解

我正在用GSAP構建一個動畫橫幅，基本動畫效果很好，但補間並不會緩解，並且在添加進一步緩解語句（如彈跳）時完全停止運行。GSAP Tweenlite補間不會緩解

我使用這段代碼來動畫所有的東西。

<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>

我錯過了什麼嗎？它使我感到沮喪。

來源

2017-03-08 Tjoerie

我看到兩個問題：

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的文件 - 你需要或者負載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秒，則不必編輯後續補間的所有「延遲」值。此外，你現在有一個TimelineLite對象，你可以暫停（），seek（），reverse（），timeScale（）或任何你想要的。它將爲您打開全新的工作流程。

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

還要記住有一個在https://greensock.com/forums在論壇中的一個偉大的社會是專設具有特定GSAP-問題幫助。

快樂補間！

來源

2017-03-09 06:00:53 Jack

非常有幫助！謝謝！我會盡快嘗試一下，我也會檢查Greensock網站。非常感謝您的積極迴應，我立即熱衷於GSAP！ – Tjoerie

工程就像一個魅力！謝謝一堆！ – Tjoerie

GSAP Tweenlite補間不會緩解

回答

相關問題