美文网首页
自增长数字效果实现

自增长数字效果实现

作者: 南京小伙 | 来源:发表于2017-09-01 11:43 被阅读0次

工程中要实现下图自增长数字的效果。

实现的思想:从开始到本次数字跳动所花费的时间占总动画时长的比率,通过这个比率来换算出本次数字跳动该出现的值。

需要 CADisplayLink 来帮助实现。(在波浪中已经使用过了)

构造方法:

- (void)countFromValue:(CGFloat)fromValue toValue:(CGFloat)toValue duration:(NSTimeInterval)duration {

      _toValue = toValue; //最大值

      _fromValue = fromValue;  // 初始值

     _duration = duration; // 持续时间

     _progress = 0; // 从开始到本次数字跳动占总时间的进度

     _lastUpdate = [NSDate timeIntervalSinceReferenceDate]; // 本次跳动的上次数字跳动

     self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateValue:)];

     [self.displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];

}

- (void)updateValue:(CADisplayLink *)displayLink {

        NSTimeInterval now = [NSDate timeIntervalSinceReferenceDate];

        _progress += now - _lastUpdate;  // 通过每次 _progress 累加来计算总进度

        _lastUpdate = now;

        [self setTextValue:[self currentValue]];

}

- (void)setTextValue:(CGFloat)value {

    NSString *str = [NSString stringWithFormat:@"%f",value];

    self.text = str;

}

- (CGFloat)currentValue {

    if (_progress >= _duration) {  // _progress 是否大于总时长

      return _toValue;

     }

    CGFloat percent = _progress / _duration; // 累加的_progress占总时间的比率

//    CGFloat updateVal = powf(percent, 3.f); // 可以通过次方来加速增长

    return _fromValue + (percent * (_toValue - _fromValue)); // 本次跳动的数字

}

 

相关文章

  • 自增长数字效果实现

    工程中要实现下图自增长数字的效果。 实现的思想:从开始到本次数字跳动所花费的时间占总动画时长的比率,通过这个比率来...

  • 滚动显示数字文本封装

    gibhub地址:ScrollNumber 效果图 功能及什么使用 一、实现了数字滚动增长动画(主要包含三种类型数...

  • 模拟水纹波动效果

    功能 模拟水纹波动效果 实现双层水纹一起运动效果 实现增长的效果 展示 效果展示 代码戳这里

  • 0908 talking points

    1. 阿里巴巴赋能品牌实现线下业务数字化,线上线下全方位数字化运营,提升品牌建设和业务增长的效果和效率。 2. 品...

  • SwiftUI 动画教程之实现正计时动画数字增长效果 Anima

    实战需求 SwiftUI 动画教程之实现正计时动画数字增长效果 本文价值与收获 看完本文后,您将能够作出下面的界面...

  • 仿余额宝数字滚动增长的效果实现

    这个已经是被大家做烂了的效果了,之所以我自己做这个效果而不是直接从网上拷贝一个来用,主要是因为网上的工具不太符合我...

  • sql实现简单自增长

    在设计数据库表的过程中,主键一般都设为自增长,数据库产品自带的序列可以解决这个问题。 其实,用简单的sql查询语句...

  • Vue实现选项卡效果

    效果图:点击上方选项卡实现下方数字切换效果 body部分: js部分: style部分:

  • 点赞的两种实现效果

    本章主要记录点赞的两种效果: 点赞效果1: 实现类似如下的点赞+1,数字从下往上飘动的动画(JS实现+CSS3实现...

  • Go语言实现整型自增id生成器

    最近需要实现一个自增序列的增长功能,原来的做法是从数据库中实现自增长就可以了,可是最近用的sequel pro死活...

网友评论

      本文标题:自增长数字效果实现

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