Origami Studio制作mono logo走线动画

看到别人用ae制作mono logo动画并导出gif，然后拖入老版本的origami中做下拉刷新。

但是新版本的origami不支持gif，所以这个思路是行不通，于是想干脆在origami中实现这个logo动画行不行？

首先新建一个shape layer

在画布中回车选择triangle patch

将triangle同shape的shape端口连接，这时候在预览窗口看到一个三角形，把triangle里的third point的x设置成负数就能让三角形反向了。

我们只需要描边的三角形，所以把shape中color的不透明度设置为0，stroke中的color设置为白色、width 8、start 0、end 0.7（具体数值根据三角形的大小而不同，只需要让三角形的底部消失不见就行）

然后选中Shape图层command+G打包成组，并把组的大小设置为220x220，设置一个背景色方便预览。

把组中shapr拷贝一个，调节位置组成M就行。再重命名一下方便区分。

建组主要是方便以后的应用和调节，比如缩放只需要调节组的scale就行。

再绘制两个圆，并摆放到合适的位置就行。

---

接着开始制作描边动画效果

先调出repeating animation、transition，设置transition的start 0.7、end 0，然后将其连接并输出给左边线段的start端口，这时候就能看到线段来回伸缩了。

但我们要制作的动画并不是双向循环的，而是单向的，所以需要有一个判断 让线段在走完之后重新开始。

点击repeating animation的progerss端口，快捷键W 建立一个信号发射器（同信号接收器组合可以省略连线）命名为repeating signal，再shift+W 建立一个信号接收器。

调出equals，设置second value 1,通过not连接epeating animation的enable端口，再通过wait连接reset端口，wait的duration设置1s。

解释一下这里的逻辑，线段走完一个动画过程是从0～1，再回来是从1～0（仔细观察progress的值）。所以用equals判断信号=1时输出信号1断开not和enable的连接；同时信号=1时延时1s重制循环。循环重制的时候能自动打开enable，所以动画会重新开始。这样就做到了单向的循环动画。

if (progress = 1){

    ! enable on（动画停止）

    延时1s 重制循环

}

(瞎写的，能理解就行)

接着让左边的线段也走起来

调出delay，设置duration 2s、style when increasing,连接transition和右线段的start端口，并修改wait延时2s。具体时间和延时自己把握，现阶段为了观察方便所以把时间都设置的很长，实际每段动画最多0.4s。

将圆圈的z轴rotation设置为90°（因为线段的起始在底端）

具体patch设置和连线如下图

然后再优化一下时间和延时，最终的动画如下

当然了，如果只是为了制作走线动画，ae简简单单就能搞定，这里用origami做主要还是为了理解和熟练使用patch，另外这个循环动画是可以暂停的，比如下拉刷新时模拟刷新完成。