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

目录
相关文章
|
4月前
给图片添加圆角功能,圆角透明
给图片添加圆角功能,圆角透明
23 0
设计----背景颜色透明和渐变颜色
设计----背景颜色透明和渐变颜色
|
11月前
|
前端开发
css实现背景半透明文字不透明的效果
css实现背景半透明文字不透明的效果
45 0
|
前端开发
使用css让图片透明渐变
今天接到一个这样的需求,将一张图片作为一个背景,然后四周透明渐变,很简单是吧,只要这个背景图片是png的,然后图片四周半透明就ok了,然而给到我手里的是jpg格式的,怎么办?
335 0
使用css让图片透明渐变
|
移动开发 UED HTML5
CSS3——伸缩布局,文字阴影,背景渐变缩放多背景,优雅降级和渐进增强
CSS3——伸缩布局,文字阴影,背景渐变缩放多背景,优雅降级和渐进增强
135 0
CSS3——伸缩布局,文字阴影,背景渐变缩放多背景,优雅降级和渐进增强
|
JSON 搜索推荐 Serverless
iOS绘制物理按钮 - 透明圆角渐变边框
iOS绘制物理按钮 - 透明圆角渐变边框
384 0
iOS绘制物理按钮 - 透明圆角渐变边框
SwiftUI—如何给图像视图添加边框、透明度和阴影
SwiftUI—如何给图像视图添加边框、透明度和阴影
809 0
SwiftUI—如何给图像视图添加边框、透明度和阴影
|
C# 小程序
给图片加上阴影效果
原文:给图片加上阴影效果 今天写一个小程序有一个给图片加上阴影的需求,记得WPF的Effect中就有阴影特效,就打算用它了。代码如下:     using (var imageStreamSource = File.
1210 0