深入淺出 GreenSock 動畫：SVG Logo 動畫

Bowman_han 發布于2019-08-20 14:36 / 1324人閱讀

摘要：在上面的代碼中設置為，表示以倍的速度來運行這個動畫效果。當然在動畫效果中，運動曲線是必不可少的，提供了豐富的運動曲線來設置動畫的運動效果。整個動畫效果就完成了，通過這個簡簡單單的效果，可以發現使用來編寫動畫效果是多么的方便簡單。

在我網站svgtrick開一個新系列，主要是使用GreenSock來編寫和實現動畫效果，通過實際的效果來熟悉GreenSock的各個方法和技巧。

關于GreenSock的基礎知識，可以看看我整理的GreenSock簡明教程。

這個效果也是在codepen上看到的，拿來分析下實現思路，順便熟悉下GreenSock的一些API的使用方法。

先來看看要實現的效果：

這個效果中這個圖形是使用SVG來實現的，代碼有點多，詳細代碼就不貼了，貼個大概的的結構：

加上一點點樣式：

body{
  background-color:#fff;
  overflow:hidden;
}
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.container, svg{
  width:100%;
  height:100%;
}

svg{
  visibility:hidden;
}

在樣式中，先把SVG的visibility的屬性設置為hidden，這樣就可以等GreenSock初始化設置完后，才顯示SVG，在體驗上會更好一點。

先來分析下效果：

1、首先是順時針旋轉

2、然后是縮小

3、最后放大

不停的循環這個動畫效果。

先來初始化一些設置，從效果可以看出，logo是垂直水平居中。這里使用GreenSock來實現這個定位的：

var container = document.querySelector(".container");
var triangle = document.querySelector(".undefined");

TweenMax.set(container, {
  position:"absolute",
  top:"50%",
  left:"50%",
  xPercent:-50,
  yPercent:-50
})
TweenMax.set(triangle, {
  scale:0.25
})
TweenMax.set("svg", {
  visibility:"visible"
})

首先是把SVG和DIV節點存儲在定義好的變量中。然后使用TweenMax的set方法來把logo定好位置，在SVG初始的狀態中，它本身進行了一個縮放，縮放到原來的0.25倍。初始化完后，把SVG的visibility設置為visible，顯示SVG。

接下來就是來編寫動畫效果：

var tl = new TimelineMax({repeat:-1, repeatDelay:1});
tl.timeScale(6);
tl.to(triangle, 8, {
  rotation:"+=360",
  ease:Power2.easeIn
})
.to(triangle, 3, {scale: 0.2, ease:Power2.easeOut})
.to(triangle, 3, {scale: 0.25, ease:Power2.easeIn})

首先聲明一個TimelineMax的實例，從效果可以看出，這個動畫效果是無限循環的，所以設置它的repeat屬性的值為-1，并且循環的延遲時間為1秒即repeatDelay:1。

先來設置動畫運行的速度，通過timeScale方法來設置。

timeScale方法是用來設置或讀取時間軸的回放速率,比如0.5為一半速率，1為正常速度，2為2倍速度。在上面的代碼中設置為6，表示以6倍的速度來運行這個動畫效果。

設置好動畫播放速度后，先來實現圖形的旋轉效果，通過TimelineMax.to方法來實現。

在GreenSock中可以通過rotation方法來實現旋轉效果，動畫效果是旋轉360度，即可以通過rotation:"+=360"來實現這個效果。當然在動畫效果中，運動曲線是必不可少的，GreenSock提供了豐富的運動曲線來設置動畫的運動效果。在代碼中簡單的使用了最基礎的運動曲線easeIn，效果跟CSS3中的easeIn差不多。更豐富的曲線可以去這個地址看看。

旋轉之后，是在初始大小的狀態下進行縮小，通過scale這個屬性來實現。這里縮小的值是o.2，縮小之后，恢復的初始狀態即scale:0.25。

整個動畫效果就完成了，通過這個簡簡單單的效果，可以發現使用GreenSock來編寫動畫效果是多么的方便簡單。

demo地址

總結下，這個效果的使用到幾個重點的方法：

1、repeat : int：循環次數。設置為-1為無限循環。

2、repeatDelay : Number：循環延遲的時間。

3、timeScale:Number[讀寫] 用來設置或讀取時間軸的回放速率,比如0.5為一半速率，1為正常速度，2為2倍速度。

GPU云服務器云服務器 svg動畫動畫瘋前端動畫切換動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81775.html

SVG

摘要：目前只提供了一些基礎功能。中與的區別開發者第一次接觸手寫那種，雖然很多情況都有設計師使用來完成這項工作，但還是不排除需要利用到的每個元素。輕量級，具備靈活的來自團隊，全球非常出名的可視化團隊。于是筆者嘗試著把移植到中。使用SVG + CSS實現動態霓虹燈文字效果早上無意間進入一個網站，看到他們的LOGO效果略屌，如圖：剛開始以為是gif動畫之類的，審查元素發現居然是用SVG + ...

104828720 2019-08-29 14:00 評論0 收藏0
2018年值得期待11個Javascript動畫庫

摘要：超過的，是一個動畫庫，可以處理屬性，單個轉換，或任何屬性以及對象。在，是一個快速的動畫引擎，具有與的相同的。在，這個功能和反應動畫庫只重。由和其他人使用，這個庫既流行又令人驚訝地有用。在瀏覽網頁尋找一個整潔的Javascript動畫庫時，我發現很多recommended的動畫庫一段時間都沒有維護。經過一些研究，我收集了11個最好的庫，在你的應用程序中使用。我還添加了一些，主要是非維...

call_me_R 2019-08-22 18:47 評論0 收藏0
2018年值得期待11個Javascript動畫庫

摘要：超過的，是一個動畫庫，可以處理屬性，單個轉換，或任何屬性以及對象。在，是一個快速的動畫引擎，具有與的相同的。在，這個功能和反應動畫庫只重。由和其他人使用，這個庫既流行又令人驚訝地有用。在瀏覽網頁尋找一個整潔的Javascript動畫庫時，我發現很多recommended的動畫庫一段時間都沒有維護。經過一些研究，我收集了11個最好的庫，在你的應用程序中使用。我還添加了一些，主要是非維...

teren 2019-08-02 10:56 評論0 收藏0
2018年值得期待11個Javascript動畫庫

摘要：超過的，是一個動畫庫，可以處理屬性，單個轉換，或任何屬性以及對象。在，是一個快速的動畫引擎，具有與的相同的。在，這個功能和反應動畫庫只重。由和其他人使用，這個庫既流行又令人驚訝地有用。在瀏覽網頁尋找一個整潔的Javascript動畫庫時，我發現很多recommended的動畫庫一段時間都沒有維護。經過一些研究，我收集了11個最好的庫，在你的應用程序中使用。我還添加了一些，主要是非維...

skinner 2019-08-30 15:54 評論0 收藏0