本篇实现一个两个按钮之间点击动画的实现。主要效果见下图：
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的点击动画实现，也可以实现两个按钮之间的动画效果；
更多的动画效果会在后续学习分享出来；
