Principle学习笔记1

Principle也许是目前对设计师最友好的动效软件，它最大的优点就是界面简单，左边是属性栏，中间是画布，右边是预览窗口，让你随时预览效果，及时作出调整；动画易用，无需代码，只需点击需要交互的画布或图层旁边的小闪电，选择触发的动作，拖动连接到目标画布即可，还能直接Import Sketch文档，麻麻再也不用担心我不会做动效了~~

经过对Principle的初步使用，我发现其实巧用里面的“三板斧”，很多常见的交互动效基本能够实现，大大减少了和产品、开发沟通的时间。

1.Angle，Scale，Opacity搭配使用效果更佳

很多交互动效都是通过角度改变、大小缩放和透明度渐变来形成自然的视觉效果，比如常见的圆形进度条和loading，就是通过有色圆环和白色遮罩层的旋转位移来实现的。

豆瓣loading

值得注意的是，Principle图层的角度变化是基于该图层的中心点的，如果要实现圆形旋转，需要为每一个交互图层添加一个辅助图形，例如添加一个正方形，正方形和旋转的圆形内切，中心点重合，把这个正方形的透明度设为0，并与交互图层组合，这样组合的中心点便是正方形的中心点，能与圆形同心旋转。

还有Material Design里面经典的触控涟漪效果在Principle里面也非常容易实现，只需要在控件位置添加一个圆形图层，设置触发时比例由小变大，透明度渐变为0，画面的视觉表达瞬间变得生动很多。

Material Design触控涟漪效果

搭配使用Angle，Scale，Opacity，然后慢慢调整时间轴（即时预览实在太方便！！！），让动画更加流畅自然。这些有趣的动效一方面可以提供反馈，另一方面还可以为APP增色，给用户制造小惊喜。

前段时间做的一个Twitter like（烟花效果始终不满意，求高手解救！）

2.动画曲线动起来

Principle科学的地方在于预设的动画曲线都是符合物理运动规律的，而且可以手动调整曲线路径（你想飞起来不走寻常路也可以有），生硬的线性运动有个小哭脸表示不推荐。

比较常用的是默认（Default）（因为懒……），还有缓入（Ease In）、缓出（Ease Out）、缓入缓出（Ease Both)，如果你想让动画变得生动活泼，可以用弹性运动（Spring），弹性比较吸引人的注意力，对于想突出的元素会有不错的效果。弹性和其他几个曲线不同，不是调整曲线而是设置拉力（Tension）和摩擦力（Friction），弹力越大反弹效果越明显。

Facebook emotions的弹性动效让用户更能聚焦在表情上

以上动画均为本人练习作品，如有雷同纯属巧合，如有不足欢迎指教！

未完待续……