iOS(CAShapeLayer弧线)-点击时文字变转圈的按钮

iOS(CAShapeLayer弧线)-点击时文字变转圈的按钮_第1张图片

朋友说想要一个点击变成带缺口圆圈旋转的按钮,用来实现类似网络请求转菊花的等待效果。从网上了解了一下,决定使用CAShapeLayer来实现效果(因为我觉得可以很方便的画出带缺口的圆)。


整体功能我封装成一个button,使用方法和普通button一样。在需要停止动画的地方加上activityIndicatorViewShow:方法(传NO是取消动画,YES是开始动画)。

iOS(CAShapeLayer弧线)-点击时文字变转圈的按钮_第2张图片

以下是核心实现代码:

在这个方法里根据传入参数判断开始/取消动画。在开始动画的实现里,为了只显示弧线,将button本来的一些属性全部清除,并且以中心点缩小成方形,以方便旋转。在取消动画的实现里还原button。

iOS(CAShapeLayer弧线)-点击时文字变转圈的按钮_第3张图片

这里使用了CAShapeLayer,以button调整为方形的frame来画圆。因为是添加在button的layer上的,所以在取消动画的时候要清除掉。

iOS(CAShapeLayer弧线)-点击时文字变转圈的按钮_第4张图片

这里是添加的旋转动画,我用的是修改button的偏移角度来实现旋转动画。

iOS(CAShapeLayer弧线)-点击时文字变转圈的按钮_第5张图片

在demo里,CAShapeLayer的使用是从网上借鉴的,虽然使用的并不深奥,但也加深了了解。最后附上demo:http://www.oschina.net/code/snippet_2370909_56303

iOS点击时文字变转圈的按钮

你可能感兴趣的:(iOS(CAShapeLayer弧线)-点击时文字变转圈的按钮)