通常我们说的 Web 动画,其实包含了以下三大类:
1、CSS3 动画 2、javascript 动画(canvas) 3、html 动画(SVG)
3 种动画各有优劣,实际应用中根据情况作出取舍,本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。
在 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 技术一起运行 8、SVG 是开放的标准 9、SVG 文件是纯粹的 XML 10、SVG 的主要竞争者是 Flash。
与 Flash 相比,SVG 最大的优势是与其他标准(比如 XSL 和 DOM)相兼容。而 Flash 则是未开源的私有技术。
可缩放矢量图形,即SVG,是W3C XML的分枝语言之一,用于标记可缩放的矢量图形。(摘自MDN)
上面代码中,先谈谈 svg 标签:
<svg>
的版本,目前只有 1.0,1.1 两种有了 svg 标签,我们就可以愉快的在内部添加 SVG 图形了
MDN Web 文档有基本形状的文档,建议去看看。包含矩形、圆形、椭圆、线条、多边形、折线等等。
好了,有了基本的了解,我们继续今天的话题,SVG 线条动画。
先看看效果图,然后想想如果是你,该怎么实现这个效果了?
ok,像以前一样,我们先来解析一下(按步骤实现): 1、svg画个按钮(基础形状-矩形) 2、矩形只保留下方底边 3、实现鼠标:hover事件 + 动画效果
<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;
}
button
垂直水平居中、shape
透明填充,边框宽度4px,边框颜色#1199ff
。
也许你会对fill
、stroke-width
等属性有点懵,下面看看他们的描述:
重点讲讲能够实现线条动画的关键属性 stroke-dasharray 。属性 stroke-dasharray 可控制用来描边的点划线的图案范式。
这里我们给按钮添加stroke-dasharray
:
.shape {
...
stroke-dasharray: 160 520;
stroke-dashoffset: -460;
}
.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 动画,敬请期待。