iOS動畫開發----打分 數字滾動刷新動畫

　　最近項目中用到了打分動畫. 在網上找到了很多Demo,最后找到了JTNumberScrollAnimatedView這個類實現的動畫效果,和項目中用到的非常貼切,幫我省了不少時間,很感謝JTNumberScrollAnimatedView的提供作者,由於項目中有一些需求變動,因此自己改進了一下,寫了一個Demo,方便讀者參閱學習,廢話不多說,直接上代碼.

　　1. 添加打分控件

UIFont *textFont = [UIFont systemFontOfSize:40];
    CGSize textSize = [@"9" sizeWithAttributes:[NSDictionary dictionaryWithObjectsAndKeys:textFont,NSFontAttributeName, nil]];

    //個位十位單獨設置,可分別設定各自速度
    LNNumberScrollAnimatedView *socreTensDigitAnimation = [[LNNumberScrollAnimatedView alloc] initWithFrame:CGRectMake(100, 100, textSize.width, textSize.height)];
    socreTensDigitAnimation.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:socreTensDigitAnimation];
    socreTensDigitAnimation.textColor = [UIColor redColor];
    socreTensDigitAnimation.font = textFont;
    socreTensDigitAnimation.density = 7;
    socreTensDigitAnimation.duration = 1.9;
    socreTensDigitAnimation.minLength = 1;
    [socreTensDigitAnimation setValue:@9];
    [socreTensDigitAnimation sizeToFit];
    socreTensDigitAnimation.isAscending = YES;
    socreTensDigitAnimation.durationOffset = 0.1;
    self.socreTensDigitAnimation = socreTensDigitAnimation;
    
    LNNumberScrollAnimatedView *socreDigitAnimation = [[LNNumberScrollAnimatedView alloc] initWithFrame:CGRectMake(100+textSize.width, 100, textSize.width, textSize.height)];
    socreDigitAnimation.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:socreDigitAnimation];
    socreDigitAnimation.textColor = [UIColor redColor];
    socreDigitAnimation.font = textFont;
    [socreDigitAnimation setValue:@9];
    [socreDigitAnimation sizeToFit];
    socreDigitAnimation.density = 21;
    socreDigitAnimation.duration = 1.95;
    socreDigitAnimation.minLength = 1;
    socreDigitAnimation.isAscending = YES;
    socreDigitAnimation.durationOffset = 0.1;
    self.socreDigitAnimation = socreDigitAnimation;
    
    
    //個位十位統一設置,速度一樣,可設置結束時間間隔差
    CGSize scoreTextSize = [@"19" sizeWithAttributes:[NSDictionary dictionaryWithObjectsAndKeys:textFont,NSFontAttributeName, nil]];
    LNNumberScrollAnimatedView *socreAnimation = [[LNNumberScrollAnimatedView alloc] initWithFrame:CGRectMake(CGRectGetMaxX(socreDigitAnimation.frame)+textSize.width, 100, scoreTextSize.width*1.1, scoreTextSize.height)];
    socreAnimation.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:socreAnimation];
    socreAnimation.textColor = [UIColor blueColor];
    socreAnimation.font = textFont;
    [socreAnimation setValue:@19];
    [socreAnimation sizeToFit];
    socreAnimation.density = 21;
    socreAnimation.duration = 1.95;
    socreAnimation.minLength = 2;
    socreAnimation.isAscending = NO;
    socreAnimation.durationOffset = 0.1;
    self.socreAnimation = socreAnimation;

　　

　　2. 添加音效

#pragma mark - 播放音效
- (void)playSound
{
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"number.wav" withExtension:nil];
    SystemSoundID soundID = 0;
    AudioServicesCreateSystemSoundID((__bridge CFURLRef)(url)
                                     , &soundID);
    AudioServicesPlayAlertSound (soundID);
}

 

　　3. 執行動畫

for (int i = 0; i<19; i++) {
        [self performSelector:@selector(playSound) withObject:nil afterDelay:0.1];
    }
    
    [self.socreTensDigitAnimation setValue:[NSNumber numberWithInt:1]];
    [self.socreTensDigitAnimation startAnimation];
    [self.socreDigitAnimation setValue:[NSNumber numberWithInt:9]];
    [self.socreDigitAnimation startAnimation];
    [self.socreAnimation startAnimation];

　

　　效果如下:

Demo 下載地址:https://github.com/KrystalNa/numberAnimation