html5 loader,7种基于GSAP的SVG Loader加载动画特效
這是一組效果非常炫酷的基于GSAP的SVG Loader加載動畫特效。這組SVG加載動畫特效共有7種效果，分別使用GSAP對SVG進行操縱，制作出各種炫酷的Loading加載動畫效果。
這些SVG加載動畫效果依賴于一個非常強大的插件-DrawSVGPlugin，該插件可以幫助你創(chuàng)建高質(zhì)量的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代碼。但是要注意的是這種方法會占用移動手機的寶貴的內(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');
在效果中線條有一個反射的倒影，在SVG圖像中沒有創(chuàng)建它。可以在JS代碼中使用克隆函數(shù)將線條克隆一份出來。然后在后面將它翻轉并降低其透明度。
var jumpRef = jump.cloneNode();
loader.appendChild(jumpRef);
下面使用GSAP來簡單的居中定位。這里要使用TweenMax來將包裹容器和它里面的SVG居中對齊，這樣做的原因是居中只需要設置一次，而且它不必成為動畫序列的一部分。代碼中xPercent和yPercent參數(shù)等效于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值來實現(xiàn)。
TweenMax.set(jumpRef, {
transformOrigin: '50% 110%',
scaleY: -1,
alpha: 0.05
})
制作跳躍動畫
下面將要使用TimelineMax和鏈式動畫方式來制作線條跳躍動畫特效。
實現(xiàn)要創(chuàng)建一個TimelineMax的新的實例對象。TimelineMax實例對象可以接收一組參數(shù)和事件，如：延遲、yoyo、onComplete等。這里設置無限重復跳動效果：設置repeat為-1。
var myTimeline = new TimelineMax({ repeat: -1 });
下面就可以開始制作動畫序列了。首先使用GSAP的DrawSVGPluginl來將線條和它的倒影分開，分格的空間值設置為一個區(qū)間，這里設置為0% 0%意思是區(qū)間的開始和結束位置都設置為0%，并且它們都是從左向右進行繪制。
這里還使用TweenMax的內(nèi)置語法attr來設置了橢圓形波浪效果X和Y軸半徑都為0(不可見)。注意第一個set函數(shù)之后沒有分號，這是鏈式編程的寫法。
myTimeline.set([jump, jumpRef], {
drawSVG:'0% 0%'
})
.set([circleL, circleR], {
attr: {
rx: 0,
ry: 0,
}
})
上面的代碼只是設置了一些值，真正的動畫效果還沒有開始。動畫時間軸將無限循環(huán)的執(zhí)行，所以每次動畫開始時都必須調(diào)用原始的初始值。現(xiàn)在時間軸的持續(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參數(shù)--=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ù)制作動畫，現(xiàn)在線條已經(jīng)向前運動，這時它們的尾部要開始出現(xiàn)并執(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);是用于調(diào)整整個動畫的時間，使動畫看起來更加自然。
完整代碼
下面是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加载动画特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 清华大学计算机专业在职博士吧,我将我的清
- 下一篇： 运城学院数学与计算机系,运城学院数学与信