先看效果

動畫分解

1.循環(huán)飛動的海鷗
2.搖曳的小船
3.擺動的旗幟

涉及知識點

1.AI(可盡情騷擾UI歐巴)
2.SVG(了解基本的知識點)
3.TweenMax(GreenSock)

---

之前一直沒有接觸過SVG動畫，首先拿到的是一個AI 文件和一個Word文檔

1. 水流有浮動效果，船體隨著水流輕微有起伏搖晃，旗幟有輕微飄動效果。 2. 海鳥揮動翅膀，有輕微的位移循環(huán)。

接下來就要正式開始一點一點完成一個動畫作品，一開始想到的是將動畫部分單獨保存為png圖片，不需要動畫的部分作為背景，利用css和js來完成動畫。
后面經(jīng)過查閱資料，瀏覽了https://codepen.io上的很多案例，看完了這個視頻，視頻鏈接（翻墻觀看）初步確定思路，如何完成動畫。走了很多錯路，但是基本效果完成。分享出來給沒有接觸過SVG動畫的同學一點思路。

操作AI文件

AI文件操作，主要是將需要做動畫的部分編組，設置名稱，保存成svg文件后名稱將以id形式存在，這里AI涉及的到東西同學們可以請教專業(yè)的UI同學。這里主要強調(diào)幾點:

1.AI基本工作完成后如何正確保存SVG文件，我參考了Illustrator保存svg,選項有略微不同，保存好的可以直接復制svg代碼。有一點不好的地方是，AI再次打開svg會報錯，所以每次編輯的是AI文件，然后另存為svg文件，不直接編輯svg文件(很重要，直接編輯svg導致重頭再來很多次)！

2.旗幟和波浪部分需要另外新建一個AI文件，這里涉及到了svg的嵌套。后面再詳細講解

3.涉及到圖片的自適應，AI畫板的大小，為下圖的褐色邊框，將主題部分包含住，不需要整個背景

另存為.svg文件配置

編輯SVG文件

編輯器打開svg文件，可以看到命名好的組，將<svg></svg>部分復制到html文件中。

接下來就要開始真正要讓他動起來了
js文件涉及到
jquery.js
TweenMax.min.js
TimelineMax.min.js
TweenMax可以從官網(wǎng)上看視頻學習，官網(wǎng)也可以提問題，涉及到的知識點我會按照自己的理解說明下
將id為seagulls 下的格式類似于id="seagull_2_"統(tǒng)一改成class="seagull"，便于jquery選擇出來，海鷗的左右翅膀也做相同的操作
海鷗主要是有位移的變化和翅膀抖動的變化，具體代碼如下

<script>//分別選擇出海鷗，以及海鷗的左邊翅膀，和右邊翅膀var seagulls = $("#seagulls .seagull"),seagulls_left = $("#seagulls .seagull .left"),seagulls_right = $("#seagulls .seagull .right"); //設置場景一function sceneOne() {var tl = new TimelineMax();//在時間軸上添加了一個名為begin的標準//那么我每次后面如果有begin，那么就都是從begin這個相對的點開始而不是依次執(zhí)行//tl.to(selector, 1, { }, "begin");tl.to(selector1, 1, { }, "begin");兩個同時進行一共花一秒//tl.to(selector, 1, { });tl.to(selector1, 1, { });依次執(zhí)行一共花兩秒tl.add("begin");tl.staggerFromTo(seagulls, 3, {y: 0,}, {x: 30,y: 30,repeat: -1,//循環(huán)播放yoyo: true,//位移到x:30,y:30后,反向運動, 不設置的話會立馬消失，從x:0,y:0重新開始運動}, .3,//m每只海鷗運動時間間隔0.3s"begin");tl.to(seagulls_left, 1, {rotation: 10,x: -2,transformOrigin: "right bottom",//以右下角為中心做旋轉運動，翅膀擺動的效果repeat: -1,yoyo: true}, "begin");tl.to(seagulls_right, 1, {rotation: -10,x: 2,transformOrigin: "left bottom",repeat: -1,yoyo: true,}, "begin");return tl;}var repeat = new TimelineMax();repeat.add(sceneOne(), "scene2");</script>

staggerFromTo()使用這個方法可以讓相同動畫的數(shù)組元素，在一定時間里，按照規(guī)定時間間隔依次執(zhí)行
to()方法就是想指定效果做動畫。

接下來是波浪動畫，波浪是一個svg的嵌套，用過平移實現(xiàn)波浪動畫的效果，需要新建一個AI文件將波浪單獨保存svg文件，代碼粘貼到相應位置，設置寬高，x，y位置，將原來的<g id="wave">...</g>替換。波浪的總長度是大于顯示的長度的。這樣就可以進行平移了。

tl.to(wave, 6, {x: -337,//向左平移337個單位，這個平移的長度可以測試一下，重復的時候銜接起來，沒有斷掉的感覺repeat: -1,ease: Linear.easeNone }, "begin");

旗幟的效果也是嵌套svg進行平移的，平移的過程可能會有位移，所以這里再平移的時候y軸也有一個位移y：30和角度變化，

tl.to(bg, 15, {x: -137, //旗幟橫向平移repeat: -1,rotation: -7,y: 30,ease: Linear.easeNone}, "begin");

大體的代碼就這些，有任何問題可以提出，交流討論，完整代碼看這里完整代碼

總結

很多地方實現(xiàn)效果，卻不知道是否是最優(yōu)的方法，希望能學習到更多的東西。
第一次認真寫東西，如果對你有用可以點個贊我將繼續(xù)努力。

總結

以上是生活随笔為你收集整理的GreenSock (TweenMax) 动画案例(一)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。