使用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(, , , )];
label.text = @"You:Xian:Ming";
label.textAlignment = NSTextAlignmentCenter;
label.font = [UIFont fontWithName:@"HelveticaNeue-UltraLight" size:.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:.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 = ;
if (i++ % == )
{
animation.fromValue = [NSNumber numberWithFloat:.f];
animation.toValue = [NSNumber numberWithFloat:.f];
animation.duration = 0.8;
myLayer.opacity = .f;
[myLayer addAnimation:animation forKey:nil];
}
else
{
animation.fromValue = [NSNumber numberWithFloat:.f];
animation.toValue = [NSNumber numberWithFloat:.f];
animation.duration = 0.8;
myLayer.opacity = .f;
[myLayer addAnimation:animation forKey:nil];
} } timeInterval: NSEC_PER_SEC * ];
[_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(, );
_backedLayer.shadowColor = color.CGColor;
_backedLayer.shadowRadius = radius; UIGraphicsEndImageContext();
} @end

使用CALayer制作View的辉光效果的更多相关文章

  1. 支持辉光效果的Label

    支持辉光效果的Label 效果 源码 https://github.com/YouXianMing/UI-Component-Collection 中的 FBGlowLabel // // FBGlo ...

  2. GraphicsLab Project之辉光(Glare,Glow)效果 【转】

    作者:i_dovelemon 日期:2016 / 07 / 02 来源:CSDN 主题:Render to Texture, Post process, Glare, Glow, Multi-pass ...

  3. Shimmer辉光动画效果

    Shimmer辉光动画效果 效果 源码 https://github.com/facebook/Shimmer https://github.com/YouXianMing/Animations // ...

  4. 辉光UIView的category

    辉光UIView的category 本人视频教程系类   iOS中CALayer的使用 效果如下: 源码: UIView+GlowView.h 与 UIView+GlowView.m // // UI ...

  5. 辉光的UIView

    辉光的UIView 辉光UIView使用了一个UIView的一个category,名为UIView+Glow,请自行到github上查找. 源码如下: // // RootViewController ...

  6. pixijs shader贴图扫光效果

    pixijs shader贴图扫光效果 直接贴代码 const app = new PIXI.Application({ transparent: true }); document.body.app ...

  7. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  8. jQuery 制作逼真的日历翻转效果的倒计时

    在开发中,一些功能需要用到倒计时,例如最常见的活动开始.结束的倒计时.使用最流行的 JavaScript 库来制作这个效果很简单.下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能. 在 ...

  9. 自定义view实现水波纹效果

    水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...

随机推荐

  1. 什么是O/RMapping?为什么要用O/R Mapping?

    什么是O/R Mapping ? O/R Mapping 就是有一大堆的类库,我们调用它的时候用面向对象的方式来调,它帮我们翻译成为面向关系的方式. 为什么要用O/R Mapping? 我们编程会更加 ...

  2. ubuntu 16.04通过源码方式安装nginx

    1.下载nginx源码包 wget  http://nginx.org/download/nginx-1.11.12.tar.gz 2.解压该tar包 tar zxvf nginx-1.11.12.t ...

  3. 浅谈js中的垃圾两种回收机制

    一.标记清除 标记清除的主要思想是先建立各个对象的关联,然后从根节点出发,使用广度优先搜索依次标记所有对象,那些不能被标记的对象就应该作为垃圾回收. 这种方式的主要缺点就是如果某些对象被清理后,内存是 ...

  4. ClouderManager集群在Linux里浏览器默认是英文,在Win里浏览器是中文,怎么更改?(图文详解)

    不多说,直接上干货! 问题详情 在这里面如何英文改中文的吗? 莫非要把linux的语言环境给改了?? 我找找网页的语言字体怎么更改下 找到对应页面,修改成中文 解决办法 刷新下,即可 欢迎大家,加入我 ...

  5. Java中的语法树结构

    1.JCTypeParameter class B<T extends CA&IA&IB> { ...} 截图如下: 接口继承了StatementTree接口,而实现类实现 ...

  6. 解决php中json_decode的异常JSON_ERROR_CTRL_CHAR (json_last_error = 3)

    https://www.cnblogs.com/sanshuiqing/p/6022619.html 该字符中含了ASCII码ETB控制符,即\x17导致json解析失败 (截图中显示ETB是因为用了 ...

  7. Maven 打包的时候报 Failed to execute goal org.codehaus.mojo:native2ascii-maven-plugin

    错误信息: [ERROR] Failed to execute goal org.codehaus.mojo:native2ascii-maven-plugin:1.0-alpha-1:native2 ...

  8. nodejs学习笔记二(get请求、post请求、 querystring模块,url模块)

    请求数据 前台:form.ajax.jsonp 后台:接受请求并返回响应数据     前台<= http协议 =>后台   常用的请求的方式: 1.GET           数据在url ...

  9. [转]如何配置Log4Net使用Oracle数据库记录日志

    本文转自:http://www.cnblogs.com/PatrickLiu/p/6012153.html 最近在做一个项目的时候,需要增加一个日志的功能,需要使用Log4Net记录日志,把数据插入到 ...

  10. Virtualbox/Vagrant安装

    它们分别是什么? VirtualBox: 号称是最强的免费虚拟机软件和VM类似. 不仅具有丰富的特色,而且性能也很优异. Vagrant: 是一个基于Ruby的工具,用于创建和部署虚拟化开发环境. 使 ...