利用UIBezierPath和@"strokeEnd"，@"strokeStart"绘制tabbar动画样式的选中

本文链接：https://blog.youkuaiyun.com/SuperChaoXu/article/details/91455825

自己项目中自定义的UITabbar,选中后有路径的过度，效果图为

动画实现的核心代码为

1.第一步

 [animationPath addArcWithCenter:center1 radius:RADIUS startAngle:M_PI_2-0.001 endAngle:M_PI*2+M_PI_2 clockwise:clockwise];
    [animationPath addArcWithCenter:center2 radius:RADIUS startAngle:M_PI_2-0.001 endAngle:M_PI*2+M_PI_2 clockwise:clockwise];

这里根据点击的前后不同tabbaritem的中心位置，描绘了两段圆弧，然后这段路径给自定义tabbarView的layer，这里两段圆弧的终点和起点会自动使用直线连接，参考说明有（https://www.jianshu.com/p/5e96e754d9cb）

2.绘制起点到终点的线段，代码实现为

CABasicAnimation *strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

 strokeEndAnimation.duration = 0.4; 

 strokeEndAnimation.fromValue = @0;

 strokeEndAnimation.toValue = @1;

然后还伴随着线段的消失，代码的实现为

CABasicAnimation *strokeStartAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];

 strokeStartAnimation.duration = strokeEndAnimation.duration - 0.15;

 strokeStartAnimation.removedOnCompletion = clockwise;

 strokeStartAnimation.fillMode =kCAFillModeForwards;

 strokeStartAnimation.fromValue = @0;

 strokeStartAnimation.toValue = @(1-(s/length));

关于核心动画strokeEnd和strokeStart的使用参见资料有(https://www.jianshu.com/p/e95c79327fe3)以及(https://blog.youkuaiyun.com/u014745414/article/details/44785623?locationNum=10&fps=1) 个人理解是一个负责线段出现，一个是线段的消失

3.最后在动画结束的代理方法里面切换选中的tabbaritem，显示完美衔接，代码为

 self.superview.userInteractionEnabled = YES;

 WGTabBarItem *tapItem = (WGTabBarItem *)[self viewWithTag:_selectIndex + ITEMTAG];

 tapItem.isSelect = YES;

 tapItem.titleLab.textColor = _tintColor;

 _tabBarItem = tapItem;

附上个人github上的代码（https://github.com/xc19930909yu/CustomTabbar）