版权归作者所有，转载请注明出处
来看一下Principle都能实现那些“神奇”效果
前段时间应工作需要掌握一款动效软件，在众多主流动效软件当中锁定了Principle和Origami，于是尝试在上手难易度，实现效果能力，协同效率几个方面综合考虑选择一个进行学习。
第一印象，Principle偏向所看即所得的操作，倾向设计思维，Origami偏向逻辑控制，倾向于程序思维。
实现效果能力上Principle和Origami大体上基本都差不多，Origami在功能上更为强大一些，事件也比Principle更为丰富。比如Principle是没有计数类的触发事件的。Principle本身也不能处理图像模糊的效果。当然这些都可通过其他的手段代替最终展示出类似的效果。
协同效率上Principle和Origami都支持使用Sketch同步文件，然而在设计与下游协同的时候，Origami则是完爆Principle，Origami可以直接输出Xcode和android代码，这一点是Principle没有的。
所以总体来说，Principle比Origami会更容易上手。Principle是更注重如何便捷实现和展示动效。而Origami同时能直接反映动效真实的操作过程和逻辑。除此之外还能直接提供代码，方面下游的开发工作。
但尽管如此，在接触到Principle的时候还是被它的简单易用所吸引，非常适合短期内上手，所以最后还是选择了Principle。
那么，下面就来看Principle能实现那些“神奇”的效果以及它们是如何实现的。
一.动作跟随（神奇指数4颗星／实用指数2颗星 ／技术含量4颗星）
实现思路：
a）使用联动动画，使用一个透明为1%的drag形状作为联动触发体。（为什么是1%，因为在Principle中，0%透明度的形状是不能触发事件的。所以想要用一个载体触发事件又不想看到它就可以使用1%的透明度。）
例如上图中，超出窗口大小的顶层灰色图层就是触发体（调成了10%作为展示）
b）建立对应触发体xy坐标位置与表情各个器官的位置和大小的联动关系，把联动触发体分别移动到窗口上下左右的位置，移动每个位置时各个器官建立相应的联动属性，让表情看起来像是看向不同的方向，即可完成。
x轴位置上的关联
y轴位置上的关联
二.液体流动效果（神奇指数3颗星／实用指数3颗星／技术含量2颗星）
第一次看到这个效果的时候我也是被惊到了，以为Principle还有类似AE的形变功能，后来看到源文件才了解，原来是用数个圆形通过联动位移和缩放实现的。实现思路：
a）建立一组page，使用scroll x联动。page滚动动前，所有圆重叠在一起。
b）page滚动到1/3位置的过场，所有圆逐步x轴正方向移动，同时呈梯度变小
c）移动到1/2位置时，所有圆呈最小状
d）移动到1/3位置时，所有圆逐步变大
e）完成一页翻滚时，所有圆再次重叠
整个过程就是不断的调节每个圆移动和缩放的过度让它看起来像液体流动效果。
三.弧形下拉刷新（神奇指数2颗星／实用指数4颗星／技术含量2颗星）
其实就是通过x轴联动椭圆圆形成的效果。实现思路：
a）顶部栏地下其实有一个高度为1的椭圆
b）当卡片下拉到一定距离时，设置椭圆的高度为100左右
四.“粒子”字体效果（神奇指数3颗星／实用指数3颗星 ／技术含量1颗星）
实现原理很简单，就是很多看似杂乱圆形向上移动最终形成字体。实现思路：
a）以字体出场前在画板下方，字体出场后在画板中央，通过auto事件连接。
b）调节每个圆移动的时间和速度。让它看起来像是从错乱无章到形成一个字的效果。
五.跳跃打字效果（神奇指数3颗星／实用指数3颗星／技术含量1颗星）
纯粹通过基本的移动，旋转，透明度实现。实现思路：
a）打出每一个字的时候做一段弹出字母的动画，通过auto事件连起来就行了。
从第一个字到最后一个字每个如此，其实是纯体力活。
最后，Principle很容易上手，实现各种效果的原理也很简单，更多的是需要好玩的想法和耐心。另外“神奇效果”更多的是仅限娱乐，在实际交互工作中动效更多的是提供合理顺畅的转场，辅助用户认知操作和引导视觉焦点的作用，适当实用动效能增加产品的趣味性，但是滥用的话会使用户产生视觉疲劳和降低操作的效率从而适得其反。
周末愉快！
--By Rainnaw
