使用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. redis 远程 访问 安全配置

    朋友总结很好,就转载了-> 站长博客 假设两台redis服务器,ip分别为:192.168.1.101和192.168.1.103,如果在101上通过redis-cli访问103上的redis呢 ...

  2. 14.Promise对象

    1.Promise的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Pro ...

  3. Oracle练习笔记

    1 基本查询 SQL> --当前用户 SQL> show user USER 为 "SCOTT" SQL> --当前用户下的表 SQL> select * ...

  4. maven上传源码到私服

    上传源码 项目中采用了分模块的方式构建,直接将maven-source-plugin写到父pom中,尝试了很多次发现源码一直不能上传到私服中,纠结了很长时间才发现原来多模块项目和普通一个项目的配置是有 ...

  5. JavaScript数据结构-9.循环链表

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 在ubuntu下使用visual studio code编写python

    感觉有了visual studio code之后,不管编写什么语言的代码都可以,简单安装对应的语言插件即可. 这不轮到了最近比较热的python语言,蹭着AI的热度,python语言成为了工程师们又一 ...

  7. 【Echo】实验 -- 实现 C/C++下UDP, 服务器/客户端 通讯

    本次实验利用UDP协议, 语言环境为 C/C++ 利用套接字Socket编程,实现Server/CLient 之间简单的通讯. 结果应为类似所示: 下面贴上代码(参考参考...) Server 部分: ...

  8. Firebird 表字段查询

    select rdb$relation_fields.rdb$relation_name table_name, rdb$relations.rdb$description table_des, rd ...

  9. MVC缓存(二)

    依赖缓存: 1.监视特定的数据库表,当数据库表里数据发生变化时,自动删除缓存项,并向Cache中添加新的项. using System; using System.Collections.Generi ...

  10. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器。

    前两篇目录: 仿淘宝头像上传功能(一)——前端篇. 仿淘宝头像上传功能(二)——程序篇. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器 之前的这两篇虽然实现了功能,但不兼容低版本浏览器,而且有些浏 ...