Principle动效小教程——制作我的追波first shot动画

首先循例说一下Principle，这是一款交互动效制作工具，界面和sketch如出一辙，可以直接从Sketch导入元件进行设计，也可以直接把元件从Photoshop、Sketch拖到Principle里面。

（Principle界面）

下面直接开始制作：

【步骤一】点击左上角按钮插入一个矩形作为背景颜色，然后将追波logo从Photoshop拖到Principle，放到需要的位置

【步骤二】选中追波logo后，点击右边的闪电icon，从下拉选项中选择「自动」，将箭头指向画板1（就是自己所在的画板），软件会自动生成一个新画板，然后将logo调整到需要的位置

【步骤三】选中第二帧的追波logo，点击宽度和高度中间的锁icon解除比例锁定，将高度改为135（为了制造球落地的效果），角度改为180（上图蓝色框）

【步骤四】以同样的方法继续制作下面两帧，1）将追波logo移到中间，角度改为360；2）将追波logo移动到下方，预览一下动效

【步骤五】将「Hello dribbble」拖到画板5，将不透明度设置为0

【步骤六】这一帧将「Hello dribbble」不透明度设置为100，追波logo拉大到适合大小，不透明度设置为0，背景色不透明度设置为100

【完成】这样简单的小动画就制作完成了，一起来看看效果

这个动画一共用了6帧，原理和flash很类似，设置好关键帧，软件会自动补全补间动画，非常简单快捷，难怪Principle会作为交互动效工具越来越普及（虽然只能用于苹果系统）。

这个教程做得比较粗糙，其中很多细节都可以根据自己的想法调整，例如触发条件可以改为点击、长按，点击过渡箭头可以调整动画的时长和动态曲线，一起来试试制作，发现动效的乐趣吧。

最后附上我的追波链接，欢迎互粉 https://dribbble.com/GoSteven