这里我将展示如何在UIView上让对象沿着路径动画,我将创建路径并画到UIView上让你能都看见,并沿相同的路径来做动画。
我在添加到屏幕的UIView完成所有的这些…
首先,我们在屏幕上画一条曲线
-
//Thisdrawsaquadraticbeziercurvedlinerightacrossthescreen
-
-(
void
)drawACurvedLine{
-
//Createabitmapgraphicscontext,youwilllatergetaUIImagefromthis
-
UIGraphicsBeginImageContext(CGSizeMake(320,460));
-
CGContextRefctx=UIGraphicsGetCurrentContext();
-
-
//Setvariablesinthecontextfordrawing
-
CGContextSetLineWidth(ctx,1.5);
-
CGContextSetStrokeColorWithColor(ctx,[UIColorwhiteColor].CGColor);
-
-
//Setthestartpointofyourdrawing
-
CGContextMoveToPoint(ctx,10,10);
-
//Theendpointofthelineis310,450....i'malsosettingareferencepointof10,450
-
//Aquadraticbeziercurveisdrawnusingthesecoordinates-experimentandseetheresults.
-
CGContextAddQuadCurveToPoint(ctx,10,450,310,450);
-
//Addanothercurve,theoppositeoftheabove-finishingbackwherewestarted
-
CGContextAddQuadCurveToPoint(ctx,310,10,10,10);
-
-
//Drawtheline
-
CGContextDrawPath(ctx,kCGPathStroke);
-
-
//GetaUIImagefromthecurrentbitmapcontextwecreatedatthestartandthenendtheimagecontext
-
UIImage*curve=UIGraphicsGetImageFromCurrentImageContext();
-
UIGraphicsEndImageContext();
-
-
//Withtheimage,weneedaUIImageView
-
UIImageView*curveView=[[UIImageViewalloc]initWithImage:curve];
-
//Settheframeoftheview-whichisusedtopositionitwhenweaddittoourcurrentUIView
-
curveView.frame=CGRectMake(1,1,320,460);
-
curveView.backgroundColor=[UIColorclearColor];
-
[selfaddSubview:curveView];
-
}
现在我我创建了一个关键帧动画,并添加一个和我们话得线一样的路径。我们还将画一个圈,并沿着路径做动画:
-
-(
void
)animateCicleAlongPath{
-
//Preparetheanimation-weusekeyframeanimationforanimationsofthiscomplexity
-
CAKeyframeAnimation*pathAnimation=[CAKeyframeAnimationanimationWithKeyPath:@
"position"
];
-
//Setsomevariablesontheanimation
-
pathAnimation.calculationMode=kCAAnimationPaced;
-
//Wewanttheanimationtopersist-notsoimportantinthiscase-butkeptforclarity
-
//Ifweanimatedsomethingfromlefttoright-andwewantedittostayinthenewposition,
-
//thenwewouldneedtheseparameters
-
pathAnimation.fillMode=kCAFillModeForwards;
-
pathAnimation.removedOnCompletion=NO;
-
pathAnimation.duration=5.0;
-
//Letsloopcontinuouslyforthedemonstration
-
pathAnimation.repeatCount=1000;
-
-
//Setupthepathfortheanimation-thisisverysimilarasthecodethedrawtheline
-
//insteadofdrawingtothegraphicscontext,insteadwedrawlinesonaCGPathRef
-
CGPointendPoint=CGPointMake(310,450);
-
CGMutablePathRefcurvedPath=CGPathCreateMutable();
-
CGPathMoveToPoint(curvedPath,NULL,10,10);
-
CGPathAddQuadCurveToPoint(curvedPath,NULL,10,450,310,450);
-
CGPathAddQuadCurveToPoint(curvedPath,NULL,310,10,10,10);
-
-
//Nowwehavethepath,wetelltheanimationwewanttousethispath-thenwereleasethepath
-
pathAnimation.path=curvedPath;
-
CGPathRelease(curvedPath);
-
-
//Wewillnowdrawacircleatthestartofthepathwhichwewillanimatetofollowthepath
-
//Weusethesametechniqueasbeforetodrawtoabitmapcontextandtheneventuallycreate
-
//aUIImageViewwhichweaddtoourview
-
UIGraphicsBeginImageContext(CGSizeMake(20,20));
-
CGContextRefctx=UIGraphicsGetCurrentContext();
-
//Setcontextvariables
-
CGContextSetLineWidth(ctx,1.5);
-
CGContextSetFillColorWithColor(ctx,[UIColorgreenColor].CGColor);
-
CGContextSetStrokeColorWithColor(ctx,[UIColorwhiteColor].CGColor);
-
//Drawacircle-andpaintitwithadifferentoutline(white)andfillcolor(green)
-
CGContextAddEllipseInRect(ctx,CGRectMake(1,1,18,18));
-
CGContextDrawPath(ctx,kCGPathFillStroke);
-
UIImage*circle=UIGraphicsGetImageFromCurrentImageContext();
-
UIGraphicsEndImageContext();
-
-
UIImageView*circleView=[[UIImageViewalloc]initWithImage:circle];
-
circleView.frame=CGRectMake(1,1,20,20);
-
[selfaddSubview:circleView];
-
-
//AddtheanimationtothecircleView-onceyouaddtheanimationtothelayer,theanimationstarts
-
[circleView.layeraddAnimation:pathAnimationforKey:@
"moveTheSquare"
];
-
}
要让所有的都跑起来,你可以使用init函数:
-
-(id)initWithFrame:(CGRect)frame{
-
if
(self=[superinitWithFrame:frame]){
-
[selfdrawACurvedLine];
-
[selfanimateCicleAlongPath];
-
}
-
return
self;
-
}
在你的ViewController中像这样写
-
-(
void
)viewDidLoad{
-
UIView*customView=[[Canvasalloc]initWithFrame:CGRectMake(0,0,320,460)];
-
customView.backgroundColor=[UIColorblackColor];
-
[self.viewaddSubview:customView];
-
[customViewrelease];
-
[superviewDidLoad];
-
}
还有,不要忘记添加 Quartz 引用:
-
#import<QuartzCore/QuartzCore.h>
我确定有很多更好的方式来做这个事,例如使用CALayers 和添加CGImage 到layers。但是那是一些我没有尝试的东西。上面的例子应该足够让你开始沿着路径做动画。
这里是工程拷贝http://blog.devedup.com/wp-content/uploads/2010/06/AnimateAlongAPath.zip
(译者水平有限,欢迎指正。)

