本文翻译自CSS-TRICKS的站长CSS大牛CHRIS COYIER(同时也是Codepen的站长)的文章《How SVG Line Animation Works》,文章不逐字翻译,以意译为主。
另外说一句,本博客发表的文章《SVG奥林匹克五环动画》用的也是这个原理,总是感觉说不清原理,同时学习下大牛的表达方式。
我打赌你们所有人都看到过一个超酷的效果,SVG的路径绘制动画。Jake Archibald曾经首先解释过其技术原理,并且写了一篇交互十足的博客进行阐释,Brian Suda也在24
Ways上写了一篇文章,在一个自主博客中谈到了多边形的超牛效果,Codrop上也有一些优雅的案例。
除非我脑子里弄明白,一般我很少写出来,所以当它打动我的时候,我觉得我应该把它再写出来。
1. 呐,你有一个SVG Shape
2.这个Shape必须有stroke
3.Stoke可以是虚线
我们可以使用Illustrator绘制图形,也可以通过编程实现。让我们来看看CSS应用虚线
<svg ...>
<path class="path" stroke="#000000" ... >
</svg>
.path {
stroke-dasharray: 20;
}
这样我们可以得到一个20px的虚线
4.这个虚线可以更长点,效果见下图。
.path {
stroke-dasharray: 100;
}
5.我们可以offset虚线,实现动画,效果见下图。
.path {
stroke-dasharray: 100;
animation: dash 5s linear;
}
@keyframes dash {
to {
stroke-dashoffset: 1000;
}
}
6.现在想象下,如果虚线足够长到正好覆盖整个图形。
你只要给stroke-dasharray属性一个足够长的值,需要超过图形中线的长度。
7.移动stroke使它正好不覆盖整个图形。
8.好的,将stroke-offset的值移动到0,实现动画。
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
Tata!大家可以到CHRIS COYIER的codepen在线看看效果。
但是,为什么要使用js?
几乎所有的SVG线框绘制动画都是用js,那是因为我们很难知道描边的确切长度,我们在上面的教程里看似随机的使用了一个非常合适的长度1000.
你可以通过貌似下面的代码获得长度
var path = document.querySelector('.path');
var length = path.getTotalLength();
好了,现在你可以随时使用了。
---------------------------------------------------------------
前端开发whqet,关注web前端开发技术,分享网页相关资源。
---------------------------------------------------------------
分享到:
相关推荐
Android中使用SVG实现炫酷动画效果Android中使用SVG实现炫酷动画效果
Qt实现显示svg图片,并可拖动鼠标旋转,新人做的效果不是很好。环境ubuntu16.04+Qt5.6.1,本人新测代码在WIN7+Qt环境下可用。
使用js+canvas绘图,结合svg图形,实现标尺栏和网格效果。
svg技术实现基于web的gis。。为地图编辑提供一些资料
网络资源拿出来与大SVG是目前最火热的图像文件格式,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形,它是基于XML,由W3C联盟进行开发...SVG可以实现无损缩放,在性能上要比其它格式的图片更好家共享
WMF转PNG EMF转PNG 工具类,使用wmf2svg 来实现wmf转svg 用batik jar实现svg转png 这种转换 不存在图片丢失等问题!
针对SVG在3D图形的描述与绘制上存在局限性的问题,提出了一种SVG的3D实现方法;详细介绍了SVG的2D坐标系到3D坐标系的转换原理,给出了转换到3D坐标系后的SVG-3D图形的绘制与操控流程,并以在3D场景中绘制一个正立方体和...
HTML5基于SVG实现可拖拽和缩放的世界地图效果源码.zip
前端,可视化大屏,纯css3+svg动画实现流转动画
原生js实现简单的svg编辑器,通过工具栏生成并操作svg图像,主要实现了rect、circle、ellipse、line四个基础图形的编辑
Android使用SVG矢量图打造酷炫动效!
SVG编辑器 Qt加C++实现,可放缩的矢量图形编辑器
全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG...
HTML5中的SVG属性实现圆形进度条效果:现在很多手机版网页,或者比较高版本的页面中,我们经常碰到一中圆形的百分比进度效果,这个其实用HTML5 中的SVG实现起来比较容易,而且看起来比较高
实现SVG图片的Pan and Zoom 功能
使用场景:很多时候下载的图片都是SVG矢量文件,不适用于需要 ico图片 的场景。 举例说明:比如,iconfont网站上下载的图标资源。 功能描述:此程序使用Python编写 1. 可以将 单个SVG图片文件 转换为 【128/64/48/32...
svg.js和jquery实现连线功能,(html网页)。svg.js和jquery实现连线功能。
javascript实现svg导出图片
HTML5 Canvas+SVG实现的彩色水泡分裂动画特效源码
在svg中实现组件拖动效果,完整的DEMO,可使用浏览器直接打开浏览