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()%100/100.f],
                                    [NSNumber numberWithFloat:1.0f]];
        
        gradientLayer.colors = @[(id)[[UIColor clearColor] colorWithAlphaComponent:0.0f].CGColor,
                                 (id)[[UIColor colorWithRed:arc4random()%255/255.f
                                                      green:arc4random()%255/255.f
                                                       blue:arc4random()%255/255.f
                                                      alpha:1.0] colorWithAlphaComponent:1.0f].CGColor];
    } timeInterval:NSEC_PER_SEC];
    [_timer start];
}

@end

效果如下:

 

核心的地方:

colors与locations一一对应,而且,颜色的值是可以设置透明度的,这点相当重要哦.

 

附录:

http://stackoverflow.com/questions/22755016/how-to-achieve-this-effect-in-iphone-sdk/22755078#22755078

目录
相关文章
|
3月前
Cesium绘制透明光圈
这篇文章介绍了如何在Cesium中绘制具有透明度的圆形光圈,并提供了实现这一功能的具体代码和步骤。
127 3
Cesium绘制透明光圈
|
5月前
在图片上的文字背景,颜色是黑色?
在图片上的文字背景,颜色是黑色?
28 0
在图片上的文字背景,颜色是黑色?
设计----背景颜色透明和渐变颜色
设计----背景颜色透明和渐变颜色
|
7月前
给图片添加圆角功能,圆角透明
给图片添加圆角功能,圆角透明
36 0
|
前端开发
css实现背景半透明文字不透明的效果
css实现背景半透明文字不透明的效果
54 0
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
|
前端开发
使用css让图片透明渐变
今天接到一个这样的需求,将一张图片作为一个背景,然后四周透明渐变,很简单是吧,只要这个背景图片是png的,然后图片四周半透明就ok了,然而给到我手里的是jpg格式的,怎么办?
358 0
使用css让图片透明渐变
【Three.js入门】纹理及其常用属性、透明纹理、环境遮挡贴图与强度
【Three.js入门】纹理及其常用属性、透明纹理、环境遮挡贴图与强度
559 0
|
JSON 搜索推荐 Serverless
iOS绘制物理按钮 - 透明圆角渐变边框
iOS绘制物理按钮 - 透明圆角渐变边框
408 0

热门文章

最新文章