高逼格UILabel的闪烁动画效果

简介:

高逼格UILabel的闪烁动画效果

最终效果图如下:

源码:

YXLabel.h 与  YXLabel.m

//
//  YXLabel.h
//
//  Created by YouXianMing on 14-8-23.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface YXLabel : UIView

@property (nonatomic, strong) NSString *text;       // 文本的文字
@property (nonatomic, strong) UIFont   *font;       // 文本的字体

@property (nonatomic, assign) CGFloat   startScale; // 最初处于alpha = 0状态时的scale值
@property (nonatomic, assign) CGFloat   endScale;   // 最后处于alpha = 0状态时的scale值

@property (nonatomic, strong) UIColor  *backedLabelColor; // 不会消失的那个label的颜色
@property (nonatomic, strong) UIColor  *colorLabelColor;  // 最终会消失的那个label的颜色

- (void)startAnimation;

@end


//
//  YXLabel.m
//
//  Created by YouXianMing on 14-8-23.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "YXLabel.h"

@interface YXLabel ()

@property (nonatomic, strong) UILabel  *backedLabel;
@property (nonatomic, strong) UILabel  *colorLabel;

@end

@implementation YXLabel

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        _backedLabel = [[UILabel alloc] initWithFrame:self.bounds];
        _colorLabel  = [[UILabel alloc] initWithFrame:self.bounds];
        
        // 初始时的alpha值为0
        _backedLabel.alpha = 0;
        _colorLabel.alpha  = 0;
        
        // 文本居中
        _backedLabel.textAlignment = NSTextAlignmentCenter;
        _colorLabel.textAlignment  = NSTextAlignmentCenter;
        
        [self addSubview:_backedLabel];
        [self addSubview:_colorLabel];
    }
    return self;
}

- (void)startAnimation
{
    // 判断endScale的值
    if (_endScale == 0) {
        _endScale = 2.f;
    }
    
    // 开始第一次动画
    [UIView animateWithDuration:1
                          delay:0
         usingSpringWithDamping:7
          initialSpringVelocity:4
                        options:UIViewAnimationOptionCurveEaseInOut
                     animations:^{
                         // 恢复正常尺寸
                         _backedLabel.alpha     = 1.f;
                         _backedLabel.transform = CGAffineTransformMake(1, 0, 0, 1, 0, 0);
                         
                         _colorLabel.alpha      = 1.f;
                         _colorLabel.transform  = CGAffineTransformMake(1, 0, 0, 1, 0, 0);;
                     }
                     completion:^(BOOL finished) {
                         
                         // 开始第二次动画
                         [UIView animateWithDuration:2
                                               delay:0.5
                              usingSpringWithDamping:7
                               initialSpringVelocity:4
                                             options:UIViewAnimationOptionCurveEaseInOut
                                          animations:^{
                                              _colorLabel.alpha     = 0.f;
                                              _colorLabel.transform = CGAffineTransformMake(_endScale, 0, 0, _endScale, 0, 0);
                                          }
                                          completion:^(BOOL finished) {
                                              
                                          }];
                     }];
}


#pragma mark - 重写setter方法
@synthesize text = _text;
- (void)setText:(NSString *)text
{
    _text             = text;
    _backedLabel.text = text;
    _colorLabel.text  = text;
}
- (NSString *)text
{
    return _text;
}

@synthesize startScale = _startScale;
- (void)setStartScale:(CGFloat)startScale
{
    _startScale = startScale;
    _backedLabel.transform = CGAffineTransformMake(startScale, 0, 0, startScale, 0, 0);
    _colorLabel.transform  = CGAffineTransformMake(startScale, 0, 0, startScale, 0, 0);
}
- (CGFloat)startScale
{
    return _startScale;
}

@synthesize font = _font;
- (void)setFont:(UIFont *)font
{
    _font = font;
    _backedLabel.font = font;
    _colorLabel.font  = font;
}
- (UIFont *)font
{
    return _font;
}

@synthesize backedLabelColor = _backedLabelColor;
- (void)setBackedLabelColor:(UIColor *)backedLabelColor
{
    _backedLabelColor = backedLabelColor;
    _backedLabel.textColor = backedLabelColor;
}

@synthesize colorLabelColor = _colorLabelColor;
- (void)setColorLabelColor:(UIColor *)colorLabelColor
{
    _colorLabelColor = colorLabelColor;
    _colorLabel.textColor = colorLabelColor;
}

@end

使用的源码:
//
//  RootViewController.m
//  Demo
//
//  Created by YouXianMing on 14-8-22.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "RootViewController.h"
#import "YXLabel.h"
#import "FontPool.h"

@interface RootViewController ()

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor blackColor];
    
    // 注册字体
    REGISTER_FONT(bundleFont(@"新蒂小丸子小学版.ttf"), @"新蒂小丸子小学版");
    
    YXLabel *label   = [[YXLabel alloc] initWithFrame:CGRectMake(0, 0, 320, 100)];
    label.text       = @"高逼格";
    label.startScale = 0.3f;
    label.endScale   = 2.f;
    label.backedLabelColor = [UIColor whiteColor];
    label.colorLabelColor  = [UIColor cyanColor];
    label.font       = [UIFont fontWithName:CUSTOM_FONT(@"新蒂小丸子小学版", 0)
                                       size:30.f];
    label.center      = self.view.center;
    [self.view addSubview:label];
    
    [[GCDQueue mainQueue] execute:^{
        [label startAnimation];
    } afterDelay:NSEC_PER_SEC * 7];

}


@end


其实,笔者并没有把所有的接口都写好,一大早6点钟起床写代码.......,剩下的就交给你了:)


目录
相关文章
|
5月前
|
前端开发
CSS动画霓虹灯闪烁效果
CSS动画霓虹灯闪烁效果
|
iOS开发
水波涟漪,使用SwiftUI做一个仿iPhone隔空投送动画~
水波涟漪,使用SwiftUI做一个仿iPhone隔空投送动画~
177 0
|
XML Java Android开发
Android动画 补间动画
补间动画:属于Android中View动画的一种,就是涵盖了 平移、缩放、旋转 和 透明度四种变化的动画。实现方式有两种:xml文件 和 java代码。 四种补间动画分别为RotateAnimation、ScaleAnimation、TranslateAnimation、AlphaAnimation,他们的父类为Animation。
|
API Android开发
Android动画——属性动画
在属性动画中,常用到的API有ValueAnimator,ObjectAnimator。 ValueAnimator:时间引擎,负责计算各个帧的属性值,基本上其他属性动画都会直接或间接继承它; ObjectAnimator: ValueAnimator 的子类,对指定对象的属性执行动画。
170 0
|
前端开发 开发工具
教你用HTML+CSS实现百叶窗动画效果
我们浏览网页的时候总能看见一些炫酷的特效,比如百叶窗效果,本文我们就用HTML+CSS制作一个百叶窗小项目,适合刚学前端的小伙伴,使用代码简单易懂,很容易上手,学习完本文后,相信你也能敲出来属于自己的百叶窗效果,改变图片及相应盒子的大小,有女朋友的可以试着放几张在一起的照片,也是一件非常浪漫的事
590 0
教你用HTML+CSS实现百叶窗动画效果
|
Android开发 内存技术
Android动画(帧动画、补间动画、属性动画)讲解
帧动画:是一种常见的动画形式(Frame By Frame),其原理是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。 补间动画:指的是做FLASH动画时,在两个关键帧中间需要做“补间动画”,才能实现图画的运动; 属性动画:帧动画与补间动画实现了对View进行移动、缩放、旋转和淡入淡出的效果。但对于android开发师来说是不够的,同时移动、缩放、旋转和淡入淡出的效果也不再只是一种视觉上的动画效果了。所以从Android 3.0版本开始,系统给我们提供了一种全新的动画模式,属性动画(property animation)。
358 0
|
容器
利用CustomScrollView实现更有趣的滑动效果
本篇介绍了 CustomScrollView 的基本用法以及 SliverAppBar 的使用,通过 SliverAppBar 可以让导航栏的滑动更有趣。
844 0
利用CustomScrollView实现更有趣的滑动效果
SwiftUI—使用withAnimation制作缩放和渐隐动画
SwiftUI—使用withAnimation制作缩放和渐隐动画
1035 0
|
存储 图形学
动画系统中的基础动画
动画系统中的基础动画
185 0

热门文章

最新文章