iPhone: 对象沿路径动画

系统 1587 0

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

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

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

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

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

    
  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;
  14. //Setupthepathfortheanimation-thisisverysimilarasthecodethedrawtheline
  15. //insteadofdrawingtothegraphicscontext,insteadwedrawlinesonaCGPathRef
  16. CGPointendPoint=CGPointMake(310,450);
  17. CGMutablePathRefcurvedPath=CGPathCreateMutable();
  18. CGPathMoveToPoint(curvedPath,NULL,10,10);
  19. CGPathAddQuadCurveToPoint(curvedPath,NULL,10,450,310,450);
  20. CGPathAddQuadCurveToPoint(curvedPath,NULL,310,10,10,10);
  21. //Nowwehavethepath,wetelltheanimationwewanttousethispath-thenwereleasethepath
  22. pathAnimation.path=curvedPath;
  23. CGPathRelease(curvedPath);
  24. //Wewillnowdrawacircleatthestartofthepathwhichwewillanimatetofollowthepath
  25. //Weusethesametechniqueasbeforetodrawtoabitmapcontextandtheneventuallycreate
  26. //aUIImageViewwhichweaddtoourview
  27. UIGraphicsBeginImageContext(CGSizeMake(20,20));
  28. CGContextRefctx=UIGraphicsGetCurrentContext();
  29. //Setcontextvariables
  30. CGContextSetLineWidth(ctx,1.5);
  31. CGContextSetFillColorWithColor(ctx,[UIColorgreenColor].CGColor);
  32. CGContextSetStrokeColorWithColor(ctx,[UIColorwhiteColor].CGColor);
  33. //Drawacircle-andpaintitwithadifferentoutline(white)andfillcolor(green)
  34. CGContextAddEllipseInRect(ctx,CGRectMake(1,1,18,18));
  35. CGContextDrawPath(ctx,kCGPathFillStroke);
  36. UIImage*circle=UIGraphicsGetImageFromCurrentImageContext();
  37. UIGraphicsEndImageContext();
  38. UIImageView*circleView=[[UIImageViewalloc]initWithImage:circle];
  39. circleView.frame=CGRectMake(1,1,20,20);
  40. [selfaddSubview:circleView];
  41. //AddtheanimationtothecircleView-onceyouaddtheanimationtothelayer,theanimationstarts
  42. [circleView.layeraddAnimation:pathAnimationforKey:@ "moveTheSquare" ];
  43. }

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

    
  1. -(id)initWithFrame:(CGRect)frame{
  2. if (self=[superinitWithFrame:frame]){
  3. [selfdrawACurvedLine];
  4. [selfanimateCicleAlongPath];
  5. }
  6. return self;
  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。但是那是一些我没有尝试的东西。上面的例子应该足够让你开始沿着路径做动画。

Animate along a path

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

(译者水平有限,欢迎指正。)

iPhone: 对象沿路径动画


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论