我要投稿

css3画线动画-SVG技术简介：如何绘制移动线

bendan520 css3

2023-09-02 0 6,797 百度已收录

进不了网站？换个网络试试！

我喜欢用图片和图表来演示流程信息或者浏览器的操作过程，但是大量的图片有时会很不方便。在我关于应用程序缓存和缓存方法的一个演示中css3画线动画，我首先将屏幕留空，然后根据我的演示显示各种图表。下面是我如何使用SVG技术在浏览器中实现这些效果。

SVG 中的路径

SVG 中用于定义路径的格式可以称为正则表达式：

<path fill="none" stroke="deeppink" stroke-width="14" stroke-miterlimit="0"

d="M11.6 269s-19.7-42.4 6.06-68.2 48.5-6.06 59.1 12.1l-3.03 28.8 209-227s45.5-21.2 60.6 1.52c15.2 22.7-3.03 47-3.03 47l-225 229s33.1-12 48.5 7.58c50 63.6-50 97-62.1 37.9"

/>

我通常使用Inkscape软件来绘制SVG图，但是它形成的SVG文件完全不可读，并且有很多冗余代码，但是当你编辑时css3画线动画，它会提供一个SVGDOM视图。我更愿意使用 Adobe Illustrator，而不是使用它自己的格式并且只提供 SVG 导入。

属性 d 的每个部分都告诉浏览器生成一个动作 - 移动到某个点、开始绘制一条线、绘制一条贝塞尔弧等等。

如何将这些数据制作成动画，制作成逐渐绘制的线条，这是一个极其复杂的问题，幸运的是，我们不必考虑这一点。我可以使用颜色并设置点的长度，使 SVG 路径一一点缀，并控制点的倾斜程度：

<path stroke="#000" stroke-width="4.3" fill="none" d="…"

stroke-dasharray=""

stroke-dashoffset=""

/>

如果您看不到此演示，则说明您的浏览器不支持 SVG。请使用最新版本的微软浏览器或傲游浏览器。

属性Stroke-dasharray允许您指定绘制线段每段的宽度。第二个值是每个段之间间隙的厚度。 stroke-dashoffset 属性允许您指定每个小线段的起始偏移量。

请将两个光标拖动到最大值，然后慢慢减小 dashoffset 属性值。天哪，这条线是动态绘制的！您可以从 DOM 获取线宽：

var path = document.querySelector('.squiggle-container path');
path.getTotalLength();

让线条自动绘制

在 SVG 中使用动画的最简单方法是使用 CSSanimations 或过渡。但有一个问题，在IE中不太好用，如果想在IE中实现，需要使用requestAnimationFrame，并使用JavaScript逐帧改变上面的值。

最好不要使用SMIL，IE不支持它并且Microsoft浏览器和Safari存在性能问题。

我将使用 CSStransitions，因此该演示在 IE 中不起作用。但我找不到一个好的方法来检查你的IE是否已经支持这些SVG元素上的动画，因为所有SVG属性都可以在IE中测量，但它们就是不能使用。

在下面的示例中，我们使用 SVG 中的属性定义破折号，尽管我们可以使用 CSS 做同样的事情。 SVG 中的各种属性在功能上与 CSS 属性相同。

var path = document.querySelector('.squiggle-animated path');
var length = path.getTotalLength();
// 清除之前的动作
path.style.transition = path.style.WebkitTransition =
  'none';
// 设置起始点
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// 获取一个区域，获取相关的样式，让浏览器寻找一个起始点。
path.getBoundingClientRect();
// 定义动作
path.style.transition = path.style.WebkitTransition =
  'stroke-dashoffset 2s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';

提升！

如果您看不到此演示，则说明您的浏览器不支持 SVG。请使用最新版本的微软浏览器或傲游浏览器。

使用 getBoundingClientRect 来获取区域并不是一个好主意，但它确实有效。但有一个问题，如果你在同一次 JavaScript 执行中两次更改样式而不强制更新该区域，则只有最后一次有效。

我通常通过获取offsetWidth来找到SVG范围，但它似乎在Maxthon中不起作用。

收藏 (0) 打赏

感谢您的支持，我会继续努力的!