如何在我的iPad应用不同寻常的曲线路径动画一个图像?(How to animate one ima

2019-06-24 16:43发布

我有两个独立的图像。

  1. CurvedPath图像(附下)
  2. PersonImage

正如你所看到的这条道路是不是有单角完美的弧线。

我有我要动画正是与放大效应这个弧图像中线上方的另一PersonImage。

这个动画应该从左下指向右上点开始。

如何实现这种动画?

我看了一下QuartzCore和BeizerPath动画,但我有那些知识较少,它就会安静难我快速实现这一目标。

Answer 1:

沿路径移动

只要你能得到你想要使用动画核心动画和CAKeyframeAnimation图片对齐,你可以做到这一点的确切路径。

创建position属性的关键帧动画并设置它不要走好人生路动画

CAKeyframeAnimation *moveAlongPath = [CAKeyframeAnimation animationWithKeyPath:@"position"];
[moveAlongPath setPath:myPath]; // As a CGPath

如果您创建的路径作为UIBezierPath,那么你可以通过调用轻松搞定CGPath CGPath贝塞尔路径上。

接下来,您配置与持续时间等动画

[moveAlongPath setDuration:5.0]; // 5 seconds
// some other configurations here maybe...

现在,添加动画到您的ImageView层,它将沿路径动画。

[[myPersonImageView layer] addAnimation:moveAlongPath forKey:@"movePersonAlongPath"];

如果您以前从未使用过的Core Animation,你需要QuartzCore.framework添加到您的项目,并添加#import <QuartzCore/QuartzCore.h>在你执行的顶部。

创建UIBezierPath

如果你不知道一个贝塞尔路径是什么,看看维基百科网站。 一旦你知道你的控制点,你可以创建这样一个简单的贝塞尔曲线(其中所有的点都正常CGPoints):

UIBezierPath *arcingPath = [UIBezierPath bezierPath];
[arcingPath moveToPoint:startPoint];
[arcingPath addCurveToPoint:endPoint 
              controlPoint1:controlPoint1 
              controlPoint2:controlPoint2];
CGPathRef animationPath = [arcingPath CGPath]; // The path you animate along

在放大

为了实现变焦效果,你可以使用转换层的CABasicAnimation应用类似的动画。 简单地从0缩放动画变换(无限小)到1缩放变换(正常大小)。

CABasicAnimation *zoom = [CABasicAnimation animationWithKeyPath:@"transform"];
[zoom setFromValue:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.0, 0.0, 1.0);];
[zoom setToValue:[NSValue valueWithCATransform3D:CATransform3DIdentity];
[zoom setDuration:5.0]; // 5 seconds
// some other configurations here maybe...
[[myPersonImageView layer] addAnimation:zoom forKey:@"zoomPersonToNormalSize"];

无论是在同一时间

有在同一时间运行两个动画将它们添加到动画组并添加人物图像视图来代替。 如果你这样做,那么你配置动画组(而不是单个动画持续时间和这样)。

CAAnimationGroup *zoomAndMove = [CAAnimationGroup animation];
[zoomAndMove setDuration:5.0]; // 5 seconds
// some other configurations here maybe...
[zoomAndMove setAnimations:[NSArray arrayWithObjects:zoom, moveAlongPath, nil]];
[[myPersonImageView layer] addAnimation:zoomAndMove forKey:@"bothZoomAndMove"];


文章来源: How to animate one image over the unusual curve path in my iPad application?