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

目录
相关文章
|
Android开发
自定义 View | 画板
自定义 View | 画板
|
Android开发 容器
深入了解View的滑动冲突
在《与滑动冲突的首次邂逅》一文中,笔者举了一个开发过程中出现的一个简单的滑动冲突问题,带大家直观的了解何为滑动冲突,并且使用了内部拦截法(内部解决法)来解决了这个滑动冲突。
深入了解View的滑动冲突
|
Android开发 容器
Android开发 - 解决DialogFragment在全屏时View被状态栏遮住的问题
我的上一篇文章:设置DialogFragment全屏显示 可以设置对话框的内容全屏显示,但是存在在某些机型上顶部的View被状态栏遮住的问题。经过测试,发现了一种解决办法,在DialogFragment的onCreateView()中添加一个布局监听器: @Override public View.
2488 0
|
iOS开发 MacOS
CALayer 简介
概念 CALayer 是数据 QuartzCore 框架里面的 、相对于 UIKit 框架 更于底层、 其主要功能是 负责显示视图和动画、CALayer和UIView 在除了能响应事件上 功能 是一致的、 不过因为其 更加底层 所以 CALayer 有一些接口、 UIView 里面没有。
1198 0
|
前端开发 API Android开发
3.3 自定义控件基础 之 View的绘制
当测量好了一个View之后,我们就可以简单地重写onDraw()方法,并在Canvas对象上来绘制所需要的图形。首先我们来了解一下利用系统2D绘图API所必须要使用到的Canvas对象。
685 0
|
iOS开发
(转载)ios之为UIView设置阴影(CALayer的shadowColor,shadowOffset,shadowOpacity,shadowRadius,shadowPath属性)
原文地址:http://blog.csdn.net/rhljiayou/article/details/10178723 效果图: 以下代码实现: 第一个图片的代码 //加阴影--任海丽编辑 _imageView.
2054 0

热门文章

最新文章