如何使用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来实现素描动画效果

/*定义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; } }

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);

来生成动画。

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

当运行动画绘制程序的时候，各条线安装设定的体例进行绘制，我们就看到特别很是酷的预加载动画了。

网站题目：如何使用SVG生成超酷的页面预加载素描动画效果
分享路径：https://www.cdcxhl.com/news47/277347.html

成都网站建设公司_创新互联，为您提供云服务器、网站设计公司、自适应网站、品牌网站建设、面包屑导航、网站维护

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联