点击右上方红色按钮关注“web秀”,让你真正秀起来

前言

通常我们说的 Web 动画,其实包含了以下三大类:

1、CSS3 动画

2、javascript 动画(canvas)

3、html 动画(svg)

3 种动画各有优劣,实际应用中根据情况作出取舍,本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。

SVG 的历史和优势(W3C)

在 2003 年一月,SVG 1.1 被确立为 W3C 标准。 参与定义 SVG 的组织有:太阳微系统、Adobe、苹果公司、IBM 以及柯达。 与其他图像格式相比,使用 SVG 的优势在于:

1、SVG 可被非常多的工具读取和修改(比如记事本)

2、SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。

3、SVG 是可伸缩的

4、SVG 图像可在任何的分辨率下被高质量地打印

5、SVG 可在图像质量不下降的情况下被放大

6、SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)

7、SVG 可以与 Java 技术一起运行

SVG 线条动画基础入门知识

MDN Web 有基本形状的文档,建议去看看。包含矩形、圆形、椭圆、线条、多边形、折线等等。

好了,有了基本的了解,我们继续今天的话题,SVG 线条动画。

SVG 线条动画

先看看效果图,然后想想如果是你,该怎么实现这个效果了?

svg动画怎么做(SVG基础入门知识到线条动画)(1)

SVG 线条动画基础入门知识

ok,像以前一样,我们先来解析一下(按步骤实现):

1、svg画个按钮(基础形状-矩形)

2、矩形只保留下方底边

3、实现鼠标:hover事件 动画效果

svg画个按钮

<div class="button"> <svg viewBox="0 0 320 60" version="1.1" xmlns="http://www.w3.org/2000/svg" > <rect class="shape" height="60" width="320"></rect> </svg> <div class="hover-text">Web 秀</div> </div>

添加样式

.button { position: absolute; width: 320px; height: 60px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .hover-text { position: absolute; line-height: 60px; width: 320px; top: 0; color: #1199ff; font-size: 28px; text-align: center; cursor: pointer; } .shape { fill: transparent; stroke-width: 4px; stroke: #1199ff; }

svg动画怎么做(SVG基础入门知识到线条动画)(2)

SVG 线条动画基础入门知识

button垂直水平居中、shape透明填充,边框宽度4px,边框颜色#1199ff。

也许你会对fill、stroke-width等属性有点懵,下面看看他们的描述:

  • fill:类比 css 中的 background-color,给 svg 图形填充颜色;
  • stroke-width:类比 css 中的 border-width,给 svg 图形设定边框宽度;
  • stroke:类比 css 中的 border-color,给 svg 图形设定边框颜色;
  • stroke-linejoin | stroke-linecap:设定线段连接处的样式;
  • stroke-dasharray:值是一组数组,没数量上限,每个数字交替表示划线与间隔的宽度;
  • stroke-dashoffset:则是划线与间隔的偏移量

重点讲讲能够实现线条动画的关键属性 stroke-dasharray 。属性 stroke-dasharray 可控制用来描边的点划线的图案范式。

SVG 矩形只留底边

这里我们给按钮添加stroke-dasharray:

.shape { ... stroke-dasharray: 160 520; stroke-dashoffset: -460; }

svg动画怎么做(SVG基础入门知识到线条动画)(3)

SVG 线条动画基础入门知识

SVG hover动画

.button:hover .hover-text { transition: 0.5s; color: pink; } .button:hover .shape { -webkit-animation: draw 0.5s linear forwards; animation: draw 0.5s linear forwards; } @keyframes draw { 0% { stroke-dasharray: 160 520; stroke-dashoffset: -460; stroke-width: 4px; } 100% { stroke-dasharray: 760; stroke-dashoffset: 0; stroke-width: 2px; stroke: pink; } }

hover时,改变文字颜色,利用stroke-dasharray和stroke-dashoffset实现动画效果。

后续文章将会详述非规则图形,如何使用 PS AI 生成 path 路径,实现 SVG 动画,敬请期待。

公告

喜欢小编的点击关注,了解更多知识!

源码地址和源文件下载请点击下方“了解更多”

,