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

Posted 2023-04-09

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 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215"/>
       素描线的参数可以使用工具生成
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);来生成动画。

2）.SVG实现素描的动画及原理
       stroke-dasharray = "100 10" stroke-dashoffset = "0"
       stroke-dasharray定义了生成线段长度，及其线段和线段之间的缝隙，这里包含两个参数
       stroke-dashoffset定义了从那个位置开始渲染生成线段

2.SVG简介

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

3.SVG的特点

       与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
       SVG图像可通过文本编辑器来创建和修改
       SVG图像可被搜索、索引、脚本化或压缩
       SVG是可伸缩的SVG图像可在任何的分辨率下被高质量地打印
       SVG可在图像质量不下降的情况下被放大

34浏览器支持

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命名空间。

参考技术A 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）首先画一条素描线 如图:

<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox = "0 0 200 100">
<!--
fill属性是否填充
stroke为绘制，颜色#AAAAAA
stroke-width为绘制线的粗细
d是具体数据，这里看到的数据代表了坐标，以及折线等等，可以使用工具生成
-->
<path 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 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215"
/>
</svg>

素描线的参数可以使用工具生成，
相关课程 基础SVG标签介绍
2）SVG实现素描的动画及原理
stroke-dasharray = "100 10" stroke-dashoffset = "0"
stroke-dasharray定义了生成线段长度，及其线段和线段之间的缝隙 ，这里包含两个参数
stroke-dashoffset定义了从那个位置开始渲染生成线段
相关课程 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;

本回答被提问者和网友采纳

使用纯 CSS 实现超酷炫的粘性气泡效果

最近，在 CodePen 上看到这样一个非常有意思的效果： 这个效果的核心难点在于气泡的一种特殊融合效果。 其源代码在：CodePen Demo -- Goey footer，作者主要使用的是 SVG 滤镜完成的该效果，感兴趣的可以戳源码看看。 其中，要想灵活运用 SVG 中的 feGaussian