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的弹性动效让用户更能聚焦在表情上

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

未完待续……

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 【说明:本文是从Principle官网翻译过来的,因个人能力和水平有限,部分术语可能不准确,对软件功能的理解也可能...
    shea阅读 42,851评论 23 117
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 10,526评论 5 13
  • 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你...
    被吹落的风阅读 5,503评论 1 2
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 12,713评论 6 30
  • 人,越活着,越觉得身不由己…… 到底是什么束缚了我们的人生? 耳边总是听到一群人在说“我想……我想……我想……”,...
    解忧杂货铺小编阅读 4,547评论 0 1