我如何翻译抛物线? [英] 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.在 这个答案 我提供了一个组合动画的代码，该动画沿着曲线移动图像视图，同时调整它的大小并使其淡出.该代码的相关部分如下:

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);

这会创建一条带有两个控制点的曲线，一个位于视图的原点，另一个位于显示屏的右上角(横向模式).有关构建路径的更多信息，请参阅 Quartz 2D编程指南或动画类型和时序编程指南.

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屋！