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

欢迎您访问我爱IT技术网，今天小编为你分享的电脑教程是建站经验系列之：【如何使用SVG生成超酷的页面预加载素描动画效果】，下面是详细的分享！

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

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

　　5 SVG 制作素描线动画举例

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

　　

 

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

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

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

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

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

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

　　 .path{ stroke-dasharray: 265.07; stroke-dashoffset: 265.07; animation: dash 3s linear infinite; -webkit-animation: dash 3s linear infinite; } @keyframes dash{ from{ stroke-dashoffset: 265.07; } to{ stroke-dashoffset: 0; } } @-webkit-keyframes dash{ from{ stroke-dashoffset: 265.07; } to{ stroke-dashoffset: 0; } }

　　4)使用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);

　　来生成动画。

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

　　

 

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

以上所分享的是关于如何使用SVG生成超酷的页面预加载素描动画效果，下面是编辑为你推荐的有价值的用户互动：

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

　　答：1 SVG简介 可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。 2 SVG的特点 与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于： SVG 图像... >>详细

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

　　答：SVG制作素描线动画举例 1）.首先画一条素描线，如图 version="1.1"xmlns="http://www.w3.org/2000/svg"viewBox = "0 0 200 100"> fill="none"stroke = "#AAA"stroke-width = "2"d = "M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 ... >>详细

　　相关问题：

　　答： >>详细