有趣的动画(二):魔性的滚轮加载按钮

效果图

学习了CA和CG两个框架后一发不可收拾,学习各种动画制作的效果,以后也会持续更新。

这个效果的思路如下:

• 重写一个类JMMagicCircleBtn继承自UIButton,然后这个btn上面添加三个子控件:一个用于显示背景颜色并做动画效果的(UIView)bgView,一个用于显示文字内容的(UIbutton)frontShowBtn,一个旋转的圆圈。层次结构如图:

  
  层次结构

• 一定要注意,让自定义的btn.maskToBounds = NO,这样bgView在做图层变换的时候即使超出父视图也会显示。此时当点击自定义btn的时候,第一步先让bgView的bounds放大并将layer.cornerRadius变为最终的圆的半径,第二步隐藏frontShowBtn,显示spinner,并将bounds的长宽变为圆的直径。

• 执行完某些操作并将按钮恢复的操作是前面操作的逆步骤,详情见代码。

我已将该按钮进行了封装,可以直接使用了,代码在这里,欢迎Star!!!