這里我將展示如何在UIView上讓對(duì)象沿著路徑動(dòng)畫，我將創(chuàng)建路徑并畫到UIView上讓你能都看見(jiàn)，并沿相同的路徑來(lái)做動(dòng)畫。
我在添加到屏幕的UIView完成所有的這些…
首先，我們?cè)谄聊簧袭嬕粭l曲線
-
//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];
-
}
現(xiàn)在我我創(chuàng)建了一個(gè)關(guān)鍵幀動(dòng)畫，并添加一個(gè)和我們?cè)挼镁€一樣的路徑。我們還將畫一個(gè)圈，并沿著路徑做動(dòng)畫:
-
-(
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"
];
-
}
要讓所有的都跑起來(lái)，你可以使用init函數(shù)：
-
-(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>
我確定有很多更好的方式來(lái)做這個(gè)事，例如使用CALayers 和添加CGImage 到layers。但是那是一些我沒(méi)有嘗試的東西。上面的例子應(yīng)該足夠讓你開(kāi)始沿著路徑做動(dòng)畫。
這里是工程拷貝http://blog.devedup.com/wp-content/uploads/2010/06/AnimateAlongAPath.zip
（譯者水平有限，歡迎指正。）
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
