Principle制作loading进度圈动效

最近在学习Principle，新学习了一个动效～速度可以自行调节。

loading看似简单步骤却感觉有点复杂，怕后续遗忘所以整理下来。

用Principle做一个简单基础的loading或进度圈动效，以下是教程以及参数：

- 底部圈圈

按照自行需要尺寸新建一个矩形（Principle简单粗暴，只有矩形工具，没有其他的形状）

· 半径调整为100他就变成了一个圆形

· 填充调成0%的透明度

· 描边宽度自己定，浅灰色，作为底圆运用。

以上底部圈圈就完成了，在后续的步骤也不会有任何的变动操作，注意好图层的名字，Principle所有的动效变化都是跟着组/图层名字走的。

- 圈圈动效

1、按照底部圈圈的尺寸复制一个，调整为表面圈圈的色值。

2、把圈圈单独新建组合（command+G），三次，得到三个组合文件夹。名称最好编辑好。

3、接下来是对组合分层好的文件夹进行编辑。

· 第一层，首先把「可点击」「裁剪子图层」勾上，然后拉动选框，把圈圈剪裁成一个半圆（左）

· 第二层，宽度高度改为0，角度改为-360，调整XY值，确保这个点在画面中居中

· 第三层，调整了第二层之后第三层出现了位移，首先把它调整回画面中心，然后同样勾上「可点击」「裁剪子图层」，把圈圈剪裁成一个半圆（右，这里跟第一层要是反向的）

4.同样的操作，反方向再做一遍。得到另一个3组合的圆圈。

这里唯一的区别是，右边第二层，角度调整为-180。

ook，以上第一个画板完成。

4、复制一个画板一～接下来编辑第二个画板，把刚刚编辑的右2层 原本的-180度改为0度

第二个画板完成。

5、复制一个画板二，把左2层原本的-360度改为-180度

以上画板编辑完成。

6、 链接画板选择自动，运动方式选择线性，转得快他就是个loading，转得慢就是个加载进度圈，1——2——3——1完成循环。

一个基础的转圈圈～就这么完成啦。