iOS运动类APP321倒计时动画

作者: 不会写代码的尬先生 | 来源:发表于2018-01-24 11:57 被阅读51次

项目是运动类,有一个321倒计时进入运动界面的功能,实现用了简单的基础动画CABasicAnimation,大致效果如下

gif5新文件.gif

下面我们看一下实现部分

创建了一个CABasicAnimation 使用了其中的缩放transform.scale路径

- (CABasicAnimation *)scaleAnim{
    if (!_scaleAnim) {
        // 缩放动画
        CABasicAnimation * scaleAnim  = [CABasicAnimation animation];
        scaleAnim.keyPath             = @"transform.scale";
        scaleAnim.removedOnCompletion = NO;
        scaleAnim.fillMode            = kCAFillModeForwards;
        scaleAnim.delegate            = self;
        scaleAnim.timingFunction      = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
        scaleAnim.repeatCount         = 1;
        _scaleAnim                    = scaleAnim;
    }
    return _scaleAnim;
}

创建了一个显示内容的label

{
    if (!_aniLabel) {
        UILabel *label          = [UILabel new];
        label.frame             = self.bounds;
        label.tag               = 0;
        label.backgroundColor   = [UIColor clearColor];
        label.text              = self.mtitleArr[label.tag];
        label.textColor         = [UIColor whiteColor];
        label.textAlignment     = NSTextAlignmentCenter;
        _aniLabel               = label;
        [self addSubview:label];
    }
    return _aniLabel;
}

在每次动画结束animationDidStop代理方法里处理一下label上显示的内容

#pragma mark - 动画结束
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    if (anim == [self.aniLabel.layer animationForKey:@"scaleAnim"])
    {//加分
        if (self.aniLabel.tag == self.mtitleArr.count - 1)
        {//动画播放结束do something
            if (self.click) {
                self.click();
            }
        }else
        {//播放动画
            self.aniLabel.tag ++;
            self.aniLabel.text = self.mtitleArr[self.aniLabel.tag];
            [self.aniLabel.layer addAnimation:self.scaleAnim forKey:@"scaleAnim"];
            NSURL *url = [[NSBundle mainBundle] URLForResource:self.msoundArr[self.aniLabel.tag] withExtension:nil];
            [self playerUrl:url];
        }
    }
    
}

附上GitHub地址

以上。

相关文章

网友评论

    本文标题:iOS运动类APP321倒计时动画

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