svg系列：2.svg路径实现图片路径动画
时间：2023-04-05 13:41:46
HTML5
原文链接为了满足未来产品可能的动画需求，我们需要研究各种可行的前端动画技术。CSS3动画和JS动画相信大家都接触过很多，但是很少用到SVG技术。其实SVG也是一个强大的动画解决方案，可以帮助我们解决传统动画做不到的技术痛点。SVG简介SVG（ScalableVectorGraphics），可缩放矢量图形，具有缩放不失真的特点，可以用来制作矢量图形。SVG1.1于2003年1月14日成为W3CRecommendation。SVG本质上是用XML语言描述的，因此可以像DOM结构一样通过CSS和JS编程来控制，通过不断改变SVG图形属性来创建SVG动画。SVG可以用文本编辑器编辑，也可以用Adob??eIllustator等专业编辑软件处理。SVG文件可以单独使用，使用XML定义并包含DTD声明：在现代浏览器中，我们可以直接在HTML代码嵌入SVG代码：
SVG路径SVG可以画出很多形状，就不一一介绍了这里先放一个，但是重点说svgpath，它是svgshape中最厉害的一个，也是我们前端动画经常会用到的shape。顾名思义，路径定义了一组路径。您可以使用路径元素绘制矩形（直角矩形或圆角矩形）、圆形、椭圆、折线、多边形和一些其他形状，例如贝塞尔曲线、二次曲线等。path元素的形状由它的d属性决定，通常使用字母作为命令，如下：ArcZ=closepath以下路径定义了一个三角形：它从位置1500开始，到位置75200，然后从那里开始到225200，最后在1500处关闭路径。
注意：绘制复杂路径路径需要借助设计工具来设计越多越好。人工计算路径的d属性费时费力，不是当前学习重点。path其他常用的属性有：stroke定义路径颜色stroke-width定义路径宽度，stroke-dasharray用于创建虚线fill定义路径封闭区域的填充颜色基于svg路径实现图片路径动画点击这里查看demo：WPSLogoDemo这个效果的实现并不复杂。首先我们需要wps标志的svg资源，我们可以使用photoshop和AdobeIllustrator将图片生成svg路径。第一步用ps魔棒工具去掉白色背景，选择路径，然后右键创建工作路径：点击菜单->文件->导出->导出路径到ai：选择路径在ai中并将其保存为svg格式。然后在编辑器中打开svg可以查看路径的d属性！之后在代码中创建svg图形，并指定其stroke-width等属性。动画方面，使用css动画控制路径的stroke-dasharray属性实现动画。此属性可以将路径绘制为虚线。例如stroke-dasharray:10px20px;定义实线的长度为10px，空白的长度为20px，如下图所示：利用这个原理，我们逐渐将实线的长度从0变为路径的总长度，并改变空白的长度逐渐变为0的长度，可以实现类似“绘图”的效果~#wps-logo-path{animation:wpsLogo3sease-in-outforwards;}@keyframeswpsLogo{0%{中风-dasharray:01078px;}100%{中风-dasharray:1078px0;}}路径的总长度可以这样计算：$('#wpsLogoPath')[0].getTotalLength()在动画过程中，可以设置监听器，在动画的不同阶段执行不同的动作Hook函数：document.addEventListener('webkitAnimationEnd',function(e){}在代码中，我们还定义了一个线性渐变来填充路径封闭区域的背景值，fill:url(#wpslinear)至此，svg路径动画的demo基本完成，我们可以利用这个原理实现更复杂的svg路径动画，比如多条路径的过渡动画，物体沿不规则路径移动等。svg技术本身还是很复杂的，短时间内很难掌握svg，如果有需要可以使用svg动画库以达到预期的设计效果。以技术的灵活性来服务于产品。
