接触principle也没几天，但是说实话是真的好玩

    今天刚在YouTube上看到一个大神撸了一把机器人，我想着就撸个猫吧。

不用担心，既然是新手教程，那肯定是最简单的

猫也很简单的

下面我们来说说具体步骤吧

第一步：先在sketch上画一只猫猫（这个我就不讲怎么画了，实在太简单，大家也可以想画啥就画啥），然后给你图层命好名

第二步：（额。你首先得有principle这个软件）打开principle，导入sketch文件，（它会自动导入你刚才画的猫的文件）

第三步：在图层最上方插入一个矩形图层，命名为driver（你随意），大小跟你画板一样大，

将driver的交互属性改为scroll

透明度调整到40%（这个只是为了看起来方便，后面会调到0）这时，你就能在预览区拖动driver这个图层，并且它会自动回到画板中心。

第四步：点击上方的driver按钮，会有出现一个时间轴工作区。全选你想让他们产生动画的所有图层，比如我想让猫头跟着我的光标旋转，那我就选中猫头部所在图层，然后给他们添加关键帧。

第五步：点击选中的图层右侧的加号添加centerx，按住空格键，将关键帧拖到中间一点

把时间轴拖到-140，选中猫脸所在的所有图层，点击后面的加号，打上关键帧。

选中猫的两个眼睛和嘴巴的图层，移动到右边一点（注意此时的关键帧应该是在-140的位置）

侧面的眼睛应该是长方形的，所以我们可以选中眼睛添加width属性，然后添加关键帧，再在左侧属性面板中更改width的值，效果如下：

脸也应该有相应的变化，我们可以让脸窄一点，所以选中脸图层，添加width属性

（其他效果也是在相应图层上添加，比如想让眼睛眨呀眨，就可以在眼睛图层添加height属性。也可以做其他属性，比如加一个投影属性，填充属性等，添加属性后记得要给属性图层打上关键帧，然后回到0的位置也要打上关键帧，且属性值做相应的调整，最后你时间轴上每一个点都应该有关键帧。打上关键帧的图层后面的图标是红色的，没打上就是蓝色的。）

第六步：左边也是一样的，将时间轴拖至140，给头所在的所有图层打上关键帧。选中猫眼睛和嘴巴，移动至左边一点，将猫脸变瘦一点（由于之前已经给了width和height属性，后面打关键帧就不用重复新增属性了，直接修改即可）

接下来是上面和下面

第七步：将时间轴拖至0的位置，选中头部所有图层，时间轴工作区会出现“6selected layers”，点击它后面的加号，添加center y（注意是scroll y面板下面的）。

将时间轴拖至-140的位置，给猫头图层打上关键帧。（可以发现矩形driver图层往下移了）这时我们选中眼睛和嘴巴图层，向下移动。给眼睛添加height属性，缩小height值。记得回去0的位置，打上关键帧，更改属性值。

第八步：将时间轴拖至140的位置，给猫头图层打上关键帧，同样的方法更改眼睛嘴巴和脸的属性，都要打上关键帧哟。

对了，猫头部有一个接收器，也是要小小的动一下的，这个就当是布置的作业吧，相信大家都会调的。

第九步：选中driver图层，将driver的opacity（透明度）改为0.这样就相当于猫猫的头部会跟着我们的鼠标动啦。

最后一步：屏幕录制gif（有iPhone的同学可以下一个principle mirror app，可以直接下载demo，然后用手机就可以在线撸猫啦）点击录制图标（如下图），然后自己拖动鼠标，让猫猫跟着你动

录制完成后，点击红色录制图标，结束录制。

点击export就可以了。如果小伙伴们想知道怎么导出iphone demo的，可以私信我呀。

是不是很简单呢，总结来说其实也就一个步骤重复4遍而已，喜欢可以关注编编呀！

Powered by Froala Editor