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

這是我的一個關(guān)于SVG的應(yīng)用的技術(shù)分享網(wǎng)站svgtrick.com，會同步一些文章到這里來，更多關(guān)于SVG技術(shù)應(yīng)用可以去網(wǎng)站看看。

最近從Dribbble shot 看到@thorstenbeeck發(fā)布的一個設(shè)計(jì)效果圖得到靈感。根據(jù)這個設(shè)計(jì)，使用GreenSock這個動畫平臺實(shí)現(xiàn)了一個SVG的動畫效果，下面就來聊聊我是怎么實(shí)現(xiàn)這個動畫效果的。

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

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

詳細(xì)代碼地址

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

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

一個基本的布局就完成了。下面是來添加一些樣式。當(dāng)然你可以使用行內(nèi)樣式或者是內(nèi)聯(lián)樣式也可以是外鏈樣式。

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

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

// 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;

}

現(xiàn)在整個是靜態(tài)的，我們使用一點(diǎn)點(diǎn)GreenSock代碼來實(shí)現(xiàn)一個從小到大縮放動畫效果：

// 定義好要操作相關(guān)元素的變量

const svg = document.querySelector("svg")

const canvas = {

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

}

// 創(chuàng)建一個新的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)

})

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

詳細(xì)代碼地址

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

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

tl.from(canvas.ground, 0.5, {

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

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

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)

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

詳細(xì)代碼地址

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

重復(fù)復(fù)制七份同樣的代碼，并且使用transform來改變樹的位置，從而使之依次排列。然后是使用GreenSock來編寫樹的動畫效果，樹的動畫效果是從45度旋轉(zhuǎn)到0度旋轉(zhuǎn)的效果并且同時從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)

效果如下所示：

詳細(xì)代碼地址

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

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

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

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 來制作動畫效果如此簡單。

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