相信大家都见过这样的神奇技术:一根线条构成的画能自动逐帧描绘自己,特么炫酷。这种技术用Flash和AE等工具来实现的话不算难事,可惜所得文件略大。在本文中,想介绍一种稍微高那么一点逼格的实现方法,用纯codes写。所用到的技术是 SVG + CSS3。

首先,你得明白SVG是啥东东。再次,你得知道CSS3自定义动画实现方法。

SVG (Scalable Vector Graphics ),可伸缩的矢量图形,在浏览器中改变尺寸,其图形质量不会有所损失。相比其它位图,SVG图像文件更小,可压缩性更强。最强悍的是,SVG图像可以与DOM,CSS和JavaScript交互,并可以直接以DOM元素的形式直接嵌入HTML中。SVG非常适合制作成整体或局部动画。SVG 的主要竞争者是Flash。与Flash相比,SVG最大的优势是与其他标准(比如XSL和DOM)相兼容,而Flash则是未开源的私有技术。可惜在国内SVG方面的资料比较稀缺,所以,筒子们,翻墙出去吧……。可能这也与SVG自身不那么优雅和一定的学习开发难度有关。

可惜,好东西总是会遭天妒忌。SVG并不能兼容IE6~8(IE6~8中查看SVG文件需要下载Adobe SVG Viewer,这几乎不太现实……),其他内核的浏览器则可完美兼容。当然,也有一些jQuery插件用于实现SVG在IE8~6的兼容性。笔者觉得这种代价是明显的,建议尽量选择优雅降级,在IE6~8中可采用Image元素,而在高级浏览器中使用SVG。当然,视实际情况而论为上。可参考张鑫旭前辈的《一些SVG向下兼容优雅降级技术》

水了那么多废话还未切入重点,罪过……

SVG和CSS3的具体语法笔者就不说了,估计到明天天亮都说不完,直接上示例和代码。

该动画的原理就是,通过控制线条的虚线中实线的长度以使实线完整填充路径,再通过改变实线起点相对于虚线的偏移量,来实现线条的描绘与清除视觉效果。过渡效果由CSS3来实现。

1. 首先,你的有一个SVG图形。下面这个是我画的优雅美腻的曲线路径,这个路径一定要有线条(Stroke)属性:

 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400px">
  <path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M80 100, A 100 100 80 1  1 200 200, C 50 50 200 50 200 150 z"/>
</svg>

 

<path>表示路径,d=””定义路径数据。路径数据中的数据的M(m)、L(l)、H(h)、V(v)、C(c)、S(s)、Q(q)、T(t)、A(a)、Z的具体语法和含义笔者不打算在这里详述,有兴趣的同学可以移步W3cShool SVG <path>

如果不给path元素定义stroke属性,那么这个path路径是不可见的但物理意义上真实存在。stroke属性的颜色代码不能缩写。

3. 给path元素一个class=”path”属性,以便在CSS中直接控制path元素的样式。线条是虚线形式

.path{
stroke-dasharray: 10;
}
stroke-dasharray的属性值中间用逗号分隔,奇数位表示实线的长度,偶数位表示空白间隔的长度。

有人建议把描述svg元素的css样式写在SVG中以方便管理和移植,也有一些人建议用外部文件引入以防止HTML代码过于臃肿。自己衡量吧。

4. 假设让虚线长度变得更长一些,再长一些,再长一些些,直到跟路径一样长……

这就给我们启发,可以通过修改stroke-dasharray的属性值大于或等于路径长度,使虚线单元的实线部分完整填充路径。要让实线部分动起来,可以考虑控制实线起点相对于虚线的偏移量,让虚线单元在路径中的比例改变来呈现出路径的逐渐消失过程。

实线起点相对于虚线的偏移量用stroke-dashoffset属性控制。

5. 现在,慢慢地将线条动态的将偏移量从实线长度设置回归到0。这里使用CSS自定义动画实现过渡效果。如下所示。

.path {
       // ...
	-webkit-animation: dash 4s linear alternate infinite;
}

@-webkit-keyframes dash {
	from {
		stroke-dashoffset: 830;
	}
	to {
		stroke-dashoffset: 0;
	}
} 
// ...

6. 实例展示

 

Here is the Demo.(大小584Bit)

7. 优化

在现实情况中你很难知道线条有多长,我们这里设置了830,是因为这里是笔者尝试得到的经验结果。一般需要用JavaScript来获取路径的长度值,再将该长度值赋值给stroke-dasharray和stroke-dashoffset。

用JavaScript获取长度值的写法是这样的:

 

var path = document.querySelector('.path');
var length = path.getTotalLength();

然后,你就可以拿着这个length值到处玩耍啦。

 

最后,祝大家装 B 愉快吧~↖(▔▽▔)↗

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/frontend/html/124