當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用 GreenSock 来制作 SVG 动画

發(fā)布時(shí)間：2024/8/1 编程问答 50 豆豆

生活随笔收集整理的這篇文章主要介紹了使用 GreenSock 来制作 SVG 动画小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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

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

GreenSock

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

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

詳細(xì)代碼地址

使用SVG來繪制圖形

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

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

一個(gè)基本的布局就完成了。下面是來添加一些樣式。當(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 colorbody { background-color: $midnight-express;}// Center the svg horizontally and verticallysvg { 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)在整個(gè)是靜態(tài)的，我們使用一點(diǎn)點(diǎn)GreenSock代碼來實(shí)現(xiàn)一個(gè)從小到大縮放動(dòng)畫效果：

// 定義好要操作相關(guān)元素的變量const svg = document.querySelector('svg')const canvas = {wrapper: svg.querySelector('.canvas'), mask: svg.querySelector('.canvas .mask')}// 創(chuàng)建一個(gè)新的GASP的時(shí)間軸const tl = new TimelineMax({repeat: -1})// 使用 GASP的from方法來定義mask元素半徑從0到1的縮放動(dòng)畫效果tl.from(canvas.mask, 1, {attr: { r: 0 }, ease: Elastic.easeOut.config(3, 1)})

幾行代碼，一個(gè)縮放的動(dòng)畫效果就完成了：

詳細(xì)代碼地址

繪制天空

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

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

tl.from(canvas.ground, 0.5, {autoAlpha: 0, attr: { y: '+=200' }, ease: Power4.easeOut }, 0.1)

天空的動(dòng)效跟地面一樣的。由于天空有3個(gè)元素，并且是依次出現(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)

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

詳細(xì)代碼地址

樹

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

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

最后是后面的大山以及大山的動(dòng)畫效果。

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

它的動(dòng)畫效果和樹的效果差不多，只不過是把旋轉(zhuǎn)的動(dòng)效變成翻轉(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)

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

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

總結(jié)

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

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

上一篇：映像劫持与反劫持技术
下一篇：服务器的mp4文件是黑屏,Windows