SVG 路径动画

简单百搭普普通通平平无奇 SVG 路径动画优化网站效果, 如何实现一个 SVG 进度条动画以及虚线走马灯动画

我习惯于使用 canvas 来做一些动画效果,数据展示或者图片处理之类的。SVG 和 Canvas 的功能类似,但应用场景又完全不同,各有各的特点。最近有用到一些 SVG,补补~~~

Canvas 和 SVG 的区别

  • canvas 以像素点为单位,而 SVG 是矢量图形,即放大图像不会失真,不依赖分辨率,对于 ui 同学来说大概就是 photoshop 与 illustrator 的区别了。

    • canvas 依赖分辨率,适合图片处理,可以做一些图片裁剪合成之类的功能。
    • SVG 放大不失真的图形展示当然很好,但矢量图之所以不会失真是因为保存了图形的线条和图块,所以渲染速度会和图形的复杂度成正比,这也表示 svg 非常适合用来绘制扁平化的图像,比如常用的 icon 或者扁平风格的 logo。
  • canvas 通过 js api 绘图,而 SVG 基于 XML 文档。

    • 在 XML 这一点上来说 SVG 因 DOM 方法而拥有的交互能力的确是吊打 Canvas。
    • Canvas 是一张画布,通过 js api 在渲染上下文中进行清除重绘,相比于 SVG 操作 DOM,Canvas 会更适合复杂的场景。

SVG 圆形百分比动画

效果戳这儿,可以看到就是两个简简单单普普通通的圆和一个数字,蓝色圆形从无到有的绘制过程就是进度条的状态

img.png

在这个例子里,我本来只想展示 svg 动画,但考虑到毕竟是在实现一个进度条的场景下,所以为了完整的效果还是用了 js 来动态改变数字,但 js 也只改变了数字,而动画是纯html

我之前也有分享过用 canvas 写的一个环形百分比动画,[戳这儿][https://mser.xyz/canvas-store/roundPercent/index.html],但比起 svg 纯 html 的代码,canvas 依靠 js api 重绘就显得复杂许多。

肉眼可见,这个例子的流程:

  1. 画一个完整的白色的圆形,这一步就很简单,普普通通 cycle 标签
<circle cx="50%" cy="50%" r="44" fill="none" stroke="#fff" stroke-width="8"></circle>

2.在白色圆形之上再重叠一个圆形,带有渐变填充以及发光的效果。也是普普通通 cycle 标签,但是 stroke 填充从单色改为了渐变,那么如何做一个渐变色呢?看 linearGradient 标签,再通过 filter 和高斯模糊 feGaussianBlur 来做出发光的效果。

<defs>
  <linearGradient id="gradient">
      <stop offset="0%" stop-color="#10a5ff" />
      <stop offset="50%" stop-color="#03c6fd" />
      <stop offset="95%" stop-color="#11ffe4" />
  </linearGradient>
  <filter id="shadow" width="150%" height="150%" x="-25%" y="-25%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="6"/>
      <feBlend in="SourceGraphic"  mode="normal" />
  </filter>
</defs>
<circle
  cx="50%"
  cy="50%"
  r="44"
  fill="none"
  transform="rotate(-90 70 70)"
  stroke="url(#gradient)"
  filter="url(#shadow)"
  stroke-linecap="round"
  stroke-width="8"
  stroke-dasharray="276"
  stroke-dashoffset="276"
></circle>

3.动起来!!!让蓝色圆形从无到有,逐步变成一个完整圆形。

<animate id="progress" attributeName="stroke-dashoffset" attributeType="XML" from="276" to="0" dur="2s" fill="freeze"></animate>

重点就是这第三步了,动画效果是通过 animate 标签实现的,这个标签与 css3animation 类似,从一个配置逐步过渡到另一个配置,css3 变化的的是样式配置,但 animate 标签过渡的是标签的属性,在这个例子中变化的属性是 stroke-dashoffsst,但真正理解这个例子我们还需要了解 stroke-dasharray

我这里就不赘诉了。可以通过 MDN 的 文档了解,stroke-dasharraystroke-dashoffset,css-tricks 的两篇文章也很不错可以帮助理解 stroke-dasharraystroke-dashoffset

SVG 虚线走马灯动画

我们进一步运用这两个属性,让 dasharray 的虚线动起来,戳这儿,这个动画也用在了博客首页上。

这个例子是四条不同颜色的虚线叠加,再通过 dashoffset 偏移让其动起来

img.png

推荐阅读更多精彩内容

  • 1. svg坐标系统 对于所有元素,SVG使用的坐标系统或者说网格系统,和Canvas用的差不多(所有计算机绘图都...
    何幻阅读 2,042评论 0 0
  • 今天在codepen看到一个效果如下: 觉得十分有趣,作者是SVG结合canvas完成的,里面所有的路径部分是SV...
    泱泱悲秋阅读 4,126评论 1 11
  • layout: posttitle: "svg自定义路径动画"subtitle: "svg ...
    thunderQin阅读 14,932评论 3 10
  • 尝试使用 Svg 实现简易的动画效果。有关 Svg 的具体知识点不在此文赘述,仅就所举示例的需求点阐述实现思路。 ...
    呆恋小喵阅读 1,690评论 0 3
  • 之前用D3制作图表是初次接触SVG,当时只顾感叹D3的强大了。后来当看到网站 Serio Verify 的时候,才...
    Evelynzzz阅读 2,000评论 0 1
  • 最近重构博客,浏览了许多很酷炫的网站,发现他们的logo很多用到了描边动画。仔细研究一番,发现其实还蛮简单的。主要...
    空腹熊阅读 3,010评论 0 4
  • 先看一个动画效果,这种小飞机沿路径飞行(路径部分线段变成绿色是录屏软件出了问题)。 这种动画效果最常见于发送信息后...
    泱泱悲秋阅读 3,645评论 3 11
  • canvas 和 webGL 这两项图形技术结合 css3 可以说能完成绝大部分的动画和需求。但 canvas 和...
    jeffzhong阅读 674评论 0 3
  • 栅格图形 & 矢量图形 栅格图形,也叫做点阵图,位图(bitmap),像素图,图像是由像素构成的,像素的多少将决定...
    qlcola阅读 2,296评论 0 0
  • 在生活中比较常见的是直线进度条,但是圆形进度条的实现相对有意思,我个人总结了两种圆形进度条的实现方式。 svg实现...
    xurna阅读 1,476评论 0 1
  • 使用 SVG + CSS 实现动态霓虹灯文字效果 来源:segmentfault.com 「React 开发者」优...
    火锅小王子00阅读 323评论 0 0
  • css3 首先摆上那个灰色的圈 然后盖上一个蓝色的半圈(由一半的蓝色和一半的透明border组成) 让它转起来 把...
    景阳冈大虫在此阅读 1,205评论 0 6
  • 1.svg文件引入 可通过 , 引入使用 理论上同样可以使用 img 元素,但是在低于4.0版本的Firefox...
    Jmingzi_阅读 214评论 0 0
  • @(HTML5)[canvas与SVG] [TOC] 十一 、SVG HTML体系中,最常用的绘制矢量图的技术是S...
    踏浪free阅读 4,090评论 0 2
  • 一、学习链接 阮一峰-SVG 教程[https://wangdoc.com/webapi/svg.html] 菜鸟...
    春风本是人间客阅读 2,700评论 0 0
  • Substrate的transaction-payment模块分析 transaction-payment模块提供...
    建怀阅读 7,398评论 0 4
  • 16宿命:用概率思维提高你的胜算 以前的我是风险厌恶者,不喜欢去冒险,但是人生放弃了冒险,也就放弃了无数的可能。 ...
    yichen大刀阅读 5,270评论 0 4
  • 公元:2019年11月28日19时42分农历:二零一九年 十一月 初三日 戌时干支:己亥乙亥己巳甲戌当月节气:立冬...
    石放阅读 6,320评论 0 2
  • 年纪越大,人的反应就越迟钝,脑子就越不好使,计划稍有变化,就容易手忙脚乱,乱了方寸。 “玩坏了”也是如此,不但会乱...
    玩坏了阅读 1,800评论 2 1
  • 感动 我在你的眼里的样子,就是你的样子。 相互内化 没有绝对的善恶 有因必有果 当你以自己的价值观幸福感去要求其他...
    周粥粥叭阅读 1,453评论 1 5