iOS之UI--辉光动画

前言：学习来自YouXianMing老师的博客：《辉光UIView的category 》以及YouXianMing老师的github源码：《 GlowView》

　　   而我个人考虑到分类的二次拓展性(或者是再一次拓展)不是特别好，所以将YouXianMing老师的用分类拓展的辉光动画，改写成一个继承CALayer的可拓展的普通类。

　　　一方面，也是作为自我训练编码，对辉光UIView的实现所使用到的上下文绘制、核心动画、GCD中的定时器以及Runtime动态添加属性等知识进一步的熟练运用和提高。

　　   个人经验不足，也许观点片面，读者尽量指出，我不会介意的。嘻嘻。

先展示效果图：

 源码下载地址：https://github.com/HeYang123456789/UIView

源码：

//
//  GlowLayer.h
//  GlowView
//
//  Created by HEYANG on 16/1/30.
//  Copyright © 2016年 HeYang. All rights reserved.
//

#import <UIKit/UIKit.h>

//                                     == 动画时间解析 ==
//
//  0.0 ----------- 0.0 ------------> glowOpacity [---------------] glowOpacity ------------> 0.0
//           T                T                           T                           T
//           |                |                           |                           |
//           |                |                           |                           |
//           .                .                           .                           .
//     hideDuration   animationDuration              glowDuration              animationDuration
//

/**
 *  需要考虑的参数
 *  
 *  需要考虑的逻辑
 *      1.数值越界问题，通过懒加载
 *      2.动画时间的安排(看前面的动画时间的解析)
 *
 *  需要对外公开的接口
 */


@interface GlowLayer : CALayer

#pragma mark - 对外公开的属性

#pragma mark 设置辉光效果
/** 辉光的阴影半径 */
@property (nonatomic,strong)NSNumber *glowRadius;
/** 辉光的透明度 */
@property (nonatomic,strong)NSNumber *glowOpacity;

#pragma mark 设置辉光的时间
/** 保持辉光的时间，默认设置为0.5f */
@property (nonatomic,strong)NSNumber *glowDuration;
/** 不显示辉光的时间，默认设置为0.5f */
@property (nonatomic,strong)NSNumber *hideDuration;
/** 辉光的变化时间，从明到暗或者是从暗到明，默认设置为1.f */
@property (nonatomic,strong)NSNumber *glowAnimationDuration;


#pragma mark - 对外公开的接口

/** 在原始的View上创建出辉光layer */
-(void)createGlowLayerWithOriginView:(UIView*)originView glowColor:(UIColor*)glowColor;

/** 显示辉光 */
-(void)showGLowLayer;

/** 隐藏辉光 */
-(void)hideGlowLayer;

/** 开始循环辉光动画 */
-(void)startGlowAnimation;

/** 暂停辉光动画 */
-(void)pauseGlowAnimation;

/** 重启辉光动画 */
-(void)reStareGlowAnimation;

@end

@interface UIView (GlowViews)

/** GlowLayer */
@property (nonatomic,strong)GlowLayer *glowLayer;


/** 创建GlowLayer，默认辉光颜色为红色 */
-(void)addGlowLayer;
/** 创建GlowLayer，需要设置辉光颜色 */
-(void)addGlowLayerWithGlowColor:(UIColor*)glowColor;

/** 插入辉光 */
-(void)insertGlowLayerToSuperlayer;

/** 完全移除GLowLayer */
-(void)removeGlowLayerFromSuperlayer;
@end

//
//  GlowLayer.m
//  GlowView
//
//  Created by HEYANG on 16/1/30.
//  Copyright © 2016年 HeYang. All rights reserved.
//

#import "GlowLayer.h"

@interface GlowLayer ()

/** 辉光的颜色 */
@property (nonatomic,strong)UIColor *glowColor;

/** 需要添加辉光效果的View ，注意这里用的是weak，而不是strong */
@property (nonatomic,weak)UIView *addedGlowView;

/** dispatch_source_t */
@property (nonatomic,strong)dispatch_source_t timer;
@end

@implementation GlowLayer

#pragma mark - 创建辉光

// 遗留了一个先后顺序的问题，
/** 在原始的View上创建出辉光layer */
-(void)createGlowLayerWithOriginView:(UIView*)originView glowColor:(UIColor*)glowColor{
    self.glowColor = glowColor;
    // 创建一个图形上下文 参数：CGSize size：上下文的尺寸 BOOL opaque是否不透明 CGFloat scale缩放因子
    UIGraphicsBeginImageContextWithOptions(originView.bounds.size, NO, [UIScreen mainScreen].scale);
    // 通过get函数得到当前图形上下文,然后将origingView上的图形渲染到这个图形上下文上
    [originView.layer renderInContext:UIGraphicsGetCurrentContext()];
    // 创建贝塞尔曲线
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:originView.bounds];
    // 设置贝塞尔取消绘制的颜色
    [self.glowColor setFill];//这里还是需要懒加载
    // 设置贝塞尔曲线绘制模式
    [path fillWithBlendMode:kCGBlendModeSourceAtop alpha:1];
    
    
    // 设置self(GlowLayer)初始状态
    self.frame = originView.bounds;
    // 至少要在设置好当前frame值之后，然后添加图形上下文的Image
    // 获得当前图形上下文的图形，然后赋值给CALayer的constraints
    self.contents = (__bridge id _Nullable)(UIGraphicsGetImageFromCurrentImageContext().CGImage);

    // 阴影设置不透明，其他的设置为透明
    self.opacity = 0.f;
    self.shadowOpacity = 1.f;
    // 阴影偏移量为(0,0)
    self.shadowOffset = CGSizeMake(0, 0);
    
    
    // 关闭图形上下文
    UIGraphicsEndImageContext();
    
    // 强引用指向这个原来的View
    self.addedGlowView = originView;
}



#pragma mark - 显示和隐藏辉光

/** 显示辉光 */
-(void)showGLowLayer{
    // 设置阴影初始效果
    self.shadowColor = self.glowColor.CGColor;
    self.shadowRadius = self.glowRadius.floatValue;
    
    
    CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    animation.fromValue = @(0);
    animation.toValue = self.glowOpacity;
    animation.duration = self.glowAnimationDuration.floatValue;
    // 设置最终值
    self.opacity = self.glowOpacity.floatValue;
    
    [self addAnimation:animation forKey:nil];
}

/** 隐藏辉光 */
-(void)hideGlowLayer{
    self.shadowColor = self.glowColor.CGColor;
    self.shadowRadius = self.glowRadius.floatValue;
    
    CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    animation.fromValue = self.glowOpacity;
    animation.toValue = @(0);
    animation.duration = self.glowAnimationDuration.floatValue;
    // 设置最终值
    self.opacity = 0;
    
    [self addAnimation:animation forKey:nil];
}

#pragma mark - 循环显示和隐藏辉光

/** 开始循环辉光动画 */
-(void)startGlowAnimation{
    CGFloat cycleTime = self.glowAnimationDuration.floatValue * 2
    + self.glowDuration.floatValue + self.hideDuration.floatValue;
    CGFloat delayTime = self.glowAnimationDuration.floatValue + self.glowDuration.floatValue;
    
    _timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, dispatch_get_main_queue());
    dispatch_source_set_timer(_timer, DISPATCH_TIME_NOW, cycleTime * NSEC_PER_SEC, 0);
    dispatch_source_set_event_handler(_timer, ^{
        [self showGLowLayer];
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayTime * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [self hideGlowLayer];
        });
    });
    dispatch_resume(_timer);
}
/** 暂停辉光动画 */
-(void)pauseGlowAnimation{
    [self removeFromSuperlayer];
}
/** 重启辉光动画 */
-(void)reStareGlowAnimation{
    [self.addedGlowView.layer addSublayer:self];
    [self startGlowAnimation];
}

#pragma mark - 懒加载辉光的效果，同时处理数据越界问题
#pragma mark duration 辉光时间
-(NSNumber *)glowDuration{
    if (!_glowDuration || _glowDuration.floatValue < 0) {
        _glowDuration = @(0.5f);
    }
    return _glowDuration;
}
-(NSNumber *)hideDuration{
    if (!_hideDuration || _hideDuration.floatValue < 0) {
        _hideDuration = @(0.5);
    }
    return _hideDuration;
}
-(NSNumber *)glowAnimationDuration{
    if (!_glowDuration || _glowDuration.floatValue < 0) {
        _glowDuration = @(1.f);
    }
    return _glowDuration;
}
#pragma mark 辉光颜色
-(UIColor *)glowColor{
    if (!_glowColor) {
        _glowColor = [UIColor redColor];
    }
    return _glowColor;
}
#pragma mark 辉光半径
-(NSNumber *)glowRadius{
    if (!_glowRadius || _glowRadius.floatValue <= 0) {
        _glowRadius = @(2.f);
    }
    return _glowRadius;
}
#pragma mark 辉光透明度
-(NSNumber *)glowOpacity{
    if (!_glowOpacity || _glowOpacity.floatValue <= 0) {
        _glowOpacity = @(0.8);
    }
    return _glowOpacity;
}
@end

#import <objc/runtime.h>

@implementation UIView (GlowViews)

/** 创建GlowLayer，默认辉光颜色为红色 */
-(void)addGlowLayer{
    [self addGlowLayerWithGlowColor:nil];
}
/** 创建GlowLayer，需要设置辉光颜色 */
-(void)addGlowLayerWithGlowColor:(UIColor*)glowColor{
    if (self.glowLayer == nil) {
        self.glowLayer = [[GlowLayer alloc] init];
    }
    [self.glowLayer createGlowLayerWithOriginView:self glowColor:glowColor];
    [self insertGlowLayerToSuperlayer];
}
#pragma mark - 插入和移除辉光

/** 插入辉光 */
-(void)insertGlowLayerToSuperlayer{
    if (self.glowLayer == nil) {
        self.glowLayer = [[GlowLayer alloc] init];
    }
    [self.layer addSublayer:self.glowLayer];
}


/** 移除辉光 */
-(void)removeGlowLayerFromSuperlayer{
    [self.glowLayer removeFromSuperlayer];
    self.glowLayer = nil;
}

#pragma mark - Runtime动态添加属性
NSString * const _recognizerGlowLayer = @"_recognizerGlowLayer";
-(void)setGlowLayer:(GlowLayer *)glowLayer{
    objc_setAssociatedObject(self, (__bridge const void *)(_recognizerGlowLayer), glowLayer, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
-(GlowLayer *)glowLayer{
    return objc_getAssociatedObject(self, (__bridge const void *)(_recognizerGlowLayer));
}


@end

使用实例：