如何翻译抛物线？ [英] How do I translate parabolically?

问题描述

我正在与一些简单的动​​画，一个iPhone应用程序。

I'm working on an iPhone app with some simple animation.

我有一个观点我想翻译，而不是沿着一条直线。我想把它翻译抛物线。想象一下，我是一个动画车沿弯曲的道路前进。

I have a view I want to translate, but not along a line. I want to translate it parabolically. Imagine that I am animating a car moving along a curved road.

我知道我可以设置适当的变换CGAffineTransform的实例

I know I can set the transform properly to an instance of CGAffineTransform

问题是，我不知道如何创建转换。我知道如何向规模化，翻译等，但我怎么翻译抛物线？它甚至有可能？

Problem is, I have no idea how to create the transform. I know how to scale, translate, etc. but how do I translate parabolically? Is it even possible?

推荐答案

要沿着平滑的曲线制作动画，你要使用CAKeyframeAnimation。在<一个href=\"http://stackoverflow.com/questions/1142727/how-can-i-animate-the-movement-of-a-view-or-image-along-a-curved-path/1143095#1143095\">this回答我提供code为沿曲线移动的图像视图组合的动画，同时调整其大小和褪色出来。即code的相关部分如下：

To animate along a smooth curve, you'll want to use a CAKeyframeAnimation. In this answer I provide code for a combined animation that moves an image view along a curve, while resizing it and fading it out. The relevant part of that code is as follows:

// Set up path movement
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;

CGPoint endPoint = CGPointMake(480.0f - 30.0f, 40.0f);
CGMutablePathRef curvedPath = CGPathCreateMutable();
CGPathMoveToPoint(curvedPath, NULL, viewOrigin.x, viewOrigin.y);
CGPathAddCurveToPoint(curvedPath, NULL, endPoint.x, viewOrigin.y, endPoint.x, viewOrigin.y, endPoint.x, endPoint.y);
pathAnimation.path = curvedPath;
CGPathRelease(curvedPath);

这创建了两个控制点，一个在观点的起源，并在显示屏的右上角其他（横向模式）的曲线。欲了解更多关于构建路径，请参阅<一个href=\"http://developer.apple.com/iphone/library/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq%5Fpaths/dq%5Fpaths.html\">Quartz 2D编程指南或<一个href=\"http://developer.apple.com/iphone/library/documentation/Cocoa/Conceptual/Animation%5FTypes%5FTiming/Articles/PropertyAnimations.html\">Animation类型和时序编程指南。

This creates a curve with two control points, one at the origin of the view and the other at the upper-right corner of the the display (in landscape mode). For more on constructing paths, see the Quartz 2D Programming Guide or the Animation Types and Timing Programming Guide.

要使用此动画，你需要使用类似以下内容将其添加到您的视图层：

To use this animation, you'll need to add it to your view's layer using something like the following:

[imageViewForAnimation.layer addAnimation:pathAnimation forKey:@"curveAnimation"];

这篇关于如何翻译抛物线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！