iPhone: 对象沿路径动画

这里我将展示如何在UIView上让对象沿着路径动画，我将创建路径并画到UIView上让你能都看见，并沿相同的路径来做动画。

我在添加到屏幕的UIView完成所有的这些…

首先，我们在屏幕上画一条曲线

1. //Thisdrawsaquadraticbeziercurvedlinerightacrossthescreen
2. -(void)drawACurvedLine{
3. //Createabitmapgraphicscontext,youwilllatergetaUIImagefromthis
4. UIGraphicsBeginImageContext(CGSizeMake(320,460));
5. CGContextRefctx=UIGraphicsGetCurrentContext();
7. //Setvariablesinthecontextfordrawing
8. CGContextSetLineWidth(ctx,1.5);
9. CGContextSetStrokeColorWithColor(ctx,[UIColorwhiteColor].CGColor);
11. //Setthestartpointofyourdrawing
12. CGContextMoveToPoint(ctx,10,10);
13. //Theendpointofthelineis310,450....i'malsosettingareferencepointof10,450
14. //Aquadraticbeziercurveisdrawnusingthesecoordinates-experimentandseetheresults.
15. CGContextAddQuadCurveToPoint(ctx,10,450,310,450);
16. //Addanothercurve,theoppositeoftheabove-finishingbackwherewestarted
17. CGContextAddQuadCurveToPoint(ctx,310,10,10,10);
19. //Drawtheline
20. CGContextDrawPath(ctx,kCGPathStroke);
22. //GetaUIImagefromthecurrentbitmapcontextwecreatedatthestartandthenendtheimagecontext
23. UIImage*curve=UIGraphicsGetImageFromCurrentImageContext();
24. UIGraphicsEndImageContext();
26. //Withtheimage,weneedaUIImageView
27. UIImageView*curveView=[[UIImageViewalloc]initWithImage:curve];
28. //Settheframeoftheview-whichisusedtopositionitwhenweaddittoourcurrentUIView
29. curveView.frame=CGRectMake(1,1,320,460);
30. curveView.backgroundColor=[UIColorclearColor];
31. [selfaddSubview:curveView];
32. }

现在我我创建了一个关键帧动画，并添加一个和我们话得线一样的路径。我们还将画一个圈，并沿着路径做动画:

1. -(void)animateCicleAlongPath{
2. //Preparetheanimation-weusekeyframeanimationforanimationsofthiscomplexity
3. CAKeyframeAnimation*pathAnimation=[CAKeyframeAnimationanimationWithKeyPath:@"position"];
4. //Setsomevariablesontheanimation
5. pathAnimation.calculationMode=kCAAnimationPaced;
6. //Wewanttheanimationtopersist-notsoimportantinthiscase-butkeptforclarity
7. //Ifweanimatedsomethingfromlefttoright-andwewantedittostayinthenewposition,
8. //thenwewouldneedtheseparameters
9. pathAnimation.fillMode=kCAFillModeForwards;
10. pathAnimation.removedOnCompletion=NO;
11. pathAnimation.duration=5.0;
12. //Letsloopcontinuouslyforthedemonstration
13. pathAnimation.repeatCount=1000;
15. //Setupthepathfortheanimation-thisisverysimilarasthecodethedrawtheline
16. //insteadofdrawingtothegraphicscontext,insteadwedrawlinesonaCGPathRef
17. CGPointendPoint=CGPointMake(310,450);
18. CGMutablePathRefcurvedPath=CGPathCreateMutable();
19. CGPathMoveToPoint(curvedPath,NULL,10,10);
20. CGPathAddQuadCurveToPoint(curvedPath,NULL,10,450,310,450);
21. CGPathAddQuadCurveToPoint(curvedPath,NULL,310,10,10,10);
23. //Nowwehavethepath,wetelltheanimationwewanttousethispath-thenwereleasethepath
24. pathAnimation.path=curvedPath;
25. CGPathRelease(curvedPath);
27. //Wewillnowdrawacircleatthestartofthepathwhichwewillanimatetofollowthepath
28. //Weusethesametechniqueasbeforetodrawtoabitmapcontextandtheneventuallycreate
29. //aUIImageViewwhichweaddtoourview
30. UIGraphicsBeginImageContext(CGSizeMake(20,20));
31. CGContextRefctx=UIGraphicsGetCurrentContext();
32. //Setcontextvariables
33. CGContextSetLineWidth(ctx,1.5);
34. CGContextSetFillColorWithColor(ctx,[UIColorgreenColor].CGColor);
35. CGContextSetStrokeColorWithColor(ctx,[UIColorwhiteColor].CGColor);
36. //Drawacircle-andpaintitwithadifferentoutline(white)andfillcolor(green)
37. CGContextAddEllipseInRect(ctx,CGRectMake(1,1,18,18));
38. CGContextDrawPath(ctx,kCGPathFillStroke);
39. UIImage*circle=UIGraphicsGetImageFromCurrentImageContext();
40. UIGraphicsEndImageContext();
42. UIImageView*circleView=[[UIImageViewalloc]initWithImage:circle];
43. circleView.frame=CGRectMake(1,1,20,20);
44. [selfaddSubview:circleView];
46. //AddtheanimationtothecircleView-onceyouaddtheanimationtothelayer,theanimationstarts
47. [circleView.layeraddAnimation:pathAnimationforKey:@"moveTheSquare"];
48. }

要让所有的都跑起来，你可以使用init函数：

1. -(id)initWithFrame:(CGRect)frame{
2. if(self=[superinitWithFrame:frame]){
3. [selfdrawACurvedLine];
4. [selfanimateCicleAlongPath];
5. }
6. returnself;
7. }

在你的ViewController中像这样写

1. -(void)viewDidLoad{
2. UIView*customView=[[Canvasalloc]initWithFrame:CGRectMake(0,0,320,460)];
3. customView.backgroundColor=[UIColorblackColor];
4. [self.viewaddSubview:customView];
5. [customViewrelease];
6. [superviewDidLoad];
7. }

还有，不要忘记添加 Quartz 引用:

1. #import<QuartzCore/QuartzCore.h>

我确定有很多更好的方式来做这个事，例如使用CALayers 和添加CGImage 到layers。但是那是一些我没有尝试的东西。上面的例子应该足够让你开始沿着路径做动画。

这里是工程拷贝http://blog.devedup.com/wp-content/uploads/2010/06/AnimateAlongAPath.zip

（译者水平有限，欢迎指正。）