html5 loader,7种基于GSAP的SVG Loader加载动画特效

这是一组效果非常炫酷的基于GSAP的SVG Loader加载动画特效。这组SVG加载动画特效共有7种效果，分别使用GSAP对SVG进行操纵，制作出各种炫酷的Loading加载动画效果。

这些SVG加载动画效果依赖于一个非常强大的插件-DrawSVGPlugin，该插件可以帮助你创建高质量的SVG动画和特效。

注意，这个效果中的例子你可以在本地计算机中自由在查看效果，但是如果你要将这些效果用于服务器中，需要注册一个GreenSock的会员账号。

使用方法

下面来看一下这些SVG加载动画是如何制作的。这里充分利用了GSAP的测序工具TimelineMax和DrawSVGPlugin。DrawSVGPlugin插件用于逐步显示或隐藏SVG的描边，这可以非常方便的制作Loader效果。

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

HTML结构

下面来看一下第一种效果Jump Loader，这是一个非常有趣的特效-一条半圆形的线条就像从液体中跳出来然后再潜如液体中，很有鲤鱼跳龙门的感觉。该效果的HTML结构如下：

这个加载动画中的SVG图形是在Adobe Illustrator中创建的。你也可以使用其它工具如：Sketch(只能在Mac上使用)或Inkscape来制作。这个SVG图形由一个半圆形的线条和两个椭圆图形组成，如下图所示。并且背景设置为红色的方块，原因是当你从Illustrator选择和拷贝SVG图形到HTML页面中的时候，SVG的viewBox的尺寸由整个选择的图形的大小来决定。也就是说，如果你只选择线条和椭圆，那么SVG的viewBox的尺寸仅仅是你选择额图形形成的一个组的大小。这样就没有多余的空间可以进行SVG动画了。

要创建一个大的SVG动画区域，可以像上面这样创建一个大的矩形区域，然后将这个区域一起拷贝到HTML文件中，之后就可以将该矩形区域的代码从SVG代码中删除，只留下线条和椭圆的代码，但是这时viewBox的尺寸仍然是原来矩形的尺寸。

结构和布局

首先创建一些变量来引用HTML元素，这种方法可以将引用缓存起来，还可以在你需要这些HTML元素引用的时候不必重复的查找HTML代码。但是要注意的是这种方法会占用移动手机的宝贵的内存资源。所以是否使用这种方法由你决定。