【代码实现】只需数行代码即可实现的SVG动画_html/css_WEB-ITnose

作为设计师，如果能够用代码来实现一些动效，那真是极好的！

SVG这种图片格式今年来真是呈现一个越来越火的节奏，最近 “动效” 这个词非常的流行，产品们都恨不得能够在自己的所有产品上都加上炫目的动效，设计师们都恨不得在一夜之间都掌握所有制作动效的软件，而SVG的大热，或多或少都是拜这股洪流所赐。SVG与代码能打出非常好的配合，设计师们能够用简单的几行CSS代码就实现出许许多多动效，是的，再也不是做成GIF的“类动效”，而是实打实的代码实现的动效，并且真的非常简单。SVG除了能够很好配合你的CSS代码之外，还有许多别的优秀特性。

1. 跨设备能力。 SVG的全名是（Scalable Vector Graphic），它是矢量的，也就是说无论你怎么东拉西扯，它总是能够保持自己最好的状态，无论在何种尺寸的状态下，无论在那种屏幕里面呈现，它都不会有一丁点模糊，现在响应式的产品是主流，天知道用户会用什么样的设备来使用你的东西。这回设计师爽了，直接输出拿给程序员们就好了，他再也再也不会回来找你了，真的我保证。
2. 透明通道。 SVG是可透明的，好用得就像PNG的透明一样，完全健康、正常。光这一条就少了无数坑了。
3. 小，小很多很多。 大家都知道GIF动画有时候会很大，这就让网页的载入时间变得很长很长，耗费用户太多的流量，要知道现在流量是多么的贵啊，要知道超过五秒的等待时间用户就会把你无情的关掉啊。而且巨大的GIF图片即使在加载完成之后也要耗费非常多的资源来一直进行渲染，这会让整个体验变得非常的卡顿，而且我认为嘛，设计师们应该要在某种程度上做到提升产品性能的能力。
4. 可交互的。 因为我们能用CSS或者Javascript对它进行控制，而且这个非常简单。

这里必须声明的是，在下也才疏学浅，只能为大家列出这几条，SVG的优势或许还有别的许多。

接下来为大家讲解一个用到了SVG和CSS的logo小动画，大家如果感兴趣的可以到我的[Github](https://github.com/zyxscientist/textAnimation)下载全部代码慢慢研究，希望看完这则教程之后你能够立刻用带自己的产品上面去。

See the Pen TextLogoAnimation by Zhuyxuan ( @Zyxscientist ) on CodePen .

看吧，真的非常短小精悍，总体积不过几k。

HTML部分:首先通过SVG的标签来设置蒙版，这里我们的蒙版是一行文字“Zyxscientist”。这里必须提到的是，我们必须要用来装下以及其之内的所有内容。如果不这样做的话，在某些浏览器中可能会出现动画无法正常运动的状况，在下也不知道为什么。

在一个内定义了六，用clip-path="url(#mask-path)"来指向我们上面用定义好的蒙版，所以我们这六个方块的蒙版就是"Zyxscientisit"这行字，只有经过这行子的区域，我们才能看得到我们的。

HTML部分总体来讲就是这么几种元素，然而配合CSS却可以做出视觉效果并不单调的动画效果，这里体现出了SVG在动画方面的可塑性。

CSS部分:我们大概可以把整个动画分为三个小部分（详见下面呈上来给大家的timeline）。 第一部分： 首先看到的是我们的蒙版“Zyxscientist”先保持静止不动，而线面的六个元素由初始状态开始进行时长4s的运动。我们在CSS中设置了这里六个方形的颜色，所以当动画开始，这六个元素路过蒙版的时候可以看到一个上色的效果。 第二部分： 让第二部分的动效反过来再放一遍，这是通过keyframes来设定的，我尝试过两个部分分开写，但是这会让它们之间存在一些微小的卡顿，将它们一次性写到同一个keyframes里面可以避免这样的情况发生，尽管这样会丧失一些灵活性。 第三部分： 我们开始让蒙版开向右运动，让蒙版和下面的元素重合的部分只剩下一个'Z'字母，以得到我们看见的最后的效果。

CSS部分稍微长一些，但是思路还是很简单的。

好了，见天的分享就到这里先啦,如果多人喜欢的话我会继续给大家分享更多关于SVG动画的东西。

重新提一下，你可以到我的 Github 上面直接下载这段代码，然后自己玩起来。

以后有新文章新作品跟大家分享，除了会首发到ui中国之外还会发布到最近自己搭建的 博客 之上，希望大家多来逛逛，多交流。

最后的最后，希望有大神能够指出上面代码写得naiev的地方。