如何使用SVG生成超酷的页面预加载素描动画效果

水深无声 2022-08-13 11:58 167阅读 0赞

[![0f161857-085f-4c98-93f0-ae3b2086030c.png][]][0f161857-085f-4c98-93f0-ae3b2086030c.png 1]

[在线演示][Link 1]

[本地下载][Link 2]

## 1 SVG简介 ##

可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

## 2 SVG的特点 ##

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改

SVG 图像可被搜索、索引、脚本化或压缩

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大

## **3 浏览器支持** ##

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。Internet Explorer 8或更早版本，可通过安装Adobe SVG Viewer以支持SVG。

## 4 SVG 标签 ##

SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

## **5  SVG 制作素描线动画举例** ##

1）首先画一条素描线 如图:

[![77138629-25e0-458d-88b3-a0e2a5788f61.png][]][77138629-25e0-458d-88b3-a0e2a5788f61.png 1]

素描线的参数可以使用工具生成，

> [相关课程 基础SVG标签介绍 ][_SVG_]  
>

2）SVG实现素描的动画及原理

stroke-dasharray = "100 10"  stroke-dashoffset = "0"

stroke-dasharray定义了生成线段长度，及其线段和线段之间的缝隙 ，这里包含两个参数

stroke-dashoffset定义了从那个位置开始渲染生成线段

>  相关课程 [SVG实现的素描动画模拟效果及其原理][SVG]  
>

3）使用CSS3来实现素描动画效果

/*定义keyframe动画*/
        /* 添加动画到path元素 */
        .path{
        stroke-dasharray: 265.07;
        stroke-dashoffset: 265.07;
        animation: dash 3s linear infinite;
        /* 支持chrome */
        -webkit-animation: dash 3s linear infinite;
        }
        @keyframes dash{
        from{
        stroke-dashoffset: 265.07; /* 这里是svg图形中素描线长度，可以使用js获取 */
        }
        to{
        stroke-dashoffset: 0;
        }
        }
        /* 支持chrome浏览器 */
        @-webkit-keyframes dash{
        from{
        stroke-dashoffset: 265.07; /* 这里是svg图形中素描线长度，可以使用js获取 */
        }
        to{
        stroke-dashoffset: 0;
        }
        }

>  相关课程 [使用CSS3实现素描动画效果][CSS3]  
>

4）使用Javascript来调节动画效果的参数

/*定义相关Javascript*/
        var current_frame, //定义当前帧
        total_frames, //定义全部帧数
        path, //定义svg中的唯一path元素
        length, //定义path所生成的素描长度
        handle; //定义javascript动画句柄
        path = document.getElementById('path'),
        length = path.getTotalLength();
        //定义初始化方法
        var init = function(){
        current_frame = 0;
        total_frames = 160;
        path.style.strokeDasharray = length + ' ' + length; //定义dasharray
        path.style.strokeDashoffset = length; //定义dashoffset
        handle = 0;
        }
        //定义实际的动画绘制方法
        var draw = function(){
        var progress = current_frame/total_frames;
        if(progress>1){ //这里定义完成动画
        window.cancelAnimationFrame(handle);
        }else{
       //否则使用reqeuestAnimationFrame来生成动画
        current_frame++;
        path.style.strokeDashoffset = Math.floor(length*(1 - progress));
        handle = window.requestAnimationFrame(draw);
        }
        }
        //定义一个重新运行方法
        var rerun = function(){
        init();
        draw();
        }
        //页面加载即运行
        rerun();

这里主要定义初始化方法和动画绘制的方法，window.requestAnimationFrame(draw);

来生成动画。

> 相关课程[ 使用Javascript来实现素描动画效果 ][_Javascript_]  
>

5）我们选用极客标签的logo，作为原始图片，坐标参数用 Inkscape 工具生成。

[![0f161857-085f-4c98-93f0-ae3b2086030c.png][]][0f161857-085f-4c98-93f0-ae3b2086030c.png 1]

当运行动画绘制程序的时候，各条线安装设定的方式进行绘制，我们就看到非常酷的预加载动画了。

观看完整效果，请访问轻视频课程： [ 使用javascript生成极客标签Logo的素描动画效果][_javascript_Logo]

[0f161857-085f-4c98-93f0-ae3b2086030c.png]: http://www.gbtags.com/gb/networks/uploadimgthumb/0f161857-085f-4c98-93f0-ae3b2086030c.png
[0f161857-085f-4c98-93f0-ae3b2086030c.png 1]: http://www.gbtags.com/gb/networks/uploadimg/0f161857-085f-4c98-93f0-ae3b2086030c.png
[Link 1]: http://www.gbtags.com/gb/demoviewer/4001/9ca6f6cd-65cc-4d9a-8fed-613f9c0cba6c/svg-page-loading.html.htm
[Link 2]: http://www.gbtags.com/gb/share/4001.htm
[77138629-25e0-458d-88b3-a0e2a5788f61.png]: http://www.gbtags.com/gb/networks/uploadimgthumb/77138629-25e0-458d-88b3-a0e2a5788f61.png
[77138629-25e0-458d-88b3-a0e2a5788f61.png 1]: http://www.gbtags.com/gb/networks/uploadimg/77138629-25e0-458d-88b3-a0e2a5788f61.png
[_SVG_]: http://www.gbtags.com/gb/gbtutorials/154.htm
[SVG]: http://www.gbtags.com/gb/gbtutorials/155.htm
[CSS3]: http://www.gbtags.com/gb/gbtutorials/175.htm
[_Javascript_]: http://www.gbtags.com/gb/gbtutorials/176.htm
[_javascript_Logo]: http://www.gbtags.com/gb/gbtutorials/177.htm