实现UILabel渐变色效果

实现UILabel渐变色效果

效果如下图:

源码:

//
//  CombinationView.h
//  ChangeColorLabel
//
//  Created by YouXianMing on 14/11/15.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface CombinationView : UIView

/**
 *  上面的view与下面的view
 */
@property (nonatomic, strong) UIView  *bottomView;
@property (nonatomic, strong) UIView  *aboveView;

/**
 *  上面view的透明度
 */
@property (nonatomic, assign) CGFloat  aboveViewAlpha;

@end
//
//  CombinationView.m
//  ChangeColorLabel
//
//  Created by YouXianMing on 14/11/15.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "CombinationView.h"

typedef enum : NSUInteger {
    Above_View = 0x11,
    Bottom_View,
} ENUM_VIEW;

@implementation CombinationView

#pragma mark - 上面的view与下面的view
@synthesize bottomView     = _bottomView;
@synthesize aboveView      = _aboveView;
@synthesize aboveViewAlpha = _aboveViewAlpha;

- (void)setBottomView:(UIView *)bottomView {
    self.bounds      = bottomView.bounds;
    bottomView.frame = bottomView.bounds;
    _bottomView      = bottomView;

    _aboveView.tag  = Above_View;
    _bottomView.tag = Bottom_View;

    [self addSubview:bottomView];
    [self bringSubviewToFront:[self viewWithTag:Above_View]];
}
- (UIView *)bottomView {
    return _bottomView;
}

- (void)setAboveView:(UIView *)aboveView {
    self.bounds     = aboveView.bounds;
    aboveView.frame = aboveView.bounds;
    _aboveView      = aboveView;

    _aboveView.tag  = Above_View;
    _bottomView.tag = Bottom_View;

    [self addSubview:aboveView];
    [self bringSubviewToFront:[self viewWithTag:Above_View]];
}
- (UIView *)aboveView {
    return _aboveView;
}

- (void)setAboveViewAlpha:(CGFloat)aboveViewAlpha {
    _aboveView.alpha = aboveViewAlpha;
}
- (CGFloat)aboveViewAlpha {
    return _aboveView.alpha;
}

@end

显示时候的源码:

//
//  ViewController.m
//  ChangeColorLabel
//
//  Created by YouXianMing on 14/11/15.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "ViewController.h"
#import "CombinationView.h"

@interface ViewController ()

@property (nonatomic, strong) NSTimer         *timer;
@property (nonatomic, strong) CombinationView *tmpView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];

    // 普通label
    UILabel *label      = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300, 60)];
    label.center        = self.view.center;
    label.textAlignment = NSTextAlignmentCenter;
    label.font          = [UIFont fontWithName:@"HelveticaNeue-Thin" size:40];
    label.text          = @"YouXianMing";
    label.textColor     = [UIColor whiteColor];

    // 截图
    UIView *snapShot = [label snapshotViewAfterScreenUpdates:YES];

    // 更新的label
    label.textColor = [UIColor redColor];

    // 组合器
    self.tmpView             = [CombinationView new];
    self.tmpView.aboveView   = label;
    self.tmpView.bottomView  = snapShot;
    self.tmpView.center      = self.view.center;

    // 添加view
    [self.view addSubview:self.tmpView];

    // 定时器
    _timer = [NSTimer scheduledTimerWithTimeInterval:3.5f
                                              target:self
                                            selector:@selector(doAnimation)
                                            userInfo:nil
                                             repeats:YES];
}

- (void)doAnimation {
    // 做动画测试
    [UIView animateWithDuration:1.5 animations:^{
        self.tmpView.aboveViewAlpha = 0.f;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:1.5 animations:^{
            self.tmpView.aboveViewAlpha = 1.f;
        } completion:^(BOOL finished) {

        }];
    }];
}

@end

手机图片源码:

//
//  ViewController.m
//  ChangeColorLabel
//
//  Created by YouXianMing on 14/11/15.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "ViewController.h"
#import "CombinationView.h"

@interface ViewController ()

@property (nonatomic, strong) NSTimer         *timer;
@property (nonatomic, strong) CombinationView *tmpView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];

    UIImageView *imageView1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"iPhone"]];
    UIImageView *imageView2 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"iPhoneOne"]];

    // 组合器
    self.tmpView             = [CombinationView new];
    self.tmpView.aboveView   = imageView1;
    self.tmpView.bottomView  = imageView2;
    self.tmpView.center      = self.view.center;

    // 添加view
    [self.view addSubview:self.tmpView];

    // 定时器
    _timer = [NSTimer scheduledTimerWithTimeInterval:3.5f
                                              target:self
                                            selector:@selector(doAnimation)
                                            userInfo:nil
                                             repeats:YES];
}

- (void)doAnimation {
    // 做动画测试
    [UIView animateWithDuration:1.5 animations:^{
        self.tmpView.aboveViewAlpha = 0.f;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:1.5 animations:^{
            self.tmpView.aboveViewAlpha = 1.f;
        } completion:^(BOOL finished) {

        }];
    }];
}

@end
时间: 2025-01-01 04:10:43

实现UILabel渐变色效果的相关文章

Android自定义带水滴的进度条样式(带渐变色效果)_Android

一.直接看效果 二.直接上代码 1.自定义控件部分 package com.susan.project.myapplication; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.grap

iOS文字渐变色效果的实现方法_IOS

照例先上文字渐变的效果图 实现思路如下 一.创建一个颜色渐变层,渐变图层跟文字控件一样大. 二.用文字图层裁剪渐变层,只保留文字部分,就会让渐变层只保留有文字的部分,相当于间接让渐变层显示文字,我们看到的其实是被裁剪过后,渐变层的部分内容. 注意:如果用文字图层裁剪渐变层,文字图层就不在拥有显示功能,这个图层就被弄来裁剪了,不会显示,在下面代码中也会有说明.       2.1 创建一个带有文字的label,label能显示文字.       2.2 设置渐变图层的mask为label图层,就能

PS调出树林婚纱唯美彩虹渐变色效果

  素材图片本身没有阳光,需要后期加进去. 过程:先把图片局部调亮,高光部分多增加一点暖色,然后用色彩叠加给图片左上角增加橙黄色.后期微调暗部及人物颜色即可.原图对比最终效果图: 原图对比最终效果图 分析一下原图:照片是大约正午时候拍摄的,人物处在树荫底下,所以面部肤色曝光严重不足,有光线洒在人物身上,周围环境葱郁的绿色,下面来想一下,我们调整照片的时候会不会把人物提亮一下,突出一下环境色 ,还有光线,让暖暖的阳光洒在人身上,营造出,光线绚烂童话般暖暖的感觉. 图层模式滤色 一.通过计算,选出照

光滑表面反光效果长圆形按钮制作技法

按钮 在Photoshop5.5(或者更高版本)中建立新文件,120x80 大小 RGB模式,Contents设为Transparent( 透明 ),layer1填充为白色,上加一层,建立40x40 的圆形,放在页面中心,填充成黑色 图01 用20x40大的矩形选取工具选取圆形的一半左侧,向左移动30个像素,同样步骤,将右侧的半个圆向右移动30个像素,即如图02结果 图02 将两个半圆中的空白填充上黑色,这个矩形的大小是60x40,即如图03结果 图03 前景色设为#FF0033,背景色为黑色,

体验Fireworks MX 2004绘图新功能

Fireworks MX 2004为我们带来的新工具有消除红眼.替换色彩.多样式绘图工具.箭头命令.Shape图形工具等等,特效包括增强的模糊效果.添加杂色.多填充样式效果.系统反锯齿和自定义反锯齿等等.我们将在新体验的旅程中亲身感受这些新功能,下面我们就出发吧! 一.移除红眼 移除红眼功能是2004版本中新增的一个功能,主要是为了使Fireworks能处理时下流行的数码相片的工作.下面我们来处理一张有红眼的数码相片. 首先在Fireworks MX 2004中导入一张相片图片,这张相片中的猴子

金属导线转弯部分制作技法

在Photoshop5.5(或更高版本)中建立新文件,100x100 大小 RGB模式,Contents设为Transparent( 透明 ),layer1填充为黑色,上加一层,建立100x8 的长矩形,放在页面中心前景色设为#F9CD8A,背景色设为#5B3714,用渐变色工具中的Relfected Gradient Tool,在选中矩形中心向上下两端作渐变色效果,(可用copy,paste命令达到其放至在页面中央). 下图为放大N多倍后的显示情况,请尽量达到如图显示的结果. 用命令Filte

Fireworks MX 2004快速造型

Fireworks MX 2004再也不是只有矩形.圆形.多边形这几种单调的图形工具了,它为了准备了不同形状的绘图工具,让我们轻松获得矢量图形.下面我们这些工具快速画一幅夜空景色,空中有闪亮的星星和美丽的月亮. 首先将背景填充为黑色,然后使用工具箱中的星星图形,在黑色背景上画出星星形状,填充灰.白的渐变色效果,如图6-1. 图6-1 在星星图形上,有几个节点通过鼠标拉动节点,可以从这个基本的图形上演变出其他的效果,如图6-2. 图6-2 通过这样的变形,还将改变星星的边数目,如图6-3. 图6-

PPT制作中巧用LOGO的案例与技巧

首先很高兴有博友已将小A所分享的素材活学活用,投入到了实际的工作中.下面分享博友发来的PPT中的一个页面, PPT模板已替换.PPT页面关键信息已做替换,文字位置保留. 原图把小A分享的PPT图表直接套用,蓝色球体上的文字也使用了上一篇博文中所提到的阴影效果,页面整体显得饱满充实.虽加入图示得以改观,但文字居多,仍略显枯燥 下面开始优化 1.将PPT页面中的文字区分主次关系,淡化辅助文字. 2.将各个银行的名称,用logo替换文字,丰富此处枯燥的文字排列.(LOGO均来自网络图片) 3.将下方文

XMIND教程:XMind思维导图的样式和形式

XMind思维导图为用户提供了丰富的模板和快捷的图标及属性设置.因此,我们能够自由地改变思维导图的结构.背景.主题.概要.边框等部分的属性.除此之外,XMind提供的风格功能.阴影效果.渐变色效果.画布属性和样式功能为我们提供了更多美化思维导图的选择. 1. 画布属性 在XMind内,我们不仅可以逐一对每个主题的线条设置其形状及颜色属性,还能够通过画布为所有的线条设置彩虹色和线条渐变效果.通过添加彩虹色效果,XMind按照顺时针的方向依次为分支主题的线条设定红色.橙色.青色.绿色.蓝色.紫色,6