TimelineMax：Tweening簡介

“tweens an array of targets to a common set of destination values.

在這里這組對象指的是SVG標簽內的所有圓。

• staggerTo 的第一個參數接受的是我們圓的選擇器（在這里， circle ）。
• 第二個參數是Tweening動畫的持續時間（整個動畫的持續時間）。
• 第三個參數是包含補間動畫屬性配置的對象字面量。
• 最后一個參數用于保存我們的 stagger 值（每個對象各自的動畫開始之間的時間）。
</ul>

也就是說，假設 circles 元素包含了三個對象：

timeline.staggerTo(circles, 15, {x:0}, 0.2)

// circle 1 在0s開始
// circle 2 在0.2s開始
// circle 3 在0.4s開始 </pre> 
loader設置 

在開始前，我們需要定義一個新的時間軸，以及設置一些配置。 

var loader = new TimelineMax({ repeat: -1, yoyo: true }),
    circles = $('svg circle'),
    stagger_options = {
      opacity: 0,
      y: -800,
      ease: Elastic.easeInOut
    }; 
 
為了使得這個時間軸在相反的方向重復，我使用了 yoyo ，并把它的值設置為 true 。所以，這可以使得我們的動畫在到達最后一幀之后，就反向再次播放。觸發動畫需要先獲取SVG中的每個圓，這也是為什么我們需要jQuery幫助來引用對象。 

文檔中指出了很多傳遞選擇器的方法（可以點擊 這里 閱讀更多相關內容）。在這里我使用了jQuery的典型選擇器語法來選中所有的圓。這里把我們的引用保存在一個對象中，方便后邊重用，因此 circles = $('svg circle') 。 

stagger_options 變量是一個對象字面量，包含了所有讓這個動畫動起來的屬性。我們使用 y 來移動對象，因為GSAP CSSPlugin 智能地把 transform 值轉換成等價 matrix ，最終為我們提升了速度。還有一列 transform 屬性簡寫的列表，，相比CSS transform 更優越也更容易使用： 

GSAP對應CSS屬性 


</tr>
</thead> 

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>
</tbody>
</table>
我們還可以控制 easing （動畫的播放速度），然后產生不同的運動類型。對于視覺愛好者，你可以查看GreenSock提供的 ease函數可視化文檔 ，獲取更多對ease變量的理解。 
 
這個動畫的最后一部分是把 staggerTo 方法賦給我們的時間軸，然后插入前面定義的變量，并按照正確的序列放置（元素，持續時間，選項， stagger 的值）。 
loader.staggerTo(circles, 0.875, stagger_options, 0.025); 
鏈上第二個Tween 
在 stagger 序列完成之后，如果你還想創建另一個序列，你可以鏈上另一個方法，例如 fromTo 這樣： 
loader.staggerTo(circles, 0.875, stagger_options, 0.025)
      .fromTo(target: Object, duration: Number, fromVars:{}, toVars: {}); 
進一步講解 
我們可以嘗試一下用在SVG上，也就是我說的“Polyman”。最近我在CSS-Tricks寫了一篇 文章 ，關于操縱多邊形動畫的（w3cplus的譯文），然后決定在這里使用相同的示例做另一個補間練習。我們嘗試使用了 staggerFromTo() 方法，然后看看我們將創建出什么魔術。 
為了方便討論，下面的SVG輸出略有刪減，但你會看到我們的SVG包含了一些標簽；特別是 <g> 和 <path> 。還要注意路徑把人物臉上的不同器官分成了多組，以便更好地控制stagger（例如，耳朵、眼睛、鼻子……） 
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 800 800" class="polyman">
  <g id="ears">
    <path fill="#E6BBBE" d="M346.5,344.2l-2.8-3.4l4.1-18.5L346.5,344.2z"></path>
    <path fill="#EAD9DD" d="M344,332.5l-0.3,8.3l4.1-18.5L344,332.5z"></path>
    <path fill="#EEDFE3" d="M346,307.1l1.8,15.2l0.4-22.1L346,307.1z"></path>
  </g>
  <!-- and so on -->
</svg> 
在時間軸的初始化設置中我們使用一個對象字面量定義了我們的全局選項，設置了初始動畫的延遲，重復動畫序列，重復動畫的延遲，以及反向播放動畫。 
var tmax_options = {
  delay: 0.25,
  repeat: -1,
  repeatDelay: 0.25,
  yoyo: true
}; 
Transform值的轉換 
接下來是一個比較新的但沒有加入文檔的屬性，可以強制將 transform 值轉換為可以放置在SVG transform 屬性中的值（相對于CSS樣式）。 
CSSPlugin.useSVGTransformAttr = true; 
加入這個屬性是為了讓開發者更容易捕捉Safari中的bug，當結合使用 opacity 和 transform 屬性（例如 transform: scale() ）時，會產生一個奇怪的結果。但是1.16.0版本， useSVGTransformAttr 已經自動設置為 true ，是特別針對Safari的調整，所以現在你們就不再需要像我上面那樣定義了。 
因為 staggerFromTo 方法在 from 和 to 位置接受不同的參數，我喜歡先在方法外邊設置兩個對象字面量，便于組織和增加可讀性。 
var stagger_opts_from = {
  opacity: 0,
  scale: 0,
  transformOrigin: 'center center'
};

var stagger_opts_to = {
  opacity: 1,
  scale: 1,
  ease: Elastic.easeInOut,
  force3D: true
}; </pre> 
我們定義了兩個對象字面量，因為動畫本身我們需要按照順序為其定義 from 和 to 屬性。如果還不清楚，我們從 stagger_opts_from 中定義的值，到 stagger_opts_to 中設置的結尾來看。 

force3D 強制GSAP給元素的變換應用一個3D值；也就是說使用 matrix3d() 而不是 matrix() ，是 translate3d() 而不是 translate() 。這導致了瀏覽器把目標元素放在復合層上，從而使得動畫更有效地更新。 

默認情況下 force3D 的值為 auto （1.15.0版本），所以實際上沒有必要在所有地方都使用它（除非那個補間你真的需要 true 值而不是 auto ）。 

// 在補間開始的時候對對象進行分層，并讓它們在適用的地方使用3D矩陣（用于二維和三維變換）
force3D:true

// 在補間開始的時候對對象進行分層，在補間結束的時候再合并（切換回2D矩陣或變換）。這可以防止你創建或掛起上百個分層元素（會降低性能），也可以確保文本在補間返回的期間已經柵格化。
force3D:auto </pre> 
你可以使用 CSSPlugin 提供的 defaultForce3D 屬性為所有補間設置全局 force3D 值。 

// 也可以接受 'false' 或 'auto'
CSSPlugin.defaultForce3D = true; 
 
或者你可以對每個補間逐個進行設置： 

// 在補間完成后繼續保持元素的分層狀態
timeline.to(element, 1, {x:300, force3D:true);

// 在補間完成后繼續保持元素的分層狀態
timeline.to(element, 1, {x:300, force3D:false); </pre> 
窗口加載時隱藏 

如果你的動畫試圖重寫CSS屬性，你需要確保你的特定內容不會和你在JavaScript中聲明的沖突，否則原生CSS值將具有較高的優先級，而你的動畫則不能按照預期的播放。 

/* Required Polyman Styles */
.polyman path {
  opacity: 0;
} 
 
上面的CSS隱藏了初始窗口加載時的polyman，所以我們開始的時候看不到我們的大胡子朋友，就像你可能經歷過的，我們通常稱為FOUT（Flash Of Unstyled Text：文本樣式短暫失效）。 

因為我們的大多數配置已經定義好了，我們終于可以開始設置我們的時間軸、指定SVG路徑、定義一個stagger值（ stagger_val ），以及最后定義整個動畫的持續時長（ duration ）。 

var tl = new TimelineMax(tmax_options),
    path = $('svg.polyman path'),
    stagger_val = 0.0125,
    duration = 1.25; 
 
就這樣，在我們揮舞魔棒，施了魔法之后，我們傳入了所有需要的變量，作為參數傳遞給 staggerFromTo 方法。 

tl.staggerFromTo(path, duration, stagger_opts_from, stagger_opts_to, stagger_val, 0); 
 
現在一個簡單的polyman已經可以動起來了，而且變成了有生命的東西（當然不是真的）。很酷吧？ 

接下來 

在我們TweenMax系列的下一篇教程中，我們將看看如何在時間軸上創建一個暫停的點，這樣動畫可以在進行到某個點的時候自動暫停。 addPause() 方法相對比較新，可以讓你在時間軸上的任何位置放置一個暫停。這比使用一個回調來調用一個函數用來停止某項功能要精確多了（這是在 addPause() 出現之前采用的方法）。下次見~ 

感謝那些一直追隨GreenSock的讀者們！ 


本文根據 @Dennis Gaebel 的《 TimelineMax: An Introduction to Tweening 》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需注明英文出處： http://webdesign.tutsplus.com/tutorials/timelinemax-an-introduction-to-tweening--cms-23509 。 
</div>

 

彥子 

在校學生，本科計算機專業。逗比一枚，熱愛前端熱愛生活，喜歡CSS喜歡JavaScript喜歡SVG，愛玩PS玩AI玩啊逗比的軟件。努力向上，厚積薄發。 
</div>
</div>
原文 http://www.w3cplus.com/css3/timelinemax-an-introduction-to-tweening.html

                    

                        
 本文由用戶 jopen  自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                        
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                        
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                        
 
本文地址：http://www.baiduhome.net/news/view/1fcdfb                        
                        
 TimelineMax
                    
                
                

                

                    
相關資訊
                    

                        

                            
                             TimelineMax：Tweening簡介
                        
                        

                            
                             結對編程簡介
                        
                        

                            
                             結對編程簡介
                        
                        

                            
                             Amazon Inspector簡介
                        
                        

                            
                             IIS 8.5 新特性簡介
                        
                    
                
                

                    
相關經驗
                    

 Redis簡介
 MyBatis 簡介
 Ractive 簡介
 storm簡介
 AngularJS 簡介
                    
                
                

                    
相關文檔
                    

 EA 工具簡介 UML工具簡介
 Docker 簡介
 OpenESB 簡介
 Cmake簡介
 Storm 簡介
                    
                
                
            

        

      





   
    
    
    
    
    
    
    
 

    
    
    

    

    

    
    
    






 

CSS 
GSAP 


translateX() 
x 

translateY() 
y 

translateZ() 
z 

rotate() 
rotation 

rotateY() 
rotationY 

rotateX() 
rotationX 

scaleX() 
scaleX 

scaleY() 
scaleY 

skewX() 
skewX 

skewY() 
skewY