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

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

關於GreenSock的基礎知識，能夠看看我整理的GreenSock簡明教程。

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

先來看看要實現的效果：

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

<div class="container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" class="undefined">
    ......
    </svg>
</div>

加上一點點樣式：

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，在體驗上會更好一點。

先來分析下效果：

一、首先是順時針旋轉

二、而後是縮小

三、最後放大

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

先來初始化一些設置，從效果能夠看出，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地址

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

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

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

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