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

时间: 2024-10-04 14:49:13

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

UILabel混合显示动画效果

UILabel混合显示动画效果   效果   源码 https://github.com/YouXianMing/Animations // // MixedColorProgressViewController.m // Animations // // Created by YouXianMing on 16/1/5. // Copyright 2016年 YouXianMing. All rights reserved. // #import "MixedColorProgressView

photoshop将废片变身为高逼格的电影感大片效果

  给大家分享一个利用 photoshop将废片变身为高逼格的电影感大片效果!教程简单粗暴,修图调色处理后效果变得炒鸡棒!感兴趣的童鞋可以查看大图参考学习. 分类: PS图片处理

UILabel的缩放动画效果

UILabel的缩放动画效果   效果图   源码 https://github.com/YouXianMing/Animations // // ScaleLabel.h // Animations // // Created by YouXianMing on 15/12/17. // Copyright 2015年 YouXianMing. All rights reserved. // #import <UIKit/UIKit.h> @interface ScaleLabel : UI

android实现字体闪烁动画的方法

  本文实例讲述了android实现字体闪烁动画的方法.分享给大家供大家参考.具体如下: 这里基于线程和Timer实现Android的字体闪烁动画效果. ? public class ActivityMain extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); spark();

android实现字体闪烁动画的方法_Android

本文实例讲述了android实现字体闪烁动画的方法.分享给大家供大家参考.具体如下: 这里基于线程和Timer实现Android的字体闪烁动画效果. public class ActivityMain extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); spark(); } pr

iOS高仿微信相册界面翻转过渡动画效果_IOS

 点开微信相册的时候,想要在相册图片界面跳转查看点赞和评论时,微信会采用界面翻转的过渡动画来跳转到评论界面,好像是在图片界面的背面一样,点击完成又会翻转回到图片界面,这不同于一般的导航界面滑动动画,觉得很有意思,于是自己学着做了一下,其实也很简单,下面是实现的类似的效果图: 在图片界面点击右下角的查看评论会翻转到评论界面,评论界面点击左上角的返回按钮会反方向翻转回图片界面,真正的实现方法,与传统的导航栏过渡其实只有一行代码的区别,让我们来看看整体的实现. 首先我们实现图片界面,这个界面上有黑色的

WPS演示中怎么添加闪烁字幕动画效果

  WPS演示中怎么添加闪烁字幕动画效果 1.打开WPS演示,新建有一个幻灯片,为了不影响制作过程,我删除了标题框和副标题框. 2.点击绘图工具栏--自选图形--基本形状--笑脸,在幻灯片中添加该表情动画. 3.右键点击该表情,选择设置对象格式. 4.在颜色与线条选项卡中,填充色选择填充效果. 5.颜色勾选预设,在预设颜色中选择一种效果,确定. 6.右键点击表情,选择自定义动画,在右侧点击添加效果--进入--盒状. 7.开始选择单击时,方向选择内,速度选为快速. 8.再次点击添加效果--动作路径

Photoshop制作星光闪烁GIF动画效果

  Photoshop制作星光闪烁GIF动画效果          最终效果 1.首先要绘制好星星,然后再做GIF动画.新建一个文档,参数如图. 2.设置参考线. 3.参数如图. 4.显示网格. 5.背景填充黑色. 6.新建一个图层. 分类: PS文字教程

心电图动画效果

心电图动画效果   效果   源码 https://github.com/YouXianMing/Animations // // BezierPathViewController.m // Animations // // Created by YouXianMing on 16/1/11. // Copyright 2016年 YouXianMing. All rights reserved. // #import "BezierPathViewController.h" #imp