你有多久没做动效了？平时的工作主要是终端视觉设计，功能需求加运营需求，静态稿件加动效设计，从比例来看，动效设计其实不会占很多空间，但偶尔也会来一波。而实际场景往往是：需求是排满的，项目是紧急的，时间呢当然是很少的。一旦有了概念，落地当然是越快越好，效率至上。因此，做动效选对软件很重要。
目前市面上已经有很多动效原型设计的软件，AfterEffects，Keynote，Flash，Hype3，Flinto，Proto.io，Pixate，Origami，Framer...两只手已经快要数不过来惹，数不过来也学不过来。
学习一款新软件的过程并不轻松，新软件是否真的高效，很多软件与静态稿设计软件（PS、Sketch等）不能无缝衔接始终是一道坎，面对新的逻辑想要从初学者到轻松驾驭，时间也是个问题。看过上面提到的部分软件，也很想尝试，但一看见陌生的界面和新的逻辑内心就非常拒绝，始终难遇真爱。
痛并用着的After Effects
虽然After Effects软件很强大，拿来做动效很多人说是大材小用。但作为学渣我只会这一款，掌握的也都是非常基本的功能。在此之前我一直使用AE 来完成所有的动效相关的工作，但始终磕磕绊绊，心情略沉重：
1. 简单的动效无法敏捷设计
日常忙碌的工作中，做出的动效质量不高，因为精调成本太高，想要获得流畅、弹性的动效，需要各种精调布塞尔曲线、图像缩放。另外，使用AE渲染出的mov文件导入ps转化为GIF整个过程非常缓慢，如果是10秒以上的视频文件在ps打开每次都要等1分钟以上，如果是macbookpro还会因此开始呼吸，心疼...
2. 无法交互始终是痛点
作为视频处理软件，AE最终生成的是一个动效视频演示，更像是讲述了一个故事。而在界面的动效设计中，我们更需要的是（面向PM、开发者、用户测试的）基于真实场景的交互和使用体验。
3. 最终沦为纸上谈兵
没有具体的数值给开发，很难被完美落地实现。你的动效设定很难形容（通常都用时间描述＋跑去和程序员一起慢慢微调），感觉跟开发GG的代沟也越来越深...我们宝贵的工作时间和对动效的耐心与热爱就这样被这些不人性化的缺点给消耗掉。有没有一个新型的动效设计软件既能敏捷高质量地输出动效，又能帮到开发GG获取数值完美实现呢？
前所未有的高效－Principle
创始人语录
今天推荐一款非常感人的动效设计软件——Principle。前两天因为有个动效需求排期紧急，半夜搜寻新的动效软件无意发现，看了一下官网视频内牛满面地get了，隔天就用它出demo了。Principle在今年8月份诞生，来自前Apple工程师Daniel Hooper，找到创始人在Medium的QA访谈，Daniel Hooper认为A／B test或是客户的评价都不是衡量这款产品的成功指标，而是通过花费大量时间与设计师交流使用感受以获取方向，这么为设计师考虑，有点想哭。
了解Principle
官网基础教程的5个视频可以帮助快速了解基本操作，和学习Sketch一样查看Principle中文手册，英文原文可在Principle官网找到。Youtube可以搜寻到SketchTV录制的视频教程，太基础不推荐，和看完官网的5只视频效果一样。
（新软件太多，连学习过程也有规律了有木有：扒官网>找中文手册>找教学视频>设计网站膜拜大神跪求源文件）
没错，接下来就去dribbble搜寻用Principle制作的动画，下载源文件研究。
如果你是AE和Sketch的使用者，会对Principle有更为熟悉的认知：类似Sketch的界面＋AE的时间轴动画＋Keynote的神奇移动，外挂一个容易理解的联动功能，用于触发了某个事件发生的变化。
画布预设
预设画布
界面如此清切眼熟，和Sketch如出一辙。每个画布相当于独立的界面，也因此只要有联动变化，就需要新建一个画布，即使他们之间只有细微的差别。（需要注意的是这里屏幕尺寸是1/2）
方便的文件拖动
有无@2x文件拖动对比
图片可以直接拖进Principle，Sketch内的文件也可以直接拖进Principle使用，省去了切图的麻烦，注意拖拽前图片或文件需加上@2x的后缀（切图同理）。但如果设计稿经常发生更变，还是建议切图使用，因为可以在Principle直接替换切图而保留其动效设定。
支持的交互动作
包括点击、拖拽、长按、滚屏、自动循环等，可模拟3Dtouch。
窗口实时预览
提供一个预览窗口体验操作，运行效果界面跟设计界面本来就应该分离，开发者坚持这点真是太好了。
元素间自动生成补间动画
如果两个画布中文件名称一样但发生了变化，Principle就会自动像Flash一样为它创建一个补间动画。这里演示的动画除了画布间的Tap触发事件，对图形没有任何额外的操作，Principle根据4幅图之间的元素形状变化自动生成了补间动画。另外，可以快速调整补间动画的效果为缓入、缓出等或直接调整曲线。
导出mov、gif甚至追波稿
可以通过预览视图的录制工具录制视频并导出视频或GIF，导出时提供各种方便的尺寸设定。目前点击形状只能在圈和鼠标之间切换，分别适用于移动终端和web。
在手机上即时体验
如果是终端界面动效，在Apple Store下载Principle并用数据线与mac相连，打开principle立刻镜像出你的动效demo，拔掉数据线依然有效，可以欢乐地在手机反复体验，甚至拿去用户测试。而且任何修改都是即时呈现的。
手动获取动画数值
虽然暂不支持直接输出动画数值，但可以通过时间轴手动获取曲线的具体数值交给开发者去实现我们的设计。
好的软件会影响使用者
如果说Photoshop的原配是AE的话，Sketch的最佳拍档未来很有可能是Principle，至少目前为止他们一样高效、敏捷。
优点：
1. 交互友好，可视化操作，易上手，零代码。逻辑是继承性的，适用于有AE、Keynote、Flash的任何使用经验者
2. 轻松输出高质量的动效demo，预设动画曲线非常精妙，调节方便，适用于简单快速的动效需求
3. 高效精准，让你的想法快速落地进行用户测试，更直观地与开发分享动效细节
4. 爱上做动效这件事，因为做动效从未变得如此简单
改进的空间：
1. 每一次的变化都需要新建一个画布，如果是复杂的交互将带来多画布和繁琐的逻辑，整个动画地图会非常复杂（比如手上另一个抽奖场景动效，从抽奖过程到结果展示，这种故事性的行为还是需要用AE来完成）
2. 目前支持的动效功能比较少，只有xy轴位移、透明度、大小、旋转（已经可以做出很多精彩的效果）。初期版本肯定不如其他动效软件完整，比如z轴位移、重力插件、修剪路径这种（原来我知道的也很少...）
btw：本文没有进行软件对比之意，因为并没有深入了解文中提到的除AE之外的其他软件，勿撕。有时间的话最想入手了解的应该是Hype3和Flinto吧，欢迎交流学习。
以上
网友评论