使用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

以下是需要注意的地方：

以下是使用细节：