Question

什么是可交互的SVG动画?它有哪些类型?

优秀的人机交互和舒适合理的动画，一直是 UX设计师孜孜不倦追求的目标。因为不同的客户需求，但是大家都希望在能减少设计工作量的同时，为一些动效增加可交互性，这样可以让特效更多样化，下面我们进入正题，青藤小编先带带大家啊来解下什么是可交互的SVG动画?

Answer 1

什么是可交互的SVG动画?

一般来说，常见前端动画实现方案分为三种，CSS3动画，HTML动画(SVG动画)，JS动画或者我们可以称之为Canvas动画。这里主要我们是要讲解的是SVG动画的实现方法。通俗来说，假如我希望动画内容是个性化的信息填充，这样我们就需要让 SVG 动画变成框架动画，动画的内容由后台给出再填充动画，最后呈现给使用者。或者我希望动画的播放进程是根据页面滚动来触发播放，同时动画会和页面的高度百分比同步进度。那这些想法的实现就需要让 SVG 动画来实现，设计师希望通过它能够提高用户体验。

SVG动画的类型

常见的SVG动画有三种实现方式，具体类型大家来看一下：

1.通过原生的SVG来实现，但是这种方法的实现效率较低，而且很多较为精确的动作比较难实现;

2.通过常见的SVG动画库来实现，比如svg.js，snap.js之类的来实现，可以实现比较灵活的交互，复杂的线性动画也是很难实现的;

3.结合PS,AI,CSS3来实现有，这种方法交互需要自己实现，相对会比较繁琐，但是优势就是可以实现一些复杂的线性动画,而且也要求你的知识面要广阔一些。

总之，作为交互动画的设计师，只用前端程序对接动画，这样最终我们才能做到动画和交互逻辑的完美落地。当然，想要了解更多交互设计相关资讯，请关注我们，下期咱们不见不散哦!