Principle也许是目前对设计师最友好的动效软件,它最大的优点就是界面简单,左边是属性栏,中间是画布,右边是预览窗口,让你随时预览效果,及时作出调整;动画易用,无需代码,只需点击需要交互的画布或图层旁边的小闪电,选择触发的动作,拖动连接到目标画布即可,还能直接Import Sketch文档,麻麻再也不用担心我不会做动效了~~
经过对Principle的初步使用,我发现其实巧用里面的“三板斧”,很多常见的交互动效基本能够实现,大大减少了和产品、开发沟通的时间。
1.Angle,Scale,Opacity搭配使用效果更佳
很多交互动效都是通过角度改变、大小缩放和透明度渐变来形成自然的视觉效果,比如常见的圆形进度条和loading,就是通过有色圆环和白色遮罩层的旋转位移来实现的。
值得注意的是,Principle图层的角度变化是基于该图层的中心点的,如果要实现圆形旋转,需要为每一个交互图层添加一个辅助图形,例如添加一个正方形,正方形和旋转的圆形内切,中心点重合,把这个正方形的透明度设为0,并与交互图层组合,这样组合的中心点便是正方形的中心点,能与圆形同心旋转。
还有Material Design里面经典的触控涟漪效果在Principle里面也非常容易实现,只需要在控件位置添加一个圆形图层,设置触发时比例由小变大,透明度渐变为0,画面的视觉表达瞬间变得生动很多。
搭配使用Angle,Scale,Opacity,然后慢慢调整时间轴(即时预览实在太方便!!!),让动画更加流畅自然。这些有趣的动效一方面可以提供反馈,另一方面还可以为APP增色,给用户制造小惊喜。
2.动画曲线动起来
Principle科学的地方在于预设的动画曲线都是符合物理运动规律的,而且可以手动调整曲线路径(你想飞起来不走寻常路也可以有),生硬的线性运动有个小哭脸表示不推荐。
比较常用的是默认(Default)(因为懒……),还有缓入(Ease In)、缓出(Ease Out)、缓入缓出(Ease Both),如果你想让动画变得生动活泼,可以用弹性运动(Spring),弹性比较吸引人的注意力,对于想突出的元素会有不错的效果。弹性和其他几个曲线不同,不是调整曲线而是设置拉力(Tension)和摩擦力(Friction),弹力越大反弹效果越明显。
以上动画均为本人练习作品,如有雷同纯属巧合,如有不足欢迎指教!
未完待续……