Framer 制作path按钮动效
默认了解framer基本操作，尽量写的清晰易懂
path按钮很多人用各种动效软件临摹制作过，比如principle、flinto、origami、AE等，就还原度来说framer最高，有些时候我觉得代码能搞定的事情反而简单，origami各种path连线虽然也很好玩（摸索的时候），但真正到实现效果的时候看着满屏幕的连线和path也是很闹心的，AE的缺点是动画不可交互。
当然这次用framer临摹path动效也是学习为主。
把元素拖入framer的设计模式并安排好位置，这样可以少写很多初始化代码
设计模式
左边使用设计模式布局并优化了代码，右边是在framer没有设计模式时创建new layer引入切图来布局。左边的代码量比右边少了130行。
分析动画
这个动画的思路是，button点击后（onTap事件）旋转-135°（rotation）、mask不透明度0.6（opacity）、icon旋转弹出（rotation、position）可以写进AnimateA中，再次点击之后（onTap事件）button旋转0°，mask不透明度0，icon旋转收回可以写进AnimateB中。
仔细观察会发现，path的动画在收回时是先稍微往外旋转360°再收回的，其中因为同一个方法里layer的同一个属性不能产生多次变化，所以需要把这个往外旋转的动画写在另一个方法AnimateC里。这样整个收回的动画逻辑是，点击buttom后先执行AnimateC里往外旋转的动画，延迟0.3s再执行AnimateB里的收回动画。
第一次点击button后的动画
button点击之后旋转-135°，动画持续时间0.18s，动画曲线为“ease-in-out”。
mask在button点击后opacity变为0.6，动画持续时间0.2s，曲线为“ease”
重点是icon的动画，点击之后边旋转边弹出，但是在整个动画接近结束的时候会有一个很干脆的回弹效果，spring虽然也能做出弹性动画，但实际出来的效果不干脆且不够还原。(icon动画均以icon3为例)
所以我用new animation和onAnimationEnd事件制作了三段动画，虽然代码多了很多，但回弹的效果会干脆很多。
其他4个icon均如此
慢放并加大摆动幅度（方便观察）
正常速度和幅度
弹动的范围可以参考sketch中的预设
蓝色为位移的第一个位置和之后收回时往外旋转的位置，绿色为第二个位置，白色icon为第三个位置。
用for循环简化icon旋转的重复代码
第二次点击收回的动画
button和mask
然后是icon回到起始点，需要延迟0.3s，因为在移动前还需要旋转。
如之前说的一样，把icon旋转的动画写在animateC里。
到此为止animationA里是icon弹出的动画，animationC是icon收回时先旋转的动画，animationB是icon收回的动画。
接着就是通过点击事件来执行动画了。
补充：
选择需要折叠的代码右键fold或者command+enter
新版本可以通过左侧工具栏的添加事件、状态、动画等，layer属性也可以可视化调节，很方便
附件中是参考各元素位置的sketch文件和切图素材以及代码。
