CAShaperLayer(三)

本篇实现一个两个按钮之间点击动画的实现。主要效果见下图：

shapeLayer动画5.gif

这个实现主要是点击按钮的时候要做的处理为：

• 1、点击两个按钮时，动画的运动方向
• 2、点击按钮的时候，layer的起始点和结束点
• 3、动画结束的时候，要保持动画结束后的样子
• 4、实现这个效果，要实现两个动画效果，一个是前进的动画，一个是后面跟进的动画

.h文件

/**
 * 一个圆到另外一个圆的动画属性
 */
/*动画路径*/
@property (nonatomic,strong) UIBezierPath *animationPath;
/*第一个按钮*/
@property (nonatomic,strong) UIButton  *startBtn;
/*第二个按钮*/
@property (nonatomic,strong) UIButton *endBtn;
/*展示层*/
@property (nonatomic,strong) CAShapeLayer *shapeLayer;

.m文件

/**
 * 从一个圆动画到另外一个圆
 */

/*左边按钮*/
- (UIButton *)startBtn
{
    if(!_startBtn){
        _startBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        
        _startBtn.bounds = CGRectMake(0, 0, 30, 30);
        _startBtn.center = CGPointMake(100, kHeight/2);
        _startBtn.layer.cornerRadius = 15;
        _startBtn.layer.masksToBounds = YES;
        _startBtn.layer.borderColor = [UIColor orangeColor].CGColor;
        _startBtn.layer.borderWidth = 1;
        [_startBtn setTitle:@"点我" forState:UIControlStateNormal];
        [_startBtn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
        _startBtn.titleLabel.font = [UIFont systemFontOfSize:12];
        [_startBtn addTarget:self action:@selector(clickMe:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:_startBtn];
    }
    return _startBtn;
}

/*右边按钮*/
- (UIButton *)endBtn
{
    if(!_endBtn){
        _endBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        _endBtn.bounds = CGRectMake(0, 0, 30, 30);
        _endBtn.center = CGPointMake(300, kHeight/2);
        _endBtn.layer.cornerRadius = 15;
        _endBtn.layer.masksToBounds = YES;
        _endBtn.layer.borderColor = [UIColor orangeColor].CGColor;
        _endBtn.layer.borderWidth = 1;
        [_endBtn setTitle:@"点我" forState:UIControlStateNormal];
        [_endBtn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
        _endBtn.titleLabel.font = [UIFont systemFontOfSize:12];
        [_endBtn addTarget:self action:@selector(clickMe:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:_endBtn];
    }
    return _endBtn;
}

/*显示层shapeLayer*/
- (CAShapeLayer *)shapeLayer
{
    if(!_shapeLayer){
        _shapeLayer = [CAShapeLayer layer];
        _shapeLayer.strokeColor = [UIColor orangeColor].CGColor;
        _shapeLayer.lineWidth = 1;
        _shapeLayer.fillColor = [UIColor clearColor].CGColor;
        _shapeLayer.lineCap = kCALineCapRound;
        [self.layer addSublayer:_shapeLayer];
    }
    return _shapeLayer;
}

//按钮点击方法
- (void)clickMe:(UIButton *)sender{
    if (sender == self.startBtn) {
        BOOL clockwise = YES;
//点击左边按钮的时候，起始点为右边按钮的中心点；结束点为左边按钮的中心点，动画方向为顺时针
        [self cicle:kEndPoint ToCicle:kStartPoint clockwise:clockwise];
    }else{
//点击右边按钮的时候，起始点为左边按钮的中心点；结束点为右边按钮的中心点，动画方向为逆时针
        [self cicle:kStartPoint ToCicle:kEndPoint clockwise:NO];
    }
}

/**
* 实现动画
* @param fromPoint 开始点
* @param toPoint 结束点
* @param clockwise 动画顺序
*/
-(void)cicle:(CGPoint)fromPoint ToCicle:(CGPoint)toPoint clockwise:(BOOL)clockwise{
    //创建第一个中心点
    CGPoint point1 = fromPoint;
    //创建第二个中心点
    CGPoint point2 = toPoint;
    //计算路径长度
    CGFloat length = 4*M_PI*20 + 200;
    //计算一个圆的长度,用来计算后续动画的结束点
    CGFloat cicleLength = 2 * M_PI * 20;
    
    //创建路径
    if (!self.animationPath) {
        self.animationPath = [UIBezierPath bezierPath];
    }
    //删除动画路径上的所有点
    [self.animationPath removeAllPoints];
    [self.animationPath addArcWithCenter:point1 radius:20 startAngle:M_PI_2-0.0001 endAngle:2*M_PI + M_PI_2 clockwise:clockwise];
    [self.animationPath addArcWithCenter:point2 radius:20 startAngle:M_PI_2-0.0001 endAngle:2*M_PI + M_PI_2 clockwise:clockwise];
    self.shapeLayer.path = self.animationPath.CGPath;
    
    //创建strkeEnd动画
    CABasicAnimation * strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    strokeEndAnimation.duration = 3;
    strokeEndAnimation.fromValue = @0;
    strokeEndAnimation.toValue = @1;
    strokeEndAnimation.removedOnCompletion = clockwise;
    strokeEndAnimation.fillMode = kCAFillModeForwards;
//    kCAMediaTimingFunctionEaseOut 是让动画全速开始然后慢慢减速停止
    strokeEndAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    
    //创建strokeStart动画
    CABasicAnimation * strokeStartAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    strokeStartAnimation.duration = strokeEndAnimation.duration - 0.15;
    strokeStartAnimation.fromValue = @0;
    strokeStartAnimation.toValue = @(1-(cicleLength/length));
    strokeStartAnimation.removedOnCompletion = clockwise;
    strokeStartAnimation.fillMode = kCAFillModeForwards;
    //kCAMediaTimingFunctionEaseIn是动画缓慢开始，突然停止
    strokeStartAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    /*通过设置timingFunction来是的动画组开起来更加美观流畅*/
    
    
    //创建动画组
    CAAnimationGroup * group = [CAAnimationGroup animation];
    group.duration = strokeEndAnimation.duration;
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;
    group.repeatCount = 1;
    group.animations = @[strokeEndAnimation,strokeStartAnimation];
    
    [self.shapeLayer addAnimation:group forKey:@"stroke"];
    
}

调用：

[self startBtn];
[self endBtn];

这个动画可以使用在tabbar的点击动画实现，也可以实现两个按钮之间的动画效果；

---

更多的动画效果会在后续学习分享出来；