从0开始自定义一个支付密码输入框（2）

在上一篇文章 从0开始自定义一个支付密码输入框（1） 中，已经实现了密码框的基本功能，本篇要给圆点加上出现和消失的动画。

知识储备

动画效果：CADisplayLink

实现效果

效果

实现过程

1.初始化CADisplayLink

-(CADisplayLink *)displayLink{
    if (_displaylink == nil) {
        _displaylink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateString)];
        _displaylink.paused = YES;
        [_displaylink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
    }
    return _displaylink;
}

2.动画中，我们实际上是通过改变圆点绘制时的颜色透明度（0～1）和大小倍数（0～1）实现效果。所以我们需要两个可变数组来保存每个圆点的透明度和半径

    NSMutableArray <NSNumber *>* dotAlphas;
    NSMutableArray <NSNumber *>* dotScans;

-(NSMutableArray *)dotAlphas{
    if (dotAlphas == nil) {
        dotAlphas = [NSMutableArray arrayWithCapacity:self.boxCount];
        for (int i = 0; i < self.boxCount; i ++) {
            dotAlphas[i] = @0;
        }
    }
    return dotAlphas;
}

-(NSMutableArray *)dotScans{
    if (dotScans == nil) {
        dotScans = [NSMutableArray arrayWithCapacity:self.boxCount];
        for (int i = 0; i < self.boxCount; i ++) {
            dotScans[i] = @0;
        }
    }
    return dotScans;
}

3.改变圆点的绘制方法，让它根据数组中的值来绘制

/**
 * 绘制圆点
 * context   上下文
 * size  总大小（self的size）
 **/
-(void)drawDot:(CGContextRef)context
            size:(CGSize)size{
    //圆心的y坐标
    float cy = size.height / 2;
    //半径
    float half = size.width / self.boxCount / 2;
    for (int i = 0; i < self.boxCount; i ++) {
        //设置填充颜色
        CGContextSetFillColorWithColor(context, [self.dotColor colorWithAlphaComponent:[self.dotAlphas[i] floatValue]].CGColor);
        //圆心的x坐标
        float cx = size.width * i / self.boxCount + half;
        //添加一个圆
        CGContextAddArc(context, cx, cy, self.dotRadius * [self.dotScans[i] floatValue], 0, 2 * M_PI, 0);
        //绘制填充
        CGContextDrawPath(context, kCGPathFill);
    }
}

4.动画
由于CADisplayLink启动后会一直调用方法，所以需要定义开始时间、动画时长、结束时间来控制动画的开始和结束。

@property (assign, nonatomic) CFTimeInterval showDuration; //圆点的动画时间，默认为0.2s
@property (assign, nonatomic) CFTimeInterval beginTime;
@property (assign, nonatomic) CFTimeInterval endTime;

//开始动画
-(void)startTextChangeAnimation{
    self.beginTime = CACurrentMediaTime();
    self.endTime = self.beginTime + self.showDuration;
    self.displayLink.paused = NO;
    
}

在CADisplayLink调用方法时，根据情况判断透明度和大小的变化情况，然后重新绘界面。

- (void)updateString
{
    //获取当前时间
    CFTimeInterval now = CACurrentMediaTime();
    NSInteger index = self.text.length - 1;
    for (int i = 0; i < self.boxCount; i ++) {
        //原数值(由于两个值一致，所以就用一个来计算了)
        CGFloat number =  [self.dotAlphas[i] floatValue];
        //变化率
        CGFloat d = 1;
        if (self.showDuration > 0) {
            //计算变化率（总数值／(动画帧数 * 动画时间)），即每次刷新屏幕变化的值
            d = 1/(15.0f*self.showDuration);
        }
        if (i > index) {
            if (number > 0) {
                number -= d;
            }
        }else{
            if (number < 1) {
                number += d;
            }
        }
        self.dotAlphas[i] = @(number);
        self.dotScans[i] = @(number);
    }
    //重绘视图
    [self setNeedsDisplay];
    //如果已经到了动画结束时间，就停止
    if (now > self.endTime) {
        self.displayLink.paused = YES;
    }
}

5.更改setText:的方法，改变时启动动画

-(void)setText:(NSString *)text{
    if (text.length <= self.boxCount) {
        _text = text;
        [self startTextChangeAnimation];
    }
}

到此，动画添加完成。
下一篇，探究一下如何弹出键盘输入数字。