使用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. LeetCode-13. Roman to Integer(罗马数字转阿拉伯数字)

    1.题目描述 Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range f ...

  2. 关于docker的理解随记

    1.容器其实不是什么新技术,说白了就是namespace对资源进行隔离,再加UFS实现分层镜像,以及cgroup实现资源限制.这些技术,都是linux中已有的技术,而且有些技术很早之前就有了. 2.上 ...

  3. Calendar介绍

    java.util.Calendar是一个抽象类,它定义了日历相关的一系列操作,使用java.util.Calendar除了可以表示日期和时间,还可以用它来对时期或时间进行算术运算,比如获取当前日期1 ...

  4. 文本相似度分析(基于jieba和gensim)

    基础概念 本文在进行文本相似度分析过程分为以下几个部分进行, 文本分词 语料库制作 算法训练 结果预测 分析过程主要用两个包来实现jieba,gensim jieba:主要实现分词过程 gensim: ...

  5. ListView和Adapter

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  6. DIRECTORY_SEPARATOR 目录分隔符 php内置变量

    转自http://www.cnblogs.com/timelesszhuang/p/3814878.html 在windows我们习惯性的使用“\”作为文件分隔符,但是在linux上系统不认识这个标识 ...

  7. java四则运算----前缀、中缀、后缀表达式

    接到一个新需求,需要实现可配置公式,然后按公式实现四则运算. 刚拿到需求,第一反应就是用正则匹配‘(’,‘)’,‘+’,‘-’,‘*’,‘/’,来实现四则运算,感觉不复杂. 然后开始coding.发现 ...

  8. java中接口的定义

    使用interface来定义一个接口.接口定义同类的定义类似,也是分为接口的声明和接口体,其中接口体由常量定义和方法定义两部分组成.定义接口的基本格式如下: [修饰符] interface 接口名 [ ...

  9. 【转】Oracle SQL Developer 连接 Mysql 等数据库

    原文地址:http://blog.163.com/cuixiao_yan/blog/static/319232442009102882651869/ Oracle SQL Developer 个人感觉 ...

  10. 【SSH网上商城项目实战14】商城首页UI的设计

    转自:https://blog.csdn.net/eson_15/article/details/51373403 前面我们利用EasyUI和SSH搭建好了后台的基本框架,做好了后台的基本功能,包括对 ...