CAGradientLayer实现图片渐变透明效果
CAGradientLayer实现图片渐变透明效果

要实现的效果如下:

源码:
//
// RootViewController.m
// CAGradientLayer
//
// Copyright (c) 2014年 Y.X. All rights reserved.
// #import "RootViewController.h"
#import "YXGCD.h" @interface RootViewController () @property (nonatomic, strong) GCDTimer *timer; @end @implementation RootViewController - (void)viewDidLoad
{
[super viewDidLoad]; self.view.backgroundColor = [UIColor redColor]; // 背景图片
UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
imageView.image = [UIImage imageNamed:@"猫"];
[self.view addSubview:imageView]; UIView *yourGradientView = [[UIView alloc] initWithFrame:self.view.bounds]; // 渐变图层
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = yourGradientView.bounds; // 设置颜色
gradientLayer.colors = @[(id)[[UIColor clearColor] colorWithAlphaComponent:0.0f].CGColor,
(id)[[UIColor redColor] colorWithAlphaComponent:1.0f].CGColor];
gradientLayer.locations = @[[NSNumber numberWithFloat:0.7f],
[NSNumber numberWithFloat:1.0f]]; // 添加渐变图层
[yourGradientView.layer addSublayer:gradientLayer];
[self.view addSubview:yourGradientView]; // 开始动画效果
_timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
[_timer event:^{
gradientLayer.locations = @[[NSNumber numberWithFloat:arc4random()%/.f],
[NSNumber numberWithFloat:1.0f]]; gradientLayer.colors = @[(id)[[UIColor clearColor] colorWithAlphaComponent:0.0f].CGColor,
(id)[[UIColor colorWithRed:arc4random()%/.f
green:arc4random()%/.f
blue:arc4random()%/.f
alpha:1.0] colorWithAlphaComponent:1.0f].CGColor];
} timeInterval:NSEC_PER_SEC];
[_timer start];
} @end
效果如下:

核心的地方:

colors与locations一一对应,而且,颜色的值是可以设置透明度的,这点相当重要哦.
附录:
CAGradientLayer实现图片渐变透明效果的更多相关文章
- IE6-能让png图片有透明效果的js代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- css实现内容渐变隐藏效果,手机网页版知乎内容隐藏效果的实现
看到一个需求,如下图,知乎手机网页版的一个视觉效果,对内容很长的部分有一个渐变的隐藏的效果,个人觉得这个设计还是很好的,符合手机大小的应用场景,没有一下子显示完全,可以很快的滑倒页面底部,一定程度上减 ...
- 七行jquery代码实现图片渐变切换【兼容ie6+、 Chrome、 Firefox】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 图片设置3D效果
/** * 图片绘制3d效果 * @param srcImage * @param radius * @param border * @param padding * @return * @throw ...
- 专题:DUILIB Win32 透明效果
Win32 透明效果相关基础知识 Layered Windows 分层窗口.这是Windows2000开始引入的概念,重新定义了窗口的Hit Testing方法,以前都是把窗口按rectangle的方 ...
- 使用CSS3的clip-path(裁剪路径)实现剪贴区域的显示以及实例实现图片渐变
clip-path介绍 clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法.想象一下你在Photoshop中勾勒路径的场景.MDN上是这样介绍 clip-p ...
- Flash Actionscript AS3 渐变透明 mask遮罩
把图片变成渐变透明(左图是效果图,右图是原图) var a:Sprite = new Sprite(); a.graphics.beginGradientFill(GradientType.LI ...
- App 图标设计 - 圆角透明效果(0 基础使用 PS)
App 图标设计 - 圆角透明效果(0 基础使用 PS) 方法: 如果你有些基础,就不必看图文教程了: 1.使用圆角矩形工具选中,设置圆角尺寸[例如:1024*1024 px(圆角:160 px)] ...
- CSS3实现图片渐入效果
很多网站都有那种图片渐入的效果,如:http://www.mi.com/minote/,这种效果用css3和一些js实现起来特别简单. 拿我之前做的页面来说一下怎么利用css3来实现图片渐入效果. 下 ...
随机推荐
- LeetCode-13. Roman to Integer(罗马数字转阿拉伯数字)
1.题目描述 Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range f ...
- 创建自己的加密货币MNC——以太坊代币(二)
创建一个基于以太坊平台的分红币MNC,根据持有的代币数量,进行分红的算法.github地址: https://github.com/lxr1907/MNC 1.使用以太坊根据比例换购token MNC ...
- javac符号名字的管理
在符号表中,很重要的一项内容就是符号的名字.名字的管理,要解决的主要问题就是名字的变长问题.在javac中,所有的符号名字放到了一个公用字符池中,对于相同的名字只保存一个. 其中涉及到的主要类及关系如 ...
- javascript中的function 函数名(){} 和 函数名:function(){}有什么不同
function functionName(){};这是定义一个函数 functionName:function(){};是设置一个对象的方法. 下面举一个例子: <html> <h ...
- 【LESS系列】三角形Mixins
又是一篇自 W3CPLUS 中转化而来的文章. 和 W3CPLUS 上的做法,在设计上最大的不同就在于,这里我用的是多个 Mixins 函数来实现. 先总结这种做法的特点: 需要额外的标签来实现,因此 ...
- springMVC流程分析
下面是DispatcherServlet的doDispatch()方法 protected void doDispatch(HttpServletRequest request, HttpServle ...
- 13 Timer和TimerTask 示例
定时器是一个应用十分广泛的线程工具,可用于调度多个定时任务以后台线程的方式执行.在Java中,可以通过Timer和TimerTask类来实现定义调度的功能 1 Timerjava.lang.Objec ...
- 使用 Python 编写脚本并发布
使用 Python 编写脚本并发布 P1: 脚本 通常在 Linux 服务器上会遇到在命令行中输入命令的操作,而有些操作包含的命令数目较多或者其中的命令包含的参数较多,如果一个一个的敲命令的话就太麻烦 ...
- RabbitMQ---4、消息确认Ack
一:消费者确认 消费者确认或者说消费者应答指的是RabbitMQ需要确认消息到底有没有被收到 - 自动应答 boolean autoAck = true; channel.basicConsume(Q ...
- centos 6.X系统里的网卡em1还原为eth0
公司的DELL R720服务器安装完centos 6.5版本后,发现原先熟悉的eth0.eth1变成了em1.em2 . 本来认为只是接口名称变化,并不伤大雅 .不过在放到机房之前进行LVS测试时,发 ...