使用Facebook开源代码FBShimmering封装进度显示的ShimmeCircleView
使用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 = 1.f; _shapeLayer.strokeEnd = 0.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 > 0) { _shapeLayer.lineWidth = _shapeLineWidth; _shapeLayer.path = [self createCirclePath].CGPath; // 更新path } } - (void)doPOPBasicEndAnimationToValue:(CGFloat)value { [self doStrokeEndAnimationFromValue:_shapeLayer.strokeEnd toValue:value shapeLayer:_shapeLayer duration:(_strokeAnimationDuration > 0 ? _strokeAnimationDuration : 0.4f) timingFunctionName:nil]; } - (void)doPOPBasicStartAnimationToValue:(CGFloat)value { [self doStrokeStartAnimationFromValue:_shapeLayer.strokeStart toValue:value shapeLayer:_shapeLayer duration:(_strokeAnimationDuration > 0 ? _strokeAnimationDuration : 0.4f) timingFunctionName:nil]; } /** * 根据frame值创建圆形的贝塞尔曲线 * * @return 圆形的贝塞尔曲线 */ - (UIBezierPath *)createCirclePath { UIBezierPath *path = \ [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.height / 2.f, self.bounds.size.width / 2.f) radius:self.bounds.size.height / 2.f - _shapeLayer.lineWidth / 2.f startAngle:DEGREES__TO__RADIANS(-90) endAngle:DEGREES__TO__RADIANS(270) 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
以下是需要注意的地方：
以下是使用细节：
