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