使用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. Ubuntu 下 unzip用法

    unzip [参数] <压缩文件> 参数: -P <密码> zip 压缩包的密码-f 覆盖原有文件-d <路径> 指定解压路径-n 解压缩时不覆盖原有文件-o 不经 ...

  2. python-生产者消费者模式

    #!/usr/bin/python #coding=utf-8 import threading,time lock=threading.Condition() product=0 class Mak ...

  3. InnoDB的后台线程(IO线程,master线程,锁监控线程,错误监控线程)和内存(缓冲池,重做日志缓冲池,额外内存池)

    InnoDB有多个内存块,你可以认为这些内存块组成了一个大的内存池,负责如下工作: 维护所有进程/线程需要访问的多个内部数据结构. 缓存磁盘上的数据,方便快速地读取,并且在对磁盘文件的数据进行修改之前 ...

  4. 【JVM调优系列】----CPU过高的分析与解决方案

    1.首先通过top命令查询当前进程所占cpu的一个比重

  5. 使用VMware安装CentOS7详请

    话不多说直接开车,乘客坐稳了 准备资料: CentOS-7-x86_64-Everything-1611 点击下载CentOS 对,资料就这些 第一步.  点击文件  再点击新建虚拟机 第二步 .点击 ...

  6. CentOS7手动修改系统时间

    CentOS7 永久修改系统时间 安装在虚拟机上的CentOS7的时间分为系统时间和硬件时间.二者都修改,重启系统(init 6 )才会永久生效.修改步骤如下 查看当前系统时间 date    修改当 ...

  7. ListView和Adapter

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

  8. MongoDB基本用法(增删改高级查询、mapreduce)

    TestCase.java package com.wujintao.mongo; import java.net.UnknownHostException; import java.util.Arr ...

  9. hdu 1251 统计难题 字典树第一题。

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others)Total Submi ...

  10. Centos的一个find命令配合rm删除某天前的文件

    语句写法:find 对应目录 -mtime +天数 -name "文件名" -exec rm -rf {} \; 例1: 将/usr/local/backups目录下所有10天前带 ...