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

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

注意，這個效果中的例子你可以在本地計算機中自由在查看效果，但是如果你要將這些效果用于服務器中，需要注冊一個GreenSock的會員賬號。

使用方法

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

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

HTML結構

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

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

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

結構和布局

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

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');

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

var jumpRef = jump.cloneNode();

loader.appendChild(jumpRef);

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

TweenMax.set([container, loader], {

position: 'absolute',

top: '50%',

left: '50%',

xPercent: -50,

yPercent: -50

})

最后，在布局中使用TweenMax來翻轉倒影線條。這可以通過改變它的Y軸transform origin到110%，并使用負的scaleY值來實現。

TweenMax.set(jumpRef, {

transformOrigin: '50% 110%',

scaleY: -1,

alpha: 0.05

})

制作跳躍動畫

下面將要使用TimelineMax和鏈式動畫方式來制作線條跳躍動畫特效。

實現要創(chuàng)建一個TimelineMax的新的實例對象。TimelineMax實例對象可以接收一組參數和事件，如：延遲、yoyo、onComplete等。這里設置無限重復跳動效果：設置repeat為-1。

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

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

這里還使用TweenMax的內置語法attr來設置了橢圓形波浪效果X和Y軸半徑都為0(不可見)。注意第一個set函數之后沒有分號，這是鏈式編程的寫法。

myTimeline.set([jump, jumpRef], {

drawSVG:'0% 0%'

})

.set([circleL, circleR], {

attr: {

rx: 0,

ry: 0,

}

})

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

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

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

drawSVG: '0% 30%',

ease: Linear.easeNone

})

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

在這個動畫的結束處添加了一個額外的offset參數--=0.1，這個設置的意思是該動畫的時間被設置為0.3秒(0.4-0.1=0.3秒)，因為上一個to動畫的時間是0.4秒。

.to(circleL, 2, {

attr:{rx:'+=30',

ry:'+=10'

},

alpha:0,

ease:Power1.easeOut

}, '-=0.1')

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

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

drawSVG:'50% 80%',

ease:Linear.easeNone

}, '-=1.9')

最后，要使線條運動到100%處。

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

drawSVG:'100% 100%',

ease:Linear.easeNone

}, '-=0.9')

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

.to(circleR, 2, {

attr:{rx:'+=30',

ry:'+=10'

},

alpha:0,

ease:Power1.easeOut

}, '-=.5');

myTimeline.timeScale(3);

當這個加載動畫執(zhí)行的時候，它會無限進行循環(huán)。最后的myTimeline.timescale(3);是用于調整整個動畫的時間，使動畫看起來更加自然。

完整代碼

下面是Jump Loader加載動畫效果的完整代碼：

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')

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。