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来实现图片渐入效果. 下 ...
随机推荐
- 《LeetBook》LeetCode题解(2):Add Two Numbers [M]
我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...
- JavaScript设计模式-15.适配器模式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CentOS 6.4下安装JIRA6.3.6破解汉化
JIRA产品非常完善且功能强大,安装配置简单,多语言支持.界面十分友好,和其他系统如CVS.Subversion(SVN).VSS.LDAP.邮件服务整合得相当好,文档齐全,可用性以及可扩展性方面都十 ...
- 关于禁止html缓存
在现代的浏览器里,为了增强用户体验,浏览器一般都会把网页上所需的静态文件缓存到本地,再次刷新的时候则无需再重新加载,但是我们有时候就是不需要浏览器缓存这些文件,而是每次都从服务器端读取数据,可以用以下 ...
- java class load 类加载
1:what is it jvm把描述类的数据从class字节码文件加载到内存,并对数据进行校验.解析.初始化,最终成为jvm直接使用的数据类型 1.ClassNotFoundExcetpion ...
- elasticsearch 6.x 安装与注意
1. 下载,解压 wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-6.5.4.tar.gztar -zx ...
- 第十六章、例行性工作排程 (crontab)
1. 什么是例行性工作排程 1.1 Linux 工作排程的种类: at, crontab 1.2 Linux 上常见的例行性工作 2. 仅运行一次的工作排程 2.1 atd 的启动与 at 运行的方式 ...
- mysql数据库引擎InnoDB和MyISAM
一.Mysql锁分类 表级锁:开销小,加锁块:不会出现死锁,锁定粒度大,发生锁冲突的概率最高,并发度最低. 行级锁:开销大,加锁慢:会出现死锁:锁定粒度最小,发生锁冲突的概率最低,并发性也最高. 页面 ...
- vscode下eslint代码规范
直接上规范吧: // 将设置放入此文件中以覆盖默认设置 { "editor.fontSize": 17, "editor.tabSize": 2, " ...
- Mysql压缩版forWindows安装与配置
参考:http://blog.csdn.net/wengengeng/article/details/52013650