高逼格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点钟起床写代码.......,剩下的就交给你了:)

时间: 2024-08-07 23:51:33

高逼格UILabel的闪烁动画效果的相关文章

CSS3感应鼠标的div背景闪烁动画效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3感应鼠标的div背景闪烁动画效果丨

高逼格Android转场动画

前言 转场动画在交互上非常有优势,本文从转场动画的使用场景和方法起,最后是实现掘金中用户头像的转场动画. 转场动画适用的版本 Activity transition APIs 只有在Android 5.0(API 21)或者更高的版本上能使用.所以在使用之前需要进行版本判断.当版本API 大于21时使用转场动画,否则不使用. // Check if we're running on Android 5.0 or higher if (Build.VERSION.SDK_INT >= Build.

iOS之iPhone解锁界面的&quot;滑动来解锁&quot;闪烁动画效果,好奇的赶紧进来取走,别看了,说的就是你0.0

各位亲爱的朋友们,你们每天解锁iPhone,看到底部"滑动来解锁"这个效果,难道不好奇么???那么好学的博主,今天在github上看到个库,facebook搞的,非常简单 的API就能完成你们看到的效果,这么酷炫掉渣天的效果,写出来拿给别人装装B那是再 好不过了. 不BB了,先给你们facebook的库  传送门:点击打开链接 排排坐哈,看电影啦   老规矩,看图说话: 我去,这配图,我自己都觉得好看,我给满分,觉得好看的各位希望能给我顶一下 开始介绍 博主也是第一次尝试写这个东西,先

JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery夜晚天空满天星星闪烁动画</title> <script src="js/jquery.min.js"></script> <style&

【凯子哥带你夯实应用层】都说“知乎”逼格高,我们来实现“知乎”回答详情页动画效果

转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 2014已经远去,2015年的目标很简单,就是继续熟悉Android的上层API,虽然偶尔会为了某个问题去研究下FrameWork的代码,但是对于我们这种新手来说,只有对上层的API用的熟练了,才能更好的往下研究原理.所以,今年的任务就是继续学习和研究Android的上层API的使用,顺便写一篇毕业论文,然后毕个业. OK,从这篇开始,咱们就开始[凯子哥带你夯实应用层]系列,如果你有想要实现的界面效果,或

CSS3背景闪烁和图片缩放动画效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3感应鼠标的背景闪烁和图片缩放动态效

iOS开发笔记7:Text、UI交互细节、两个动画效果等

Text主要总结UILabel.UITextField.UITextView.UIMenuController以及UIWebView/WKWebView相关的一些问题. UI细节主要总结界面交互开发中遇到的一些细节问题,包括Masonry部分的问题. 动画介绍最近用到的两个,算是常用级别的,动画这部分之后会专门研究总结下. 最后介绍两个工具及三个Xcode使用设置的问题. 1.Text (1)UILabel显示多行文字并且文字置顶显示 不限制UILabel的高度(宽度需要设置,确定文字何时换行)

使用maskView设计动画效果

在 极客学院 简单学习了一下 如何使用maskView设计动画效果 主要是通过CAGradientLayer 或者 带有alpha的图片来操作 //MARK:1. maskView(maskLayer)基本原理 CGFloat width = 120.f; //底图 self.baseImageView = [[UIImageView alloc]initWithFrame:CGRectMake(20, 20, width, width)]; [_baseImageView setImage:[

iOS点击查看大图的动画效果

对于图片来说,除了表情包,几乎都会被点击查看大图.今天就讲解一个查看和收起大图的动画效果,先直接看效果图: 如图所示,最开始是一个小图,点击小图可以查看大图.大图会从小图的位置和大小"弹"出来,同时背景变成半透明的阴影.点击大图或者阴影后,收起大图,同样地弹回到小图去,同时去掉阴影背景,就像是一张图片在伸大缩小一样. 现在看看这是怎么实现的.在思考一个动画的实现方法时,把动画的动作进行分解然后再一个个去思考怎么实现是一个好的习惯,我们稍微分解一下,这个动画在显示大图和收起大图的时候做了