美文网首页
打字机效果

打字机效果

作者: 元昊 | 来源:发表于2017-06-16 17:34 被阅读9次
typewriteGif.gif

//  TypeWriterLabel.h
 #import <UIKit/UIKit.h>

@interface TypeWriterLabel : UILabel
/** Z
 *  设置单个字打印间隔时间,默认 0.3 秒
 */
@property (nonatomic) NSTimeInterval typewriteTimeInterval;

/** Z
 *  开始打印的位置索引,默认为0,即从头开始
 */
@property (nonatomic) int currentIndex;

/** Z
 *  输入字体的颜色
 */
@property (nonatomic, strong) UIColor *typewriteEffectColor;

/** Z
 *  开始打印
 */
-(void)startTypewrite;

/** Z
 *  定时器
 */
@property (nonatomic, strong) NSTimer  *timer;


@end


 #import "TypeWriterLabel.h"

@implementation TypeWriterLabel

-(void)startTypewrite

{
   
   if (_timer) {
       [_timer invalidate];
       _timer = nil;
   }
   
  _timer = [NSTimer scheduledTimerWithTimeInterval:self.typewriteTimeInterval target:self selector:@selector(outPutWord:) userInfo:nil repeats:YES];

   [_timer fire];
   
}
-(void) outPutWord:(id)atimer

{

   if (self.text.length == self.currentIndex) {
       [atimer invalidate];
       atimer = nil;
   }else{

       self.currentIndex++;
       NSDictionary *dic = @{NSForegroundColorAttributeName: self.typewriteEffectColor};
       NSMutableAttributedString *mutStr = [[NSMutableAttributedString alloc] initWithString:self.text];
       [mutStr addAttributes:dic range:NSMakeRange(0, self.currentIndex)];
       [self setAttributedText:mutStr];

   }

}

@end


-(TypeWriterLabel *)typeLabel{
    if (!_typeLabel) {
        _typeLabel = [[TypeWriterLabel alloc] init];
        [_typeLabel setTypewriteTimeInterval:0.05f];
        [_typeLabel setTypewriteEffectColor:[UIColor grayColor]];
        [_typeLabel setCurrentIndex:0];
        [_typeLabel setBackgroundColor:[UIColor clearColor]];
        [_typeLabel setTextColor:[UIColor clearColor]];
        [_typeLabel setNumberOfLines:0];
    }
    return _typeLabel;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    [self.view setBackgroundColor:[UIColor whiteColor]];
    
    UIImageView *backImageView = [[UIImageView alloc] init];
    [backImageView setFrame:self.view.bounds];
    [backImageView setImage:[UIImage imageNamed:@"1.jpg"]];
    [self.view addSubview:backImageView];
    
    
    [self.typeLabel setFrame:(CGRectMake(20, 30, [UIScreen mainScreen].bounds.size.width - 40, [UIScreen mainScreen].bounds.size.height - 40))];
    [self.view addSubview:self.typeLabel];
    
    [self.typeLabel setText:@"拉塞尔·威斯布鲁克(Russell Westbrook), 1988年11月12日出生于美国加利福尼亚州长滩(Long Beach, CA),美国职业篮球运动员,司职控球后卫,效力于NBA俄克拉荷马城雷霆队。\n拉塞尔·威斯布鲁克于2008年通过选秀进入NBA,新秀赛季入选最佳新秀阵容第一阵容;6次入选全明星阵容,2015、2016连续两年获得全明星赛MVP;2次入选最佳阵容第一阵容,4次入选最佳阵容第二阵容。\n2017年4月10日,雷霆客场106-105战胜掘金,拉塞尔·威斯布鲁克出场37分钟,得到50分16篮板10助攻,收获赛季第42次、职业生涯常规赛第79次三双,打破了1961-62赛季奥斯卡·罗伯特森创造的单赛季41次三纪录。同时,这是威斯布鲁克赛季第3次得分50+的三双,成为NBA历史第一人"];
    [self.typeLabel startTypewrite];
    
}

更新时需要重置currentIndex为0;赋新值;再调用startTypewrite

附Github地址https://github.com/yuanlove/Typewite-TypewriteLabel

相关文章

  • 打字机效果

    更新时需要重置currentIndex为0;赋新值;再调用startTypewrite 附Github地址http...

  • UGUI打字机效果

    在NGUI里有一个现成的脚步可以给Text的文字设置为打字机的效果,而UGUI并没有给我们提供这个方法。 所以下面...

  • javascript 实现打字机效果

  • 2021-01-30

    PR中一些文字效果是如何做成的 1.文字打字机效果:选择文字工具——打开效果控件——在文本栏中选择所需的文字效果—...

  • 给我一首诗的时间

    前端入坑纪 59 今天来分享最简单版打字机效果 好,详解如下! OK,first things first! 点...

  • 【PPT制作】文字打字机效果

    使用软件:WPS演示2019版 制作步骤: 一、插入文本框,输入文字 二、设置动画 ①进入“动画”→选择“出现” ...

  • [JS插件]酷炫的打字机效果: Typed.js

    一. Type.js效果演示 Type.js是一个轻量级的插件, 用于实现页面文字的打字机效果. 它使用起来非常简...

  • 在Premiere里实现打字机效果

    在视频剪辑制作过程中,文字,或者说字体动效的设计,是经常遇到的工作。 而其中,文字的打字机效果可以说很好用。模拟真...

  • 【教程】VEGAS如何实现打字效果

    有很多人问我,用VEGAS能不能做出类似AE“打字机”的效果。 其实有很长一段时间里,我需要做打字效果时都是用AE...

  • 我想有个打字机

    我想有个打字机 我想有个打字机,叮—叮—叮—,打字的时候,声音听上去特别舒服,我想象着摸打字机键盘时的手感,光滑细...

网友评论

      本文标题:打字机效果

      本文链接:https://www.haomeiwen.com/subject/xfymqxtx.html