分享一则SVG动画

分享

为什么使用SVG

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

  1. 跨设备能力。SVG的全名是（Scalable Vector Graphic），它是矢量的，也就是说无论你怎么东拉西扯，它总是能够保持自己最好的状态，无论在何种尺寸的状态下，无论在那种屏幕里面呈现，它都不会有一丁点模糊，现在响应式的产品是主流，天知道用户会用什么样的设备来使用你的东西。这回设计师爽了，直接输出拿给程序员们就好了，他再也再也不会回来找你了，真的我保证。

  2. **透明通道。**SVG是可透明的，好用得就像PNG的透明一样，完全健康、正常。光这一条就少了无数坑了。

  3. **小，小很多很多。**大家都知道GIF动画有时候会很大，这就让网页的载入时间变得很长很长，耗费用户太多的流量，要知道现在流量是多么的贵啊，要知道超过五秒的等待时间用户就会把你无情的关掉啊。而且巨大的GIF图片即使在加载完成之后也要耗费非常多的资源来一直进行渲染，这会让整个体验变得非常的卡顿，而且我认为嘛，设计师们应该要在某种程度上做到提升产品性能的能力。

  4. **可交互的。**因为我们能用CSS或者Javascript对它进行控制，而且这个非常简单。

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

代码来了

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

<p data-height="489" data-theme-id="0" data-slug-hash="XdaeaQ" data-default-tab="html" data-user="Zyxscientist" class="codepen">See the Pen <a href="https://codepen.io/Zyxscientist/pen/XdaeaQ/">TextLogoAnimation</a> by Zhuyxuan (<a href="http://codepen.io/Zyxscientist">@Zyxscientist</a>) on <a href="http://codepen.io">CodePen</a>.</p> <script async src="//assets.codepen.io/assets/embed/ei.js"></script>

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

HTML部分: 首先通过SVG的<clippath>标签来设置蒙版，这里我们的蒙版是一行文字“Zyxscientist”。这里必须提到的是，我们必须要用<g>来装下<clippath>以及其之内的所有内容。如果不这样做的话，在某些浏览器中可能会出现动画无法正常运动的状况，在下也不知道为什么。 在一个<g>内定义了六个<rect>，用clip-path="url(#mask-path)"来指向我们上面用<clippath>定义好的蒙版，所以我们这六个方块的蒙版就是"Zyxscientisit"这行字，只有经过这行子的区域，我们才能看得到我们的<rect>。 HTML部分总体来讲就是这么几种元素，然而配合CSS却可以做出视觉效果并不单调的动画效果，这里体现出了SVG在动画方面的可塑性。

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

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

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

重新提一下，你可以到我的Github上面直接下载这段代码，然后自己玩起来。 以后有新文章新作品跟大家分享，除了会首发到ui中国之外还会发布到最近自己搭建的博客之上，希望大家多来逛逛，多交流

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