這里我將展示如何在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
(譯者水平有限,歡迎指正。)
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
