本篇實現(xiàn)一個兩個按鈕之間點擊動畫的實現(xiàn)。主要效果見下圖：
shapeLayer動畫5.gif
這個實現(xiàn)主要是點擊按鈕的時候要做的處理為：
- 1哥纫、點擊兩個按鈕時霉旗，動畫的運動方向
- 2、點擊按鈕的時候磺箕，layer的起始點和結束點
- 3奖慌、動畫結束的時候，要保持動畫結束后的樣子
- 4松靡、實現(xiàn)這個效果简僧，要實現(xiàn)兩個動畫效果，一個是前進的動畫雕欺，一個是后面跟進的動畫
.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];
}
}
/**
* 實現(xiàn)動畫
* @param fromPoint 開始點
* @param toPoint 結束點
* @param clockwise 動畫順序
*/
-(void)cicle:(CGPoint)fromPoint ToCicle:(CGPoint)toPoint clockwise:(BOOL)clockwise{
//創(chuàng)建第一個中心點
CGPoint point1 = fromPoint;
//創(chuàng)建第二個中心點
CGPoint point2 = toPoint;
//計算路徑長度
CGFloat length = 4*M_PI*20 + 200;
//計算一個圓的長度,用來計算后續(xù)動畫的結束點
CGFloat cicleLength = 2 * M_PI * 20;
//創(chuàng)建路徑
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;
//創(chuàng)建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];
//創(chuàng)建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來是的動畫組開起來更加美觀流暢*/
//創(chuàng)建動畫組
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的點擊動畫實現(xiàn)，也可以實現(xiàn)兩個按鈕之間的動畫效果苛让；
更多的動畫效果會在后續(xù)學習分享出來沟蔑；
