如何在我的iPad应用不同寻常的曲线路径动画一个图像？ [英] How to animate one image over the unusual curve path in my iPad application?
问题描述
我有两个独立的图像。
I have two separate images.
- CurvedPath图像（附下）
- PersonImage
正如你所看到的这条道路是不是有单角完美的弧线。
As you can see this path is not having perfect arc for single angle.
我有，我想正是动画与放大的效果。这条弧线图片
I have another PersonImage that I want to animate exactly above the center line for this arc image with zoom-in effect.
这个动画应该从左下点右上角点开始。
This animation should be start from bottom-left point to top-right point.
如何实现这种动画？
我看了一下QuartzCore和BeizerPath动画，但我有那些知识较少，它就会安静难我快速实现这一目标。
I have read about QuartzCore and BeizerPath animation, but as I am having less knowledge about those, it will quiet difficult to me to achieve this quickly.
推荐答案
只要你能得到你想要的动画图片对齐，可以使用核心动画和CAKeyframeAnimation做到这一点的确切路径。
Moving along a path
As long as you can get the exact path that you want to animate the image align you can do it using Core Animation and CAKeyframeAnimation.
创建position属性的一个关键帧动画并设置它走好人生路做动画
Create a key frame animation for the position property and set it do animate along your path
CAKeyframeAnimation *moveAlongPath = [CAKeyframeAnimation animationWithKeyPath:@"position"];
[moveAlongPath setPath:myPath]; // As a CGPath
如果您创建路径作为UIBezierPath，那么你可以很容易地通过调用 CGPath 贝塞尔路径上得到CGPath。
If you created your path as a UIBezierPath then you can easily get the CGPath by calling CGPath on the bezier path.
下一步配置与工期等动画
Next you configure the animation with duration etc.
[moveAlongPath setDuration:5.0]; // 5 seconds
// some other configurations here maybe...
现在您的动画添加到您的ImageView层，它将沿路径动画。
Now you add the animation to your imageView's layer and it will animate along the path.
[[myPersonImageView layer] addAnimation:moveAlongPath forKey:@"movePersonAlongPath"];
如果你以前从未使用过的Core Animation，你需要QuartzCore.framework添加到您的项目，并添加＃进口＆LT; QuartzCore / QuartzCore.h＆GT; 在您的实现上。
如果你不知道一个贝塞尔路径是什么，看维基百科网站。 一旦你知道你的控制点，您可以创建这样一个简单的贝塞尔曲线（其中所有的点都正常CGPoints）：
If you don't know what a bezier path is, look at the Wikipedia site. Once you know your control points you can create a simple bezier path like this (where all the points are normal 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缩放变换（正常大小）。
Zooming up
To achieve the zoom effect you can apply a similar animation using a CABasicAnimation for the transform of the layer. Simply animate from a 0-scaled transform (infinitely small) to a 1-scaled transform (normal size).
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"];
两者同时
要具有在同一时间运行两个动画将它们添加到动画组并添加到人物图像视图，而不是。如果你这样做，那么你配置的动画组（而不是个别的动画和持续时间等）。
Both at the same time
To have both animations run at the same time you add them to an animation group and add that to the person image view instead. If you do this then you configure the animation group (with duration and such instead of the individual animations).
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"];
这篇关于如何在我的iPad应用不同寻常的曲线路径动画一个图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
