如何使用SVG及其动画技术为你的 Web 前端开发带来一些新鲜的体验

更新日期: 2017-11-14阅读: 3.3k标签: svg

任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战。设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验,对于那些对产品有着像素级完美追求的人这种体验差异尤其显著! SVG(可缩放的矢量图形)完美地解决了上文中提到的部分问题。尽管 SVG 有它的局限性,但是在某些场景下是非常有用的,如果你有一个好的设计团队,你也可以基于SVG创建一些震撼的视觉体验,而不必担心给浏览器带来过重的渲染负担或阻碍页面的加载时间。

在过去的几个月里,我一直在做一个大量使用了 SVG 及其动画效果的项目。在本文中,我将介绍如何使用SVG及其动画技术为你的 Web 前端开发带来一些新鲜的体验。


可缩放矢量图形

SVG 是一种基于 XML 文档的图片格式,所以大部分情况其特性表现类似于 html。它为许多常见的几何图形定义了不同的元素,通过组合这些不同的形状元素可以生成 SVG 二维图形。SVG 规范是由万维网联盟(W3C)于1999制定的标准,所有的主流浏览器目前均支持了 SVG 的渲染。由于 SVG 图形是 XML 文档,因此 Web 浏览器提供的 dom 相关的 api,同样可作用于与 SVG 图形的交互。

SVG 路径

如果要说出 SVG 中最强大的元素,毫无疑问是 (路径元素)。 路径元素是一个可以构建出你所能想象的几乎任何高级的2D图形的基本形状。路径元素通过一系列绘图命令来生效,它非常类似于1967年的 Logo 编程语言,不同的是它只是更现代化的,为复杂花哨的图形而设计的。这些绘图命令如下图所示,被写在路径元素的 d 属性中 :

<!-- A right-angled triangle -->
<path d="M10 10 L75 10 L75 75 Z" />


你可以把它想象成一支虚拟的画笔在屏幕上作画,而路径元素的 d 属性中的绘图命令控制着画笔的走向。上图的示例中,画笔一开始移动到起点坐标 (10,10) (M10 10),以 (75,10)为终点画直线(L75 10),接着又画一条直线至 (75,75) (L75 75),最后的 Z 表示画笔回到起点坐标以闭合路径。

使用一些其他的绘图命令,例如绘圆弧(A)、二次贝塞尔曲线(Q)、三次贝塞尔曲线(C)等等,你可以在 SVG 中创建出很多组合的形状和矢量图形。

你可以点击这里了解更多关于路径元素的知识 >> path element。


SVG 路径与 css

也许你会问:“好吧我知道 Paths 很强大,但是我怎样才能对它做路径动画呢?”。

因此我们第一步需要利用到 SVG 的两个属性: stroke-dasharray 和 stroke-dashoffset 。

stroke-dasharray 属性可以控制图案描边路径的样式,如果你并不想用连续的直线去绘制路径,而希望通过一些不同样式的虚线,你就可以使用这个属性。

由于 SVG 图形其实也是浏览器 DOM 的组成部分,因此 stroke-dasharray 作为一个控制外观的属性,也可以直接用作一个 CSS 样式属性,达到同样的设置效果。

类似的,stroke-dashoffset 属性(虚线在原路径下的偏移量)也同样可以使用 CSS 来进行设置。

这两个属性的组合使用可以生成 SVG 路径动画,给人一种图案的轮廓线逐渐拟合的视觉感受。

例如下面这个二次贝塞尔曲线的例子:


<path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

为了平稳流畅地绘制出这个路径,首先我们需要通过 stroke-dasharray 属性设置虚线段的长度,将 stroke-dasharray 属性的值设为该路径的长度。这样的话就将虚线的每一段 dash 和 gap 的长度等于整段路径的长。

下一步我们需要使用 stroke-dashoffset 属性将虚线的偏移量设置为 0,此时我们看到的路径描边就是没有间断的连续曲线(实际上看到的是虚线段的第一段,前面已经设置每一虚线段的长度等于该曲线的长)。通过设置虚线偏移量等于曲线的长度,那该曲线恰好“消失”(实际上看到的是虚线段的一段间隙)。

通过 stroke-dashoffset 属性,同时结合 CSS3 的 animation,你可以让该曲线一点点的出现在屏幕上,这就是 SVG 路径动画的原理。

<svg width="300px" height="175px" version="1.1">

   <path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

</svg>
svg {
 width: 300px;
 display: block;
 position: absolute;
 .path {
   stroke-dasharray: 320;
   stroke-dashoffset: 0;
   animation: dash 1s linear;
 }
 @keyframes dash {
   from {
     stroke-dashoffset: 320;
   }
   to {
     stroke-dashoffset: 0;
   }
 }
}


可以看到,我们只是改变了虚线的偏移来让虚线段的部分一点一点地出现。

运用相同的原理来设置多条路径的动画,可以得到更炫酷的效果:

<svg width="300px" height="175px" version="1.1">
 <path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
 <path fill="transparent" stroke="#FF2851" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="line2"></path>
 <path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="line1"></path>
</svg>

svg {
 width: 300px;
 display: block;
 position: absolute;
}

svg .line1 {
 stroke-dasharray: 340;
 stroke-dashoffset: 40;
 animation: dash 1.5s linear alternate infinite;
}

svg .line2 {
 stroke-dasharray: 320;
 stroke-dashoffset: 320;
 animation: dash2 1.5s linear alternate infinite;
}

@keyframes dash {
 from {
   stroke-dashoffset: 360;
 }
 to {
   stroke-dashoffset: 40;
 }
}

@keyframes dash2 {
 from {
   stroke-dashoffset: 280;
 }
 to {
   stroke-dashoffset: -40;
 }
}

上面在 SVG 中画了3条路径:其中一条是固定的黑色曲线, 有一条沿着路径移动的红色曲线,后面跟着另一条黑色曲线。

stroke-dasharray 和 stroke-dashoffset 是创造大量 SVG 路径动画所要用到的两个重要属性,你可以点击这里(一个方便的小工具)来体会这两个属性。


沿 SVG 路径的动画对象

通过 SVG 和 CSS,我们可以让一个对象或者元素沿着 SVG 路径做一些动效,过程中我们会用到两个属性:

  • offset-path:offset-path 是一个 CSS 属性,它表示元素的运动路径;

  • offset-distance:同样是一个 CSS 属性,定义了元素在路径上运动的距离,单位是数值或百分比;

通过组合使用这两个属性,你可以非常容易地创建出类似下面的动画:

<svg width="300px" height="175px" version="1.1">
   <path fill="transparent" stroke="#888888" stroke-width="1" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
</svg>
<div class="ball"></div>

svg {
 width: 300px;
 display: block;
 position: absolute;
}

.ball {
 width: 10px;
 height: 10px;
 background-color: red;
 border-radius: 50%;
 offset-path: path('M10 80 Q 77.5 10, 145 80 T 280 80');
 offset-distance: 0%;
 animation: red-ball 2s linear alternate infinite;
}

@keyframes red-ball {
 from {
   offset-distance: 0%;
 }
 to {
   offset-distance: 100%;
 }
}

上面我们让一个 div.ball 的元素动了起来,同样的我们可以对任何元素( div , image , text...)做这种路径动画。在这个例子中我们简单的用 offset-path 画出了元素的运动路径,然后用 offset-distance 控制元素在路径上的运动距离从 0% 到100%。


使用 JavaScript 做 SVG 动画

以上如果还不足以满足你的动画需求,你可以考虑借助 JavaScript。

使用 JavaScript 对 SVG 元素做动画与对 DOM 元素做动画相似。然而我们可以更容易地实现上面提到的动画效果。之前,我们需要将路径长度硬编码在 CSS 中。借助 JavaScript 的 path.getTotalLength() 函数可以获取 DOM 上路径的长度,你可以点击这里了解更多。除此之外,有很多第三方库可以帮助你十分容易地制作 SVG 动画。

Snap.svg 不仅可以使 JavaScript 绘制 SVG 图形变得更容易,它的使用也异常简单,只需要调用 .animate({}) 这个API即可。 另外一个库 anime.js 通过几行代码就可以让一个元素沿着 SVG 路径运动,点击这里 常看更多 DEMO。

如果你需要一个本身已经为你做了大部分操作来生成复杂的动画的库,Vivus 是比较适合你的,它采取了一种不同的调用方式,仅需要通过配置项的方式去生成 SVG 路径动画。你只需要用你想作用的 SVG 元素的 id 来新建一个 Vivus 对象,然后就交给 Vivus 来处理剩下的事情。


来源:http://mp.weixin.qq.com/s/vLiBG0YSQGieCO_7bIS7Cw


链接: https://www.fly63.com/article/detial/105

如何在vue项目中优雅地使用SVG

安装svg-sprite-loader。通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理,在static下新建svg文件夹,用来放置当做icon使用的svg,使用include,include和img做区分。然后修改webpack.base.conf.js配置,这样svg-sprite-loader只会处理我们指定的static/svg下的文件

封装全局icon组件 svg (仿造element-ui源码)

引入 svg-sprite-loader 插件,vue-cli项目默认情况下会使用 url-loader 对svg进行处理,会将它放在/img 目录下,所以这时候我们引入svg-sprite-loader 会引发一些冲突。使用 webpack 的 exclude和 include

通过css改变svg img的颜色

一般的解决办法有:1.字体图标改变css的color属性;2.js在hover事件中切换图片;3.老一点的方案是hover切换背景?但是为了更小的开销,一般css为更好的解决方案

一步步教你用 CSS 为 SVG 添加过滤器

SVG就存在了,但仍有一些有趣的方法去用它。在本教程中,重点将放在 SVG 的过滤器上 —— 但不只是将它们应用于 SVG 图像,我将向你展示如何将它们应用于任何常规页面的内容上。实际上我们是通过告诉 CSS 过滤器所拥有的 ID,然后再把过滤器应用于 SVG 的方式来实现。

SVG基础图形和D3.js

学习如何使用D3.js来创建这些图形?这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性。使用D3.js画一个SVG 的 圆 circle,可以使用如下代码创建:

关于Data URLs svg图片显示出错和浏览器URL hash #

在使用生成的svg图作为<img>标签是src值时,发现有部分浏览器显示异常,所以这里记录下,在<img src=\\\"Data URLs\\\">中,Data URLs格式与显示情况如下:

巧妙运用clip-path,实现CSS形状变换

CSS3的clip-path,这个clip-path看起来有点眼熟,因为它原本就存在于SVG里头,利用掩码(剪裁)的方法,连接坐标绘制掩码区域,就可以做出许多不同的形状,让底色或底图显现,随着浏览器对于CSS3的支持度大幅提升

使用SVG symbols建立图标系统完整指南

从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont。现在,一种全新的图标使用方式开始流行了起来——SVG symbols图标。

svg插入foreignObject无法响应事件

svg中可以通过foreignObject嵌入html,展示更丰富的样式。当需要给这中间的html绑定事件的时候,不管是使用委托和直接查询元素进行绑定的时候都无法生效。右键检查元素也检查不到具体的元素

svg的path的应用

我们这里只要用到M L A 和Z命令就可以了,M L 和Z命令比较简单,这里详细讲解A命令,A命令是画弧的命令,里面的A命令有 7个参数:rx ry x-axis-rotation large-arc-flag sweep-flag x y

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!