Principle教程一:卡片下落+侧滑菜单效果

入门Principle一周,致力于把适合用Principle实现的(简单大方有用的)动效上手做一遍,弄清实现的原理步骤,以及为何要这样呈现。一个经典耐用的动效一定有它吸引人的地方。

不得不说,只有亲自做了才能看清那些程序运转中跳动的微小细节,很精致,很美。


卡片下落效果常见于社交、新闻类app,在进入页面时用渐入的卡片视图展示主要内容。

侧滑菜单来源于Google原生控件Drawer Layout(抽屉式布局),点击右上角hanburger菜单图标,菜单右推进入页面。

整体效果如下:


为方便演示,画板间全部用auto跳转方式显示为自动播放。

第一个画板为空白,但实际包含即将掉落的全部图层,这些图层透明度为0%。

这说明一点:Principle中,只要是有动画效果的图层都需要在上一画板中“隐身”出现。如果上一状态中没有,图层会突兀地显现。


卡片掉落动画


在Animate动画中,首先掉落title和icon,然后从上到下依次掉落卡片,Y变化为Spring弹跳效果,所有卡片在0.3s内增加同一幅度。卡片之间错开大约0.1s的时间。


菜单侧移效果


首先明确一点,Principle中,不同artboard里相同名称的图层被看做同一物体,在动作中自动过渡为动画。而artboard 1中的所有控件做右移很麻烦,因此把它截为图片进行右移。但图片和原先图层不是同一物体,不能过渡为动画,所以在中间插一帧,把与图层一模一样的图片放在其中。这样,跳转到侧移的画板时就可以自然右移了。

侧和卡片掉落一样,侧移菜单中的A,B,C,D,E从先到后在Y上变化。原先的menu icon中两横分别做45°和135°的旋转,变为菜单中的cancel icon。图片除了X轴的变化外,scale也变小为0.7。

最后一帧,画板左移覆盖菜单,整个动画就完成了。


看得再多不如动手一试,

原型请见:

链接: https://pan.baidu.com/s/1o8ynvia 

密码: 6nse

推荐阅读更多精彩内容