那天帅帅的设计师问我，什么样的动效比较好实现，我是这么回答他的：
突然想到他可能要做一些复杂的动效，无形中增加我的工作量，我又补了一句：你要是敢做得很复杂，后果自负。并且给他发了一张上次产品经理改需求的后果截图。
反正，设计师做的效果特别复杂，我们就很难实现，就要把他写进代码里，长得帅也不行。那什么样的交互动效才会让前端工程师不在代码里问候设计师呢？这就要说到前端实现动效的方式了。
常见的动效实现方式有如下几种：
CSS：
能实现一些可视属性和2D、3D变换，比如颜色、透明度、旋转、位移等。
实现代价较低，性能好，运行流畅，但效果有限。
css动画效果
SVG：
除了CSS能实现的以外，还可以实现一些特殊的效果，比如动态描边等。
实现方式和CSS类似，但有很多附加属性可以实现更丰富的效果，但浏览器支持不全。
SVG动画效果
canvas：
可以实现一些复杂的动效，比如开头设计师提到的粒子溅射。
较耗性能，效果丰富，代码量多。
canvas动画效果
这样，作为设计师的你就对前端代码如何实现动效有个大概的了解了。在以后的设计流程中，如果脑洞大开的你想要实现某个动效而又怕不好实现，就可以以此为参考，做一个前期评估。
当然，对于无需交互（指不用根据用户操作来改变状态）的动效，还有一种更高效的实现方式：gif。这样开发的工作量是最小的，但设计师的工作量会增加，如果你们家的开发很凶，可以试试这招。
PS:最后安利一个网站：codepen.io。这里有很多前端工程师写的各种效果，你想知道某种动效能否实现就可以上来搜搜。从此以后想做什么效果在codepen里搜出来给他们看，再也不怕他们骗你说“这个做不了”了。
网友评论