使用JavaScript製作SVG動畫
更多資訊請訪問原文↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
在JavaScript中，使用CSS3或Web Animations API的瀏覽器本身可以實現的功能非常多。簡單的動畫和轉換非常適合CSS3–而更復雜的動畫需要使用JavaScript來完成。
Web Animation API的問題是瀏覽器支援和當前功能集。作為一個相當年輕的規格，這在未來幾年會有所改進。
為了對抗這個功能和瀏覽器支援的不足，我們可以轉向動畫庫，比如GreenSock（GSAP）。GSAP使我們能夠建立複雜的動畫和多個時間線，並能夠動畫幾乎任何元素或屬性/值對 – 所有這些都通過簡單直觀的語法來實現。
在本教程中，我們將使用GSAP庫建立一些動畫。我們將建立的主要和最複雜的動畫將從白天到晚上過渡場景，我們將看到我們可以輕鬆地將多個轉場連結在一起以建立複雜的動畫。我們還將建立一些我們將不斷執行的簡單動畫。
01. 檔案設定
首先，我們需要分叉GreenSock Pen以試用其高階外掛。對於本教程，我們將使用已經優化並貼上到我們的HTML編輯器中的SVG。但是，如果您使用自己的SVG，則需要確保所有元素都具有唯一的ID。
02. 建立第一個時間表
GSAP提供兩種時間線型別：TimelineLite和TimelineMax。TimeLineMax版本提供了其他功能，例如重複動畫的能力，以及其他功能。我們的第一個時間表將是水，我們將無限次地來回重複。
JavaScript| 1234 | varanimation_water=newTimelineMax({repeat:-1,yoyo:true}); |
03. 建立第一個動畫
為了給水體加上動畫，我們在SVG中有另一條路徑，隱藏著’0’不透明度。我們將利用morphSVG外掛將我們原來的水路改造成新的水路。我們將y軸上的水元素’12px’向下移動。該屬性末尾的兩個數字分別表示延遲時間和開始時間。
JavaScript| 123456 | animation_water.to("#water",2,{y:12,morphSVG:"#water-2",ease:Linear.easeNone},0,0); |
04. 可重複使用的屬性
由於我們將重複使用許多屬性和值，我們將為這些屬性建立變數。
JavaScript| 1 | varanimation_ease=Linear.easeNone; |
05. 控制檯日誌
GSAP圖書館使我們能夠從任何給定的時間表中獲取多個屬性。我們可以將這些記錄在控制檯中，以確保一切正常，正如我們所期望的那樣。
JavaScript| 12345 | console.log('animation_water duration: '+animation_water.duration().toFixed(2)); |
06. 雲時間軸和控制檯日誌
對於我們希望單獨進行動畫製作的每個元素，我們需要不斷建立新的時間線。我們還希望在控制檯中記錄時間線。
JavaScript| 12345678 | varanimation_cloud=newTimelineMax({repeat:-1,yoyo:true});console.log('\n'+...animation_cloud.duration().toFixed(2)+' \n'); |
07. 雲彩動畫
現在我們已準備好時間表，我們可以建立我們的雲動畫。採用新屬性的動畫片段可以處理多個使用逗號分隔的屬性/值對。
我們的雲動畫只需要微妙，所以我們只需要少量更改這些值。
JavaScript| 123 | animation_cloud.to("#cloud",3,{x:-2,y:1,scale:0.95,rotation:1,ease:animation_ease},0,0); |
08. 建立夜間動畫
接下來，我們將開始建立我們的日常動畫。我們將為週期時間和一天建立一個變數。GSAP中的’yoyo’設定也使我們能夠在重複之前延遲動畫。
JavaScript| 1234567 | varday_night_cycle_time=15;varanimation_delay=day_night_cycle_time/2;varanimation_toNight=newTimelineMax({repeat:-1,yoyo:true,repeatDelay:animation_delay}); |
09. 動畫重疊圖層
在我們的SVG中，我們有一個由矩形組成的覆蓋圖層，覆蓋整個影象，具有與我們夜間背景相同的背景漸變。覆蓋層應用“乘法”混合模式以使整個影象變暗。我們的動畫只是轉換這個元素的不透明度。
JavaScript| 12345678 | animation_toNight.to('#nighttime-overlay',day_night_cycle_time,{opacity:1,ease:animation_ease},0,0); |
10. 為漸變設定動畫
GSAP在常用的“to”和“from”型別之上提供其他補間。為了讓我們的漸變具有動畫效果，我們需要的補間型別是’錯開’到’補間’。我們還可以使用“迴圈”屬性來將色輪旋轉到我們的新值。
JavaScript