接下来我们来完成上文提到的:
“购物车选择栏下移至底部消失”
垂直移动画板2的最顶层“选择栏”至画板2外,如图:
然后将黑色遮罩的透明度降低到0,如图:
做到这一步我们就可以看到一半的动画已经完成了。
但是这里的速度比较快,我们来学习下一个知识点,时间轴的调节。
时间轴在哪里呢?我们选中红框示意的那条线,屏幕下方就会出现一个时间轴。
我们拖动时间轴上的两个蓝色的柱子,可以调节动作什么时候开始,什么时候结束。蓝色柱子前的菱形就是动画启动的时间,尾部的菱形就是结束的时间,两个菱形可以单独调节。
然后按照我动画分解中题要的步骤一步一步做,加工一下Toast层,缩放的动作修改的是它的scale属性。
这是最后的版面。
动画效果如下
源文件地址:https://pan.baidu.com/s/1pLSEdYj
总结:
第二天,我们学习了:
· Sketch文件的导入
· 补间动画逻辑
· 透明度动画
· 【案例】淘宝Toast
· 缩放动画
· 时间轴的控制
预告:
第三天,我们将会学习
· Principle中对象的四个交互属性
· Principle动画触发条件
· 动画的分解
· 符合现实物理世界的动画