倒计时特效的CountAnimationLabel

简介:

倒计时特效的CountAnimationLabel

效果:

源码:

CountAnimationLabel.h 与 CountAnimationLabel.m

//
//  CountAnimationLabel.h
//  YouXianClock
//
//  Created by YouXianMing on 14-10-14.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface CountAnimationLabel : 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, assign) NSTimeInterval  fadeInDuration;   // 默认值为1s
@property (nonatomic, assign) NSTimeInterval  fadeOutDuration;  // 默认值为2s
@property (nonatomic, assign) NSTimeInterval  showDuration;     // 默认值为0.5s
@property (nonatomic, assign) BOOL            removeOnComplete; // 动画结束后是否被移除掉

- (void)startAnimation;

@end


//
//  CountAnimationLabel.m
//  YouXianClock
//
//  Created by YouXianMing on 14-10-14.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "CountAnimationLabel.h"

@interface CountAnimationLabel ()

@property (nonatomic, strong) UILabel  *backedLabel;

@end

@implementation CountAnimationLabel

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

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

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

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

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

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

@end

以下是使用详情:

目录
相关文章
|
10天前
|
JavaScript
新年倒计时动画网页特效源码
新年倒计时动画网页特效源码是一段基于JS实现的中国节日元旦2025年倒计时动画效果代码,利用此代码,可以实现任意节日的倒计时效果,欢迎对此代码感兴趣的朋友前来下载参考。
22 6
|
4月前
|
JavaScript
简单倒计时
【8月更文挑战第29天】原理:定的时间 -现在时间=时间差 讲时间差转换成时 分 秒 显示出来
33 0
|
6月前
|
前端开发 JavaScript
HTML+CSS+JS 倒计时动画效果
HTML+CSS+JS 倒计时动画效果
|
7月前
CSS3电影播放倒计时读秒代码
CSS3电影播放倒计时读秒代码
46 2
CSS3电影播放倒计时读秒代码
|
7月前
|
开发者 智能硬件
倒计时器
倒计时器
199 1
|
7月前
uniapp实现倒计时
uniapp实现倒计时
134 0
倒计时功能制作
今天制作一个商城项目距离抢购还剩多长时间的一个小功能 首先要知道这个倒计时是不断的变化的,所以需要用到定时器来自动变化(setInterval),有三个标签存放时分秒,再利用innerHTML将计算出来的时间放入三个标签内,第一次执行也是间隔毫秒数,因此刷新页面会有空白,我们最好采取封装函数的方式,这样可以先调用一次这个函数,防止刚开始刷新页面有空白问题。