前言
起因呢，是在X論壇看到一個動畫，感了興趣，大概講的是一個自行車沿著路移動，路徑大概是下圖。
我下載了作者開源的代碼來看，居然不是路徑動畫，路徑動畫的好處是，如果第二天不讓你這樣騎自行車了呢？如果像過山車一樣繞來繞去怎么辦？用路徑動畫，想怎么跑就怎么跑。
OK，寫個路徑動畫版本
開始動手
先把路徑畫出來。涉及到曲線，我們要用貝塞爾曲線畫。
1 聲明變量
@property(nonatomic,strong)UIBezierPath* bezierPath;
@property(nonatomic,strong)CALayer* shipLayer;
2 聲明圓的圓心和半徑
CGPoint centerPoint = CGPointMake(self.view.frame.size.width/2,100);
CGFloat radius = 50;
CGFloat roundV_4 = M_PI*2* radius /4;//四分之一圓周長，由于路徑關鍵幀之間時間應該是一致的，所以為了勻速運動，要讓每個關鍵幀之間的路徑長度一致
3 畫貝塞爾曲線
self.bezierPath = [[UIBezierPath alloc] init];
[self.bezierPath moveToPoint:CGPointMake(centerPoint.x - roundV_4, centerPoint.y + radius)];
//畫線
[self.bezierPath addLineToPoint:CGPointMake(centerPoint.x, centerPoint.y + radius)];
//畫圓方式1
//[self.bezierPath addArcWithCenter:CGPointMake(self.view.frame.size.width / 2, 100) radius:50 startAngle:M_PI_2 endAngle:-M_PI_2 clockwise:NO];
//[self.bezierPath addArcWithCenter:CGPointMake(self.view.frame.size.width / 2, 100) radius:50 startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:NO];
//畫圓方式2
[self.bezierPath addCurveToPoint:CGPointMake(centerPoint.x+ radius, centerPoint.y) controlPoint1:CGPointMake(centerPoint.x+ radius *tan(M_PI*0.16), centerPoint.y+ radius) controlPoint2:CGPointMake(centerPoint.x+ radius, centerPoint.y+ radius *tan(M_PI*0.16))];
[self.bezierPatha ddCurveToPoint:CGPointMake(centerPoint.x, centerPoint.y- radius) controlPoint1:CGPointMake(centerPoint.x+ radius , centerPoint.y- radius *tan(M_PI*0.16)) controlPoint2:CGPointMake(centerPoint.x+ radius *tan(M_PI*0.16), centerPoint.y- radius)];
[self.bezierPath addCurveToPoint:CGPointMake(centerPoint.x- radius, centerPoint.y) controlPoint1:CGPointMake(centerPoint.x- radius *tan(M_PI*0.16), centerPoint.y- radius) controlPoint2:CGPointMake(centerPoint.x- radius, centerPoint.y- radius *tan(M_PI*0.16))];
[self.bezierPath addCurveToPoint:CGPointMake(centerPoint.x, centerPoint.y+ radius) controlPoint1:CGPointMake(centerPoint.x- radius, centerPoint.y+ radius *tan(M_PI*0.16)) controlPoint2:CGPointMake(centerPoint.x- radius *tan(M_PI*0.16), centerPoint.y+ radius)];
//畫線
[self.bezierPath addLineToPoint:CGPointMake(centerPoint.x+ roundV_4, centerPoint.y+ radius)];
畫圓有兩種方式，第一種是直接用UIBezierPath的-addArcWithCenter:radius:startAngle:endAngle:clockwise:方法，這種方法不能直接畫一個圓，但是可以半個圓半個圓的畫。
這種方式畫出來的路徑有個缺點，大家可以打開注釋，并注釋下面的幾行代碼來試一下。
第二種方式是用曲線的方式畫完整圓弧。這個要一次畫四分之一個圓。
接下來把路徑添加到layer上，并把自行車添加上去
CAShapeLayer*pathLayer = [CAShapeLayer layer];
pathLayer.path = self.bezierPath.CGPath;
pathLayer.fillColor = [UIColor clearColor].CGColor;
pathLayer.strokeColor = [UIColor redColor].CGColor;
pathLayer.lineWidth = 3.0f;
[self.view.layer addSublayer:pathLayer];
self.shipLayer = [CALayer layer];
self.shipLayer.frame = CGRectMake(0,0,56,56);//圖片尺寸
self.shipLayer.position = CGPointMake(centerPoint.x- roundV_4, centerPoint.y+ radius);
self.shipLayer.contents = (__bridge id)[UIImage imageNamed:@"cycle"].CGImage;
[self.view.layer addSublayer:self.shipLayer];
繪制部分完成了，以上內(nèi)容在-viewDidLoad里做就好啦
下面是動畫，我在controller里添加點擊事件來控制動畫開始
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent*)event{
[super touchesBegan:toucheswithEvent:event];
CAKeyframeAnimation*animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position";
animation.duration = 4.0;
animation.path = self.bezierPath.CGPath;
animation.rotationMode = kCAAnimationRotateAuto;
[self.shipLayer addAnimation:animation forKey:nil];
}
這里我用的圖有點要求，正常情況圖片會被路徑穿過的，所以要將圖片做成自行車在上半部分
自行車圖片下載地址：http://upload-images.jianshu.io/upload_images/6559029-1ef55263c9dc9513.png
自行改名為cycle.png放到Assets.xcassets里
enjoy!
