五天Principle从入门到精通02－Sketch的导入

接下来我们来完成上文提到的：

“购物车选择栏下移至底部消失”

垂直移动画板2的最顶层“选择栏”至画板2外，如图：

然后将黑色遮罩的透明度降低到0，如图：

做到这一步我们就可以看到一半的动画已经完成了。

但是这里的速度比较快，我们来学习下一个知识点，时间轴的调节。

时间轴在哪里呢？我们选中红框示意的那条线，屏幕下方就会出现一个时间轴。

我们拖动时间轴上的两个蓝色的柱子，可以调节动作什么时候开始，什么时候结束。蓝色柱子前的菱形就是动画启动的时间，尾部的菱形就是结束的时间，两个菱形可以单独调节。

然后按照我动画分解中题要的步骤一步一步做，加工一下Toast层，缩放的动作修改的是它的scale属性。

这是最后的版面。

动画效果如下

源文件地址：https://pan.baidu.com/s/1pLSEdYj

总结：

第二天，我们学习了：

· Sketch文件的导入

· 补间动画逻辑

· 透明度动画

· 【案例】淘宝Toast

· 缩放动画

· 时间轴的控制

预告：

第三天，我们将会学习

· Principle中对象的四个交互属性

· Principle动画触发条件

· 动画的分解

· 符合现实物理世界的动画