您的位置:首页 > 产品设计 > UI/UE

UILabel的混合显示动画效果

2016-02-04 09:43 363 查看


源码

https://github.com/YouXianMing/Animations

//
//  MixedColorProgressViewController.m
//  Animations
//
//  Created by YouXianMing on 16/1/5.
//  Copyright © 2016年 YouXianMing. All rights reserved.
//

#import "MixedColorProgressViewController.h"
#import "UIView+SetRect.h"
#import "GCD.h"

@interface MixedColorProgressViewController ()

@property (nonatomic, strong)  UIView   *upView;
@property (nonatomic, strong)  UILabel  *upLabel;
@property (nonatomic, strong)  UIView   *downView;
@property (nonatomic, strong)  UILabel  *downLabel;

@property (nonatomic, strong)  GCDTimer *timer;

@end

@implementation MixedColorProgressViewController

- (void)setup {

[super setup];

/*
给upView的frame值做动画才是label能够混色显示的核心

upView(红色背景)   ===>  upLabel(白色底字)
|                       |
|                       |
|                       |
|                       |
downView(白色背景) ===> downLabel(红色底字)

*/

// 上面一层
{
// 红色背景
_upView                     = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 220, 17)];
_upView.center              = self.view.center;
_upView.layer.cornerRadius  = 2.f;
_upView.backgroundColor     = [UIColor redColor];
_upView.layer.masksToBounds = YES; // 核心(不让subview显示超出范围)
[self.view addSubview:_upView];

// 白色底字
_upLabel                    = [[UILabel alloc] initWithFrame:_upView.bounds];
_upLabel.font               = [UIFont fontWithName:@"HelveticaNeue-Thin" size:13];
_upLabel.text               = @"YouXianMing - iOS Programmer";
_upLabel.textColor          = [UIColor whiteColor];
_upLabel.textAlignment      = NSTextAlignmentCenter;
[_upView addSubview:_upLabel];
}

// 下面一层
{
// 白色背景
_downView                     = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 220, 17)];
_downView.center              = self.view.center;
_downView.layer.cornerRadius  = 2.f;
_downView.backgroundColor     = [UIColor whiteColor];
[self.view addSubview:_downView];

// 红色底字
_downLabel                    = [[UILabel alloc] initWithFrame:_downView.bounds];
_downLabel.textColor          = [UIColor redColor];
_downLabel.font               = [UIFont fontWithName:@"HelveticaNeue-Thin" size:13];
_downLabel.text               = @"YouXianMing - iOS Programmer";
_downLabel.textAlignment = NSTextAlignmentCenter;
[_downView addSubview:_downLabel];
}

// 显示上面一层
[self.view bringSubviewToFront:_upView];

// 给上面一层的frame值做动画
_timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
[_timer event:^{

[UIView animateWithDuration:0.5f delay:0.f usingSpringWithDamping:3.f initialSpringVelocity:0 options:0 animations:^{

_upView.width = arc4random() % 220;

} completion:nil];

} timeInterval:NSEC_PER_SEC];
[_timer start];
}

@end


细节

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: