用Principle绘制小动画的方法

Principle可以实现快速绘制小动画，但它最大的作用在于交互点击上的完美呈现，学会这个小动画基本就掌握了这款软件的快速运用了。

Principle这款软件交互友好，可视化操作，调节方便，适用于简单快速的动效需求；尚未接触的同学可以查看Principle 中文 ，仔细琢磨后就能轻松驾驭目前最好用的移动端 UX 原型设计软件，搭配 Sketch 那简直双剑合璧！

下面是网上自学的一只小猫的动效，练习完这只小猫基本就掌握了这款软件啦，已上传源文件，下面简要说下绘制要点，一起学习下～

首先，我们先用Sketch画出大体造型，形象很简单，会用sketch的童鞋应该都能画出来。尾巴部分需要注意下，转动部分画一个半弧形的尾巴，在principle里通过转动角度来实现，尾巴上方加一个白色图形进行遮罩。遮罩功能时principle中比较常用到的功能。

在sketch中画好图形可以实现直接导入到principle软件中。点击principle软件靠左的钻石图标默认导入当前sketch文件。

导入文件后，第一步要做的是建立触碰区域，也就相当于热点，有热点区域才能挪动图像。

热区就是左上角的矩形控件，将矩形形状覆盖在猫的脸上，然后在给这个形状添加移动属性，x轴y轴都选择Scroll。

添加完属性后点Drivers

相当于给这个触碰区域设置一个可以运动的赛道，在赛道上才能进行翻转、变换等各种动画效果。所以下面要做的事情就是点击需要变换的图层，然后挪动Drivers赛道距离通过配合赛道含有的各大属性来实现效果。

例如：选中脸部的编组，在x轴0的位置上点加号添加一个关键帧，点击蓝色按钮选择X，表示在水平位置上控制脸的左右移动。移动指针到 85打一个X的关键帧（即点击0处的蓝色按钮），此时形成一条蓝色的线，挪动线我们可以看到“控件”区域向左位移了，此时再调整左侧工作区中x轴数值，使得脸左移。

同理移动指针到 -80 再打一个X的关键帧，调整左侧工作区x轴数值，脸随着右移。

然后操作y轴，在scrlll y 轴0的位置上点加号添加一个关键帧，同x轴一样，左右打关键帧，在左侧工作区的y轴上调整脸上下位置的挪动即可。

通过在赛道上对x、y轴在各种模式下的左右挪动，配合工作区上、下、左、右、角度、不透明等数值变改变达到变化的效果。

接着就是时间轴的控制了，时间轴用来控制两个页面之间的跳转时间变换和形式。点击跳转的线条，下方出现时间轴，需要进行手动调节。
 

最后，就是录制了，点击录制的按钮，有三种录制形式：含圈圈、含鼠标、没有触碰点

当录制按钮闪烁时表示正在录制，再次点击录制结束可以选择gif、mov格式保存；
手机端下载mirror，可以同步查看动画效果，非常方便！

这篇好文章是转载于：学新通技术网