使用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(, , , )];
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的辉光效果的更多相关文章
- 支持辉光效果的Label
支持辉光效果的Label 效果 源码 https://github.com/YouXianMing/UI-Component-Collection 中的 FBGlowLabel // // FBGlo ...
- GraphicsLab Project之辉光(Glare,Glow)效果 【转】
作者:i_dovelemon 日期:2016 / 07 / 02 来源:CSDN 主题:Render to Texture, Post process, Glare, Glow, Multi-pass ...
- Shimmer辉光动画效果
Shimmer辉光动画效果 效果 源码 https://github.com/facebook/Shimmer https://github.com/YouXianMing/Animations // ...
- 辉光UIView的category
辉光UIView的category 本人视频教程系类 iOS中CALayer的使用 效果如下: 源码: UIView+GlowView.h 与 UIView+GlowView.m // // UI ...
- 辉光的UIView
辉光的UIView 辉光UIView使用了一个UIView的一个category,名为UIView+Glow,请自行到github上查找. 源码如下: // // RootViewController ...
- pixijs shader贴图扫光效果
pixijs shader贴图扫光效果 直接贴代码 const app = new PIXI.Application({ transparent: true }); document.body.app ...
- 学习使用 CSS3 制作网站面包屑导航效果
作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...
- jQuery 制作逼真的日历翻转效果的倒计时
在开发中,一些功能需要用到倒计时,例如最常见的活动开始.结束的倒计时.使用最流行的 JavaScript 库来制作这个效果很简单.下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能. 在 ...
- 自定义view实现水波纹效果
水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...
随机推荐
- LeetCode-13. Roman to Integer(罗马数字转阿拉伯数字)
1.题目描述 Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range f ...
- 关于docker的理解随记
1.容器其实不是什么新技术,说白了就是namespace对资源进行隔离,再加UFS实现分层镜像,以及cgroup实现资源限制.这些技术,都是linux中已有的技术,而且有些技术很早之前就有了. 2.上 ...
- Calendar介绍
java.util.Calendar是一个抽象类,它定义了日历相关的一系列操作,使用java.util.Calendar除了可以表示日期和时间,还可以用它来对时期或时间进行算术运算,比如获取当前日期1 ...
- 文本相似度分析(基于jieba和gensim)
基础概念 本文在进行文本相似度分析过程分为以下几个部分进行, 文本分词 语料库制作 算法训练 结果预测 分析过程主要用两个包来实现jieba,gensim jieba:主要实现分词过程 gensim: ...
- ListView和Adapter
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...
- DIRECTORY_SEPARATOR 目录分隔符 php内置变量
转自http://www.cnblogs.com/timelesszhuang/p/3814878.html 在windows我们习惯性的使用“\”作为文件分隔符,但是在linux上系统不认识这个标识 ...
- java四则运算----前缀、中缀、后缀表达式
接到一个新需求,需要实现可配置公式,然后按公式实现四则运算. 刚拿到需求,第一反应就是用正则匹配‘(’,‘)’,‘+’,‘-’,‘*’,‘/’,来实现四则运算,感觉不复杂. 然后开始coding.发现 ...
- java中接口的定义
使用interface来定义一个接口.接口定义同类的定义类似,也是分为接口的声明和接口体,其中接口体由常量定义和方法定义两部分组成.定义接口的基本格式如下: [修饰符] interface 接口名 [ ...
- 【转】Oracle SQL Developer 连接 Mysql 等数据库
原文地址:http://blog.163.com/cuixiao_yan/blog/static/319232442009102882651869/ Oracle SQL Developer 个人感觉 ...
- 【SSH网上商城项目实战14】商城首页UI的设计
转自:https://blog.csdn.net/eson_15/article/details/51373403 前面我们利用EasyUI和SSH搭建好了后台的基本框架,做好了后台的基本功能,包括对 ...