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

2025-02-02 技术教程

在线演示

本地下载

1 SVG简介

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

2 SVG的特点

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

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

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

SVG是可伸缩的

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

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

3 浏览器支持

InternetExplorer9、Firefox、Opera、Chrome以及Safari支持内联SVG。InternetExplorer8或更早版本，可通过安装AdobeSVGViewer以支持SVG。

4SVG标签

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

5 SVG制作素描线动画举例

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

<svgversion="1.1"xmlns="http://www.w3.org/2000/svg"viewBox="00200100"><pathfill="none"stroke="#AAA"stroke-width="2"d="M62.914.9c-25-7.74-56.64.8-60.424.3-3.7319.621.63539.637.642.86.272.9-53.4116-58.965-18.2191101215"/></svg>

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

相关课程基础SVG标签介绍

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

stroke-dasharray="10010"stroke-dashoffset="0"

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

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

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

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

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

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

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

/*定义相关Javascript*/varcurrent_frame,//定义当前帧total_frames,//定义全部帧数path,//定义svg中的唯一path元素length,//定义path所生成的素描长度handle;//定义javascript动画句柄path=document.getElementById('path'),length=path.getTotalLength();//定义初始化方法varinit=function(){current_frame=0;total_frames=160;path.style.strokeDasharray=length+''+length;//定义dasharraypath.style.strokeDashoffset=length;//定义dashoffsethandle=0;}//定义实际的动画绘制方法vardraw=function(){varprogress=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);}}//定义一个重新运行方法varrerun=function(){init();draw();}//页面加载即运行rerun();

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

来生成动画。