摘要：在制作動畫方面也非常強悍，并且還專門提供了用于加強動畫制作的相關插件，比如。一個有趣的的動畫效果就完成了，代碼地址使用配合來制作動畫效果如此簡單。原文地址，根據自己理解整理了下這個教程，主要是來學習下使用來制作動畫效果的思路和方法。

這是我的一個關于SVG的應用的技術分享網站svgtrick.com，會同步一些文章到這里來，更多關于SVG技術應用可以去網站看看。

最近從Dribbble shot 看到@thorstenbeeck發布的一個設計效果圖得到靈感。根據這個設計，使用GreenSock這個動畫平臺實現了一個SVG的動畫效果，下面就來聊聊我是怎么實現這個動畫效果的。

GreenSock是一個無需多介紹了，是一個專門用來開發動效的平臺，并且提供了javascript版本。更多關于GreenSock的一個入門介紹可以去我整理的簡明教程看看，這里就不再介紹它的基本知識。

GreenSock在制作SVG動畫方面也非常強悍，并且還專門提供了用于加強SVG動畫制作的相關插件，比如Greensock DrawSVG plugin。它可以實現任何SVG圖形的繪制，也可以操作諸如stroke-dashoffset和stroke-dasharray等CSS屬性來制作一些描邊的動畫效果，下面來一個簡單的實例：

詳細代碼地址

這一步將使用SVG來實現Dribble shot上的效果圖。從效果圖可以看到整個圖形都是由簡單的一些幾何圖形組成的，而繪制圖形正是SVG所擅長的，使用SVG來實現這樣的形狀非常簡單。

首先來為整個圖形創建一個畫布。創建一個SVG元素。然后創建一個跟畫布一樣大的矩形元素 rect 然后使用一個圓形的 clipPath 元素來遮住整個畫布使其內容只顯示在圓形的遮罩內。代碼如下所示：

一個基本的布局就完成了。下面是來添加一些樣式。當然你可以使用行內樣式或者是內聯樣式也可以是外鏈樣式。

一般樣式建議使用外鏈的方式來引入樣式，這樣可以保證html的整潔以及可維護性。當然也可以使用諸如SASS等預編譯語言來編寫CSS，可以利用預編譯語言提供的變量功能來管理顏色或者是字號等全局樣式，非常方便。

由于我使用的是SASS，我把顏色都在SASS中定義好對應顏色名稱的變量里面：

// Color palette

$red: #E9214F;
$burnt-sienna: #F06B4B;

$goldenrod: #F6DA71;
$scooter: #349597;
$midnight-express: #20283B;

$marzipan: #FCDC9F;
$fruit-salad: #49934E;

$goblin: #3D7C42;
$chambray: #44557E;
$port-gore: #384668;

$white: #ffffff;
$silver-sand: #BBBBBB;
// Set background color

body {
background-color: $midnight-express;

}

// Center the svg horizontally and vertically

svg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

width: 500px;
height: 500px;
backface-visibility: hidden;

}

// Color styles

.canvas {
.bg { fill: $scooter; }

.ground { fill: $marzipan; }

.sky1 { fill: $goldenrod; }

.sky2 { fill: $burnt-sienna; }

.sky3 { fill: $red; }

.tree-left { fill: $fruit-salad; }

.tree-right { fill: $goblin; }

.mountain-left { fill: $chambray; }

.mountain-right { fill: $port-gore; }

.mountain-top-left { fill: $white; }

.mountain-top-right { fill: $silver-sand;

}

現在整個是靜態的，我們使用一點點GreenSock代碼來實現一個從小到大縮放動畫效果：

// 定義好要操作相關元素的變量

const svg = document.querySelector("svg")

const canvas = {

wrapper: svg.querySelector(".canvas"),
mask: svg.querySelector(".canvas .mask")

}

// 創建一個新的GASP的時間軸

const tl = new TimelineMax({

repeat: -1

})

// 使用 GASP的from方法來定義mask元素半徑從0到1的縮放動畫效果

tl.from(canvas.mask, 1, {

attr: {
r: 0
},
ease: Elastic.easeOut.config(3, 1)

})

幾行代碼，一個縮放的動畫效果就完成了：

詳細代碼地址

接下來是繪制天空和地面元素。使用SVG中的矩形元素 rect 來繪制，三個用來繪制天空一個用來繪制地面：

同樣這里也需要為它們增加一點動效，首先是地面的動效，地面的動效是從下往上冒出的。

tl.from(canvas.ground, 0.5, {

autoAlpha: 0,
attr: {
y: "+=200"
},
ease: Power4.easeOut
}, 0.1)

天空的動效跟地面一樣的。由于天空有3個元素，并且是依次出現而不是同從下往上冒出來，可以使用GreenSock中的 stagger 方法來實現：

tl.staggerFrom([canvas.sky1, canvas.sky2, canvas.sky3], 0.5, {

autoAlpha: 0,
skewY: 0,
attr: {
y: "+=90"
},
ease: Elastic.easeOut.config(1, 3)

}, 0.075, 0.25)

為了使動畫更加細膩，做完動畫后還需要調整下動畫的運動曲線，可以使用GreenSock提供的一個可視化動畫曲線調整工具來選擇合適的動畫曲線 ease visualizer。

詳細代碼地址

下面添加地面上的樹，樹由兩個三角形組成。因為數是一個一個挨著排列的，所以使用 g 元素來包裹樹元素編成一個組，這樣方便來布局：

重復復制七份同樣的代碼，并且使用transform來改變樹的位置，從而使之依次排列。然后是使用GreenSock來編寫樹的動畫效果，樹的動畫效果是從45度旋轉到0度旋轉的效果并且同時從0到1的縮放效果：

tl.staggerFrom([canvas.tree1, canvas.tree2, canvas.tree3, canvas.tree4, canvas.tree5, canvas.tree6, canvas.tree7], 0.5, {

rotation: 45,
scale: 0,
transformOrigin: "bottom center",

ease: Back.easeOut.config(2, 1.55)

}, 0.05, 0.4)

效果如下所示：

詳細代碼地址

最后是后面的大山以及大山的動畫效果。

大山由四個三角形元素組成，代碼如下：

它的動畫效果和樹的效果差不多，只不過是把旋轉的動效變成翻轉的效果。

tl.staggerFrom([canvas.mountain], 0.75, {

y: "+=50",
skewX: -200,
scale: 0,
transformOrigin: "bottom center",

ease: Back.easeOut.config(1, .2)

}, 0.0125, 0.5)

一個有趣的SVG的動畫效果就完成了，代碼地址使用GreenSock 配合 SVG 來制作動畫效果如此簡單。

原文地址，根據自己理解整理了下這個教程，主要是來學習下使用GreenSock來制作SVG動畫效果的思路和方法。