美文网首页
按钮的倒计时动画

按钮的倒计时动画

作者: L晨曦 | 来源:发表于2017-09-23 14:58 被阅读27次

    平时按钮的倒计时会采用数字展示,这次我们需求有变动,采用一个倒计时的笑动画来实现,下面分享给大家。

    效果:


    ScreenCaptureProject1.gif

    核心代码

    
    -(void)flowerBtnAction{
        _flowerButton.userInteractionEnabled = NO;
        [_flowerButton setImage:[UIImage imageNamed:@"live_sendflower_dark"] forState:UIControlStateNormal];
        _timer = [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(timerCalculate) userInfo:nil repeats:YES];
        [self timerCalculate];
    }
    
    -(void)timerCalculate {
        if (self.shapeLayer.strokeEnd >= 1.0f) {
            [_bgFlowerView removeFromSuperview];
            _shapeLayer = nil;
            _flowerButton.userInteractionEnabled = YES;
            [_flowerButton setImage:[UIImage imageNamed:@"live_sendflower"] forState:UIControlStateNormal];
            [_timer invalidate];
            _timer = nil;
        }else{
            // 开始赋值
            if (_isTime != 0 ) {
                _shapeLayer.strokeEnd = _isTime;
                _isTime = 0;
            }
            self.shapeLayer.strokeEnd += 1/totalTime;
        }
    }
    
    #pragma mark - lazy
    
    - (CAShapeLayer *)shapeLayer {
        if (_shapeLayer == nil) {
            UIBezierPath *path =[UIBezierPath bezierPathWithArcCenter:CGPointMake(flowerWH/2, flowerWH/2) radius:flowerWH startAngle:-M_PI/2 endAngle:M_PI *3 / 2 clockwise:YES];
            _shapeLayer = [CAShapeLayer layer];
            _shapeLayer.strokeStart = 0;
            _shapeLayer.strokeEnd = 0;
            _shapeLayer.path = path.CGPath;
            _shapeLayer.fillColor = [UIColor clearColor].CGColor;
            _shapeLayer.strokeColor =  [UIColor blueColor].CGColor;
            _shapeLayer.lineWidth = flowerWH *2;
            
            _bgFlowerView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, flowerWH, flowerWH)];
            _bgFlowerView.image = [UIImage imageNamed:@"live_sendflower"];
            _bgFlowerView.layer.contentsGravity = kCAGravityCenter;
            _bgFlowerView.layer.mask = _shapeLayer;
            [self.flowerButton addSubview:_bgFlowerView];
        }
        return _shapeLayer;
    }
    
    - (UIButton *)flowerButton {
        if (_flowerButton == nil) {
            _flowerButton = [[UIButton alloc] init];
            _flowerButton  = [UIButton buttonWithType:UIButtonTypeCustom];
            _flowerButton.adjustsImageWhenHighlighted = NO;
            _flowerButton.frame = CGRectMake(0, 0, flowerWH, flowerWH);
            _flowerButton.center = self.view.center;
            [_flowerButton setImage:[UIImage imageNamed:@"live_sendflower"] forState:UIControlStateNormal];
            [_flowerButton addTarget:self action:@selector(flowerBtnAction) forControlEvents:UIControlEventTouchDown];
            [self.view addSubview:_flowerButton];
        }
        return _flowerButton;
        
    }
    
    
    

    githut地址 :https://github.com/396987177/animationForButton.git
    参考文章:http://www.jianshu.com/p/bb934ca504d1

    相关文章

      网友评论

          本文标题:按钮的倒计时动画

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