使用Facebook开源代码FBShimmering封装进度显示的ShimmeCircleView
效果图：
静态图：
源码：
ShimmeCircleView.h 与 ShimmeCircleView.m
//
// ShimmeCircleView.h
// YouXianMingClock
//
// Created by YouXianMing on 14-10-13.
// Copyright (c) 2014年 YouXianMing. All rights reserved.
// #import <UIKit/UIKit.h> @interface ShimmeCircleView : UIView /**
* 时候开启闪光效果，默认是 NO
*/
@property (nonatomic, assign) BOOL shimmering; /**
* 当 shimmering 开启时，进入到闪光状态中的动画时间，默认值是 0.3.
*/
@property (nonatomic, assign) CFTimeInterval shimmeringBeginFadeDuration; /**
* 当 shimmering 结束时，从闪光动画退出到正常的时间，默认值是 0.3.
*/
@property (nonatomic, assign) CFTimeInterval shimmeringEndFadeDuration; /**
* The opacity of the content before it is shimmering. Defaults to 0.3.
*/
@property (nonatomic, assign) CGFloat shimmeringOpacity; /**
* The time interval between shimmerings in seconds. Defaults to 0.6.
*/
@property (nonatomic, assign) CFTimeInterval shimmeringPauseDuration; /**
* 圆的颜色，默认为红色
*/
@property (nonatomic, assign) UIColor *shapeColor; /**
* 圆的线宽度，默认为1
*/
@property (nonatomic, assign) CGFloat shapeLineWidth; /**
* 动画时间间隔
*/
@property (nonatomic, assign) CFTimeInterval strokeAnimationDuration; /**
* 更新shapeLayer(修改后必须更新path才能够生效)
*/
- (void)updateShapeLayer; - (void)doPOPBasicEndAnimationToValue:(CGFloat)value;
- (void)doPOPBasicStartAnimationToValue:(CGFloat)value; @end
//
// ShimmeCircleView.m
// YouXianMingClock
//
// Created by YouXianMing on 14-10-13.
// Copyright (c) 2014年 YouXianMing. All rights reserved.
// #import "ShimmeCircleView.h"
#import "FBShimmering.h"
#import "FBShimmeringLayer.h"
#import "FBShimmeringView.h"
#import "POP.h" /**
* 将角度转换为弧度
*
* @param d 角度
*
* @return 弧度
*/
#define DEGREES__TO__RADIANS(d) ((d) * M_PI / 180.f) @interface ShimmeCircleView () {
CAShapeLayer *_shapeLayer; // 形状的layer
FBShimmeringLayer *_showLayer; // 辉光的layer
} @end @implementation ShimmeCircleView - (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// 创建FBShimmeringLayer
if (_showLayer == nil) {
_showLayer = [FBShimmeringLayer new];
_showLayer.frame = self.bounds;
_showLayer.position = self.center;
_showLayer.shimmering = NO; // 默认设置关闭
_showLayer.shimmeringBeginFadeDuration = 0.3; // 开始进入闪光时候的时间
_showLayer.shimmeringEndFadeDuration = 0.3; // 从闪光进入没有闪光时候的时间
_showLayer.shimmeringOpacity = 0.3;
_showLayer.shimmeringPauseDuration = 0.6f;
[self.layer addSublayer:_showLayer];
} // 制造形状的layer
if (_shapeLayer == nil) {
_shapeLayer = [CAShapeLayer layer];
_shapeLayer.lineWidth = .f;
_shapeLayer.strokeEnd = .f;
_shapeLayer.strokeColor = [UIColor redColor].CGColor;
_shapeLayer.fillColor = [UIColor clearColor].CGColor; // 设置填充颜色为透明
_shapeLayer.path = [self createCirclePath].CGPath;
_showLayer.contentLayer = _shapeLayer;
}
}
return self;
} - (void)updateShapeLayer
{
if (_shapeColor) {
_shapeLayer.strokeColor = _shapeColor.CGColor;
} if (_shapeLineWidth > ) {
_shapeLayer.lineWidth = _shapeLineWidth;
_shapeLayer.path = [self createCirclePath].CGPath; // 更新path
}
} - (void)doPOPBasicEndAnimationToValue:(CGFloat)value
{
[self doStrokeEndAnimationFromValue:_shapeLayer.strokeEnd
toValue:value
shapeLayer:_shapeLayer
duration:(_strokeAnimationDuration > ? _strokeAnimationDuration : 0.4f)
timingFunctionName:nil];
} - (void)doPOPBasicStartAnimationToValue:(CGFloat)value
{
[self doStrokeStartAnimationFromValue:_shapeLayer.strokeStart
toValue:value
shapeLayer:_shapeLayer
duration:(_strokeAnimationDuration > ? _strokeAnimationDuration : 0.4f)
timingFunctionName:nil];
} /**
* 根据frame值创建圆形的贝塞尔曲线
*
* @return 圆形的贝塞尔曲线
*/
- (UIBezierPath *)createCirclePath
{
UIBezierPath *path = \
[UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.height / .f,
self.bounds.size.width / .f)
radius:self.bounds.size.height / .f - _shapeLayer.lineWidth / .f
startAngle:DEGREES__TO__RADIANS(-)
endAngle:DEGREES__TO__RADIANS()
clockwise:YES]; return path;
} #pragma mark - 重写各种setter方法
/**
* 重写shimmering的setter，getter方法
*/
@synthesize shimmering = _shimmering;
- (BOOL)shimmering {
return _shimmering;
}
- (void)setShimmering:(BOOL)shimmering {
_shimmering = shimmering;
_showLayer.shimmering = shimmering;
} /**
* 重写shimmeringBeginFadeDuration的setter，getter方法
*/
@synthesize shimmeringBeginFadeDuration = _shimmeringBeginFadeDuration;
- (CFTimeInterval)shimmeringBeginFadeDuration {
return _shimmeringBeginFadeDuration;
}
- (void)setShimmeringBeginFadeDuration:(CFTimeInterval)shimmeringBeginFadeDuration {
_shimmeringBeginFadeDuration = shimmeringBeginFadeDuration;
_showLayer.shimmeringBeginFadeDuration = shimmeringBeginFadeDuration;
} /**
* 重写shimmeringEndFadeDuration的setter，getter方法
*/
@synthesize shimmeringEndFadeDuration = _shimmeringEndFadeDuration;
- (CFTimeInterval)shimmeringEndFadeDuration {
return _shimmeringEndFadeDuration;
}
- (void)setShimmeringEndFadeDuration:(CFTimeInterval)shimmeringEndFadeDuration {
_shimmeringEndFadeDuration = shimmeringEndFadeDuration;
_showLayer.shimmeringEndFadeDuration = shimmeringEndFadeDuration;
} /**
* 重写shimmeringOpacity的setter，getter方法
*/
@synthesize shimmeringOpacity = _shimmeringOpacity;
- (CGFloat)shimmeringOpacity {
return _shimmeringOpacity;
}
- (void)setShimmeringOpacity:(CGFloat)shimmeringOpacity {
_shimmeringOpacity = shimmeringOpacity;
_showLayer.shimmeringOpacity = shimmeringOpacity;
} /**
* 重写shimmeringPauseDuration的setter，getter方法
*/
@synthesize shimmeringPauseDuration = _shimmeringPauseDuration;
- (CFTimeInterval)shimmeringPauseDuration {
return _shimmeringPauseDuration;
}
- (void)setShimmeringPauseDuration:(CFTimeInterval)shimmeringPauseDuration {
_shimmeringPauseDuration = shimmeringPauseDuration;
_showLayer.shimmeringPauseDuration = shimmeringPauseDuration;
} #pragma mark - 私有方法 /**
* StrokeEnd动画
*
* @param fromValue 初始值
* @param toValue 结束值
* @param layer 被动画的CAShapeLayer
* @param duration 动画时间
* @param name 动画时间类型,可以选择的类型如下:kCAMediaTimingFunctionLinear kCAMediaTimingFunctionEaseIn kCAMediaTimingFunctionEaseOut kCAMediaTimingFunctionEaseInEaseOut kCAMediaTimingFunctionDefault
*/
- (void)doStrokeEndAnimationFromValue:(CGFloat)fromValue
toValue:(CGFloat)toValue
shapeLayer:(CAShapeLayer *)layer
duration:(CFTimeInterval)duration
timingFunctionName:(NSString *)name
{
POPBasicAnimation *pathAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeEnd];
pathAnimation.duration = duration;
if (name) {
pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:name];
}
pathAnimation.fromValue = [NSNumber numberWithFloat:fromValue];
pathAnimation.toValue = [NSNumber numberWithFloat:toValue];
[layer pop_addAnimation:pathAnimation forKey:nil];
} /**
* StrokeStart动画
*
* @param fromValue 初始值
* @param toValue 结束值
* @param layer 被动画的CAShapeLayer
* @param duration 动画时间
* @param name 动画时间类型,可以选择的类型如下:kCAMediaTimingFunctionLinear kCAMediaTimingFunctionEaseIn kCAMediaTimingFunctionEaseOut kCAMediaTimingFunctionEaseInEaseOut kCAMediaTimingFunctionDefault
*/
- (void)doStrokeStartAnimationFromValue:(CGFloat)fromValue
toValue:(CGFloat)toValue
shapeLayer:(CAShapeLayer *)layer
duration:(CFTimeInterval)duration
timingFunctionName:(NSString *)name
{
POPBasicAnimation *pathAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeStart];
pathAnimation.duration = duration;
if (name) {
pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:name];
}
pathAnimation.fromValue = [NSNumber numberWithFloat:fromValue];
pathAnimation.toValue = [NSNumber numberWithFloat:toValue];
[layer pop_addAnimation:pathAnimation forKey:nil];
} @end
以下是需要注意的地方：
以下是使用细节：