這是一組效果非常炫酷的基于GSAP的SVG Loader加載動(dòng)畫特效。這組SVG加載動(dòng)畫特效共有7種效果，分別使用GSAP對(duì)SVG進(jìn)行操縱，制作出各種炫酷的Loading加載動(dòng)畫效果。

這些SVG加載動(dòng)畫效果依賴于一個(gè)非常強(qiáng)大的插件-DrawSVGPlugin，該插件可以幫助你創(chuàng)建高質(zhì)量的SVG動(dòng)畫和特效。

注意，這個(gè)效果中的例子你可以在本地計(jì)算機(jī)中自由在查看效果，但是如果你要將這些效果用于服務(wù)器中，需要注冊(cè)一個(gè)GreenSock的會(huì)員賬號(hào)。

使用方法

下面來看一下這些SVG加載動(dòng)畫是如何制作的。這里充分利用了GSAP的測(cè)序工具TimelineMax和DrawSVGPlugin。DrawSVGPlugin插件用于逐步顯示或隱藏SVG的描邊，這可以非常方便的制作Loader效果。

要了解更多關(guān)于GSAP和其它工具，建議查看下面的文章：

HTML結(jié)構(gòu)

下面來看一下第一種效果Jump Loader，這是一個(gè)非常有趣的特效-一條半圓形的線條就像從液體中跳出來然后再潛如液體中，很有鯉魚跳龍門的感覺。該效果的HTML結(jié)構(gòu)如下：

這個(gè)加載動(dòng)畫中的SVG圖形是在Adobe Illustrator中創(chuàng)建的。你也可以使用其它工具如：Sketch(只能在Mac上使用)或Inkscape來制作。這個(gè)SVG圖形由一個(gè)半圓形的線條和兩個(gè)橢圓圖形組成，如下圖所示。并且背景設(shè)置為紅色的方塊，原因是當(dāng)你從Illustrator選擇和拷貝SVG圖形到HTML頁(yè)面中的時(shí)候，SVG的viewBox的尺寸由整個(gè)選擇的圖形的大小來決定。也就是說，如果你只選擇線條和橢圓，那么SVG的viewBox的尺寸僅僅是你選擇額圖形形成的一個(gè)組的大小。這樣就沒有多余的空間可以進(jìn)行SVG動(dòng)畫了。

要?jiǎng)?chuàng)建一個(gè)大的SVG動(dòng)畫區(qū)域，可以像上面這樣創(chuàng)建一個(gè)大的矩形區(qū)域，然后將這個(gè)區(qū)域一起拷貝到HTML文件中，之后就可以將該矩形區(qū)域的代碼從SVG代碼中刪除，只留下線條和橢圓的代碼，但是這時(shí)viewBox的尺寸仍然是原來矩形的尺寸。

結(jié)構(gòu)和布局

首先創(chuàng)建一些變量來引用HTML元素，這種方法可以將引用緩存起來，還可以在你需要這些HTML元素引用的時(shí)候不必重復(fù)的查找HTML代碼。但是要注意的是這種方法會(huì)占用移動(dòng)手機(jī)的寶貴的內(nèi)存資源。所以是否使用這種方法由你決定。

var container = document.getElementById('container');

var loader = document.getElementById('loader');

var circleL = document.getElementById('circleL');

var circleR = document.getElementById('circleR');

var jump = document.getElementById('jump');

在效果中線條有一個(gè)反射的倒影，在SVG圖像中沒有創(chuàng)建它。可以在JS代碼中使用克隆函數(shù)將線條克隆一份出來。然后在后面將它翻轉(zhuǎn)并降低其透明度。

var jumpRef = jump.cloneNode();

loader.appendChild(jumpRef);

下面使用GSAP來簡(jiǎn)單的居中定位。這里要使用TweenMax來將包裹容器和它里面的SVG居中對(duì)齊，這樣做的原因是居中只需要設(shè)置一次，而且它不必成為動(dòng)畫序列的一部分。代碼中xPercent和yPercent參數(shù)等效于CSS的transform: translate(-50%, -50%)，并且包含了所有的瀏覽器廠商的前綴。

TweenMax.set([container, loader], {

position: 'absolute',

top: '50%',

left: '50%',

xPercent: -50,

yPercent: -50

})

最后，在布局中使用TweenMax來翻轉(zhuǎn)倒影線條。這可以通過改變它的Y軸transform origin到110%，并使用負(fù)的scaleY值來實(shí)現(xiàn)。

TweenMax.set(jumpRef, {

transformOrigin: '50% 110%',

scaleY: -1,

alpha: 0.05

})

制作跳躍動(dòng)畫

下面將要使用TimelineMax和鏈?zhǔn)絼?dòng)畫方式來制作線條跳躍動(dòng)畫特效。

實(shí)現(xiàn)要?jiǎng)?chuàng)建一個(gè)TimelineMax的新的實(shí)例對(duì)象。TimelineMax實(shí)例對(duì)象可以接收一組參數(shù)和事件，如：延遲、yoyo、onComplete等。這里設(shè)置無(wú)限重復(fù)跳動(dòng)效果：設(shè)置repeat為-1。

var myTimeline = new TimelineMax({ repeat: -1 });

下面就可以開始制作動(dòng)畫序列了。首先使用GSAP的DrawSVGPluginl來將線條和它的倒影分開，分格的空間值設(shè)置為一個(gè)區(qū)間，這里設(shè)置為0% 0%意思是區(qū)間的開始和結(jié)束位置都設(shè)置為0%，并且它們都是從左向右進(jìn)行繪制。

這里還使用TweenMax的內(nèi)置語(yǔ)法attr來設(shè)置了橢圓形波浪效果X和Y軸半徑都為0(不可見)。注意第一個(gè)set函數(shù)之后沒有分號(hào)，這是鏈?zhǔn)骄幊痰膶懛ā?/p>

myTimeline.set([jump, jumpRef], {

drawSVG:'0% 0%'

})

.set([circleL, circleR], {

attr: {

rx: 0,

ry: 0,

}

})

上面的代碼只是設(shè)置了一些值，真正的動(dòng)畫效果還沒有開始。動(dòng)畫時(shí)間軸將無(wú)限循環(huán)的執(zhí)行，所以每次動(dòng)畫開始時(shí)都必須調(diào)用原始的初始值。現(xiàn)在時(shí)間軸的持續(xù)時(shí)間仍然是0。

兩條線條都會(huì)被動(dòng)畫到它們總長(zhǎng)度的30%，DrawSVG的值0% 30%表示動(dòng)畫開始的區(qū)間是0%，當(dāng)前線條的長(zhǎng)度是總長(zhǎng)度的30%，如下圖所示。同時(shí)還使用一個(gè)線性的ease效果來制作一個(gè)平滑的繪制線條效果。

.to([jump, jumpRef], 0.4, {

drawSVG: '0% 30%',

ease: Linear.easeNone

})

接下來，就要通過rx和ry屬性使左邊的橢圓形波浪放大。如果它們都使用相同的值如+=30那么橢圓就會(huì)均勻的放大，這種設(shè)置會(huì)使波浪沒有立體感，所以這里將兩個(gè)值分別設(shè)置為不同的值。

在這個(gè)動(dòng)畫的結(jié)束處添加了一個(gè)額外的offset參數(shù)--=0.1，這個(gè)設(shè)置的意思是該動(dòng)畫的時(shí)間被設(shè)置為0.3秒(0.4-0.1=0.3秒)，因?yàn)樯弦粋€(gè)to動(dòng)畫的時(shí)間是0.4秒。

.to(circleL, 2, {

attr:{rx:'+=30',

ry:'+=10'

},

alpha:0,

ease:Power1.easeOut

}, '-=0.1')

下面繼續(xù)制作動(dòng)畫，現(xiàn)在線條已經(jīng)向前運(yùn)動(dòng)，這時(shí)它們的尾部要開始出現(xiàn)并執(zhí)行動(dòng)畫。注意這次的動(dòng)畫時(shí)間是-=1.9，DrawSVG的值設(shè)置為50% 80%意思是30%的線條仍然可見，線條從50%處開始，80%處結(jié)束。

.to([jump, jumpRef], 1, {

drawSVG:'50% 80%',

ease:Linear.easeNone

}, '-=1.9')

最后，要使線條運(yùn)動(dòng)到100%處。

.to([jump, jumpRef], 0.7, {

drawSVG:'100% 100%',

ease:Linear.easeNone

}, '-=0.9')

不要忘記還有右邊的橢圓形波浪，它會(huì)被像左邊波浪效果一樣被執(zhí)行動(dòng)畫。

.to(circleR, 2, {

attr:{rx:'+=30',

ry:'+=10'

},

alpha:0,

ease:Power1.easeOut

}, '-=.5');

myTimeline.timeScale(3);

當(dāng)這個(gè)加載動(dòng)畫執(zhí)行的時(shí)候，它會(huì)無(wú)限進(jìn)行循環(huán)。最后的myTimeline.timescale(3);是用于調(diào)整整個(gè)動(dòng)畫的時(shí)間，使動(dòng)畫看起來更加自然。

完整代碼

下面是Jump Loader加載動(dòng)畫效果的完整代碼：

var container = document.getElementById('container');

var loader = document.getElementById('loader');

var circleL = document.getElementById('circleL');

var circleR = document.getElementById('circleR');

var jump = document.getElementById('jump');

var jumpRef = jump.cloneNode();

loader.appendChild(jumpRef);

TweenMax.set([container, loader], {

position: 'absolute',

top:'50%',

left: '50%',

xPercent: -50,

yPercent: -50

})

TweenMax.set(jumpRef, {

transformOrigin: '50% 110%',

scaleY: -1,

alpha: 0.05

})

var tl = new TimelineMax({

repeat: -1,

yoyo: false

});

tl.timeScale(3);

tl.set([jump, jumpRef], {

drawSVG: '0% 0%'

})

.set([circleL, circleR], {

attr: {

rx: 0,

ry: 0,

}

})

.to([jump, jumpRef], 0.4, {

drawSVG: '0% 30%',

ease: Linear.easeNone

})

.to(circleL, 2, {

attr: {

rx: '+=30',

ry: '+=10'

},

alpha: 0,

ease: Power1.easeOut

}, '-=0.1')

.to([jump, jumpRef], 1, {

drawSVG: '50% 80%',

ease: Linear.easeNone

}, '-=1.9')

.to([jump, jumpRef], 0.7, {

drawSVG: '100% 100%',

ease: Linear.easeNone

}, '-=0.9')

.to(circleR, 2, {

attr: {

rx: '+=30',

ry: '+=10'

},

alpha: 0,

ease: Power1.easeOut

}, '-=.5')

總結(jié)

以上是生活随笔為你收集整理的html5 loader,7种基于GSAP的SVG Loader加载动画特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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