小编:五天Principle从入门到精通,一起来学习吧~
来到第二天课程的都是好同志~相信大家通过《五天Principle从入门到精通01-简单的Toast动画制作》已经初步了解了Priciple的基本操作。
另外文末有小福利哦~
1. Sketch文件的导入
首先,先把要把画好的Sketch文件打开;
再打开Principle,点File – Import From Sketch ,这里会直接显示你刚打开的Sketch文件名。
根据你的Sketch文件的大小选择 放大的倍数(例如:如果你画的是375*667的就选择2X,750的就选择1X)不选也可以,但是可能导出的画质不清晰。
这样就导入成功了,会了这个功能就可以将之前设计的sketch文件做动画了,Sketch强大的绘图功能 Principle的动画制作,完美!
2. 补间动画逻辑
谈到补间动画我们要先说逐帧动画,逐帧动画是最原始的动画,就是很多连续的图片排成序列,一张一张的播放,形成的“动画”效果。
补间动画是逐帧动画的升级版,不需要我们准备大量的图片形成的图片序列,只要做一些关键画面(一般被叫做关键帧)即可,系统识别关键帧之间的差异,帮助我们补齐关键帧之间的画面,形成动画。
Principle的动画制作逻辑是:每个画板就是关键帧
举例:
左图画板1即关键帧1,右图画板2即关键帧2,关键帧1中的方块在左边,关键帧2的方块在右边,我们添加补间动画的话,按照补间动画的逻辑,系统应该补足方块从左到右移动的所有的画面。
添加补间的方法:点击画板1旁边的闪电按钮,选择触发条件Tap拖到画板2上,补间动画就做好了。如下:
最简单的补间动画就完成了。
所以我们暂且把Principle的画板理解成关键帧。
透明度动画
我们接着上次的Toast动画做,我们把文字和底色框选,按command G成组,调节这个组的Opacity(透明度)属性到“0%”,如图:
ok啦!我们原本的移动吐司效果增加了透明度动画效果,动画如下:
是不是很像现在主流toast的感觉了?~
【案例】淘宝Toast
下面我们来模仿淘宝的成功加入购物车的Toast做一个动画,来强化一下我们学的知识。
淘宝原本效果如下:
首先分析一下动画中构成的元素,界面中一共有4层,从上至下依次
Toast
购物车选择栏
黑色半透明遮罩
内容层
以上的东西我们应该在Sketch中预先画好的(文末会附上源文件链接)。
动画分解
1.初始状态,内容层在最下面一直不动,上面盖着黑色的遮罩,再上面是购物车选择栏;
2.动画开始,购物车选择栏下移至底部消失,黑色半透明遮罩层透明度变成0,Toast出现;
3.接着,Toast停留1秒钟后缩小;
4.最后Toast透明度将为0 。
下面我们来实现这个动画
首先把Sketch文件导入Principle。
然后把内容层,遮罩,选择栏,依次叠放如图:
第二步