使用CALayer制作View的辉光效果

简介:

使用CALayer制作View的辉光效果

实现以下的辉光效果:

思路是这样子的:

1. 创建好需要实现辉光效果的View

2. 对这个View进行截图

3. 将这个截图重新添加进View中

4. 对这个截图实现改变透明度的动画

 

ViewController.m

//
//  ViewController.m
//
//  Copyright (c) 2013 Nick Jensen. All rights reserved.
//

#import "ViewController.h"
#import "BackedImage.h"
#import "YXGCD.h"

@interface ViewController ()

@property (nonatomic, strong) GCDTimer  *timer;

@end

@implementation ViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];

    // 创建Label
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 70)];
    label.text = @"You:Xian:Ming";
    label.textAlignment = NSTextAlignmentCenter;
    label.font = [UIFont fontWithName:@"HelveticaNeue-UltraLight" size:40.f];
    label.textColor = [UIColor redColor ];
    label.center = self.view.center;
    [self.view addSubview:label];
    
    // 将Label转换成Image
    BackedImage *backedImage = [BackedImage new];
    [backedImage createBackedLayerWithView:label
                                 withColor:[UIColor cyanColor]
                              shadowRadius:5.f];
    CALayer *myLayer = backedImage.backedLayer;
    
    // 将这个layer添加进Label中
    [label.layer addSublayer:myLayer];
    
    // 开始辉光动画
    _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
    [_timer event:^{
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
        
        static int i = 0;
        if (i++ % 2 == 0)
        {
            animation.fromValue = [NSNumber numberWithFloat:1.f];
            animation.toValue   = [NSNumber numberWithFloat:0.f];
            animation.duration  = 0.8;
            myLayer.opacity = 0.f;
            [myLayer addAnimation:animation forKey:nil];
        }
        else
        {
            animation.fromValue = [NSNumber numberWithFloat:0.f];
            animation.toValue   = [NSNumber numberWithFloat:1.f];
            animation.duration  = 0.8;
            myLayer.opacity = 1.f;
            [myLayer addAnimation:animation forKey:nil];
        }
        
    } timeInterval: NSEC_PER_SEC * 1];
    [_timer start];
}

@end

BackedImage.h
//
//  BackedImage.h
//  Copyright (c) 2014年 Nick Jensen. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface BackedImage : NSObject

@property (nonatomic, strong, readonly) CALayer  *backedLayer;

- (void)createBackedLayerWithView:(UIView *)view
                        withColor:(UIColor *)color
                     shadowRadius:(CGFloat)radius;

@end

BackedImage.m
//
//  BackedImage.m
//  Copyright (c) 2014年 Nick Jensen. All rights reserved.
//

#import "BackedImage.h"

@implementation BackedImage

- (void)createBackedLayerWithView:(UIView *)view
                        withColor:(UIColor *)color
                     shadowRadius:(CGFloat)radius
{
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, NO,
                                           [UIScreen mainScreen].scale);
    
    [view.layer renderInContext:UIGraphicsGetCurrentContext()];
    
    UIBezierPath* path = [UIBezierPath bezierPathWithRect:(CGRect){CGPointZero,
        CGSizeMake(view.bounds.size.width, view.bounds.size.height)}];
    
    [color setFill];
    
    [path fillWithBlendMode:kCGBlendModeSourceAtop alpha:1.0];
    
    _backedLayer = [CALayer layer];
    _backedLayer.frame = view.bounds;
    _backedLayer.contents = (__bridge id)UIGraphicsGetImageFromCurrentImageContext().CGImage;
    _backedLayer.shadowOpacity = 1.0f;
    _backedLayer.shadowOffset  = CGSizeMake(0, 0);
    _backedLayer.shadowColor   = color.CGColor;
    _backedLayer.shadowRadius  = radius;
    
    UIGraphicsEndImageContext();
}

@end

目录
相关文章
|
4月前
|
前端开发
自定义View绘制基础之Canvas
自定义View绘制基础之Canvas
55 0
|
Android开发
自定义 View | 画板
自定义 View | 画板
自定义 View | 画板
实现圆形进度条(Unity3D)
今天分享一个制作圆形进度条的方法,原教程比较繁琐,这里给精简一下,更适合于新手
【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )(一)
【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )(一)
198 0
【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )(一)
|
Dart 开发者
【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )(二)
【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )(二)
193 0
【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )(二)
|
Android开发
Android Reveal圆形Activity转场动画
一、效果 图片较大无法上传~~ 地址:https://user-gold-cdn.xitu.io/2018/11/2/166d4b91aecdf577?imageslim 二、知识点 CircularReveal动画、透明主题、转场动画(非必须) 三、方案 假设有两个Activity A和B。
2032 0
|
前端开发 API Android开发
3.3 自定义控件基础 之 View的绘制
当测量好了一个View之后,我们就可以简单地重写onDraw()方法,并在Canvas对象上来绘制所需要的图形。首先我们来了解一下利用系统2D绘图API所必须要使用到的Canvas对象。
671 0