¿Cómo traduzco parabólicamente?

Question

Estoy trabajando en una aplicación de iPhone con algunas animaciones simples.

Tengo una vista Quiero traducir, pero no a lo largo de una línea. Quiero traducirlo parabólicamente. Imagina que estoy animando un automóvil que se mueve a lo largo de un camino curvo.

Sé que puedo establecer la transformada adecuadamente a una instancia de CGAffineTransform

El problema es que no tengo idea de cómo crear la transformación. Sé cómo escalar, traducir, etc., pero ¿cómo puedo traducir parabólicamente? ¿Es posible?

Answer 1

Para animar a lo largo de una curva suave, querrá utilizar una CAKeyframeAnimation. En this answer proporciono el código de una animación combinada que mueve una vista de imagen a lo largo de una curva, mientras la cambia de tamaño y la desvanece. La parte pertinente de dicho código es el siguiente:

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

Esto crea una curva con dos puntos de control, uno en el origen de la vista y el otro en la esquina superior derecha de la pantalla (en modo horizontal) Para obtener más información sobre la construcción de rutas, consulte Quartz 2D Programming Guide o Animation Types and Timing Programming Guide.

Para utilizar esta animación, tendrá que añadirlo a la capa de vista utilizando algo como lo siguiente:

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

Answer 2

Parece que necesita establecer periódicamente la propiedad de transformación en CGAffineTransformTranslate creada con los parámetros x, y elegidos a lo largo de la parábola (haga lo que Russell sugirió para obtener x de y o viceversa).

Si también desea que su automóvil gire mientras se curva a lo largo de la parábola (se verá más realista) necesitará CGAffineTransormRotate. Determine el ángulo basado en la pendiente de la parábola en el punto en el que está dibujando actualmente. Necesitarás una función atan() para calcular el ángulo desde la pendiente. Suena como un dolor, con suerte hay una manera más fácil.

Realmente no sé de lo que estoy hablando, acabo de leer esta entrada en el blog: Demystifying CGAffineTransform.

Answer 3

Una forma estéticamente agradable de animar a lo largo de las curvas es usar splines. Estos son matemáticamente simples y computacionalmente eficientes. La spline de orden mínimo que resolvería un arco parabólico es una spline cuadrática.

Answer 4

Creo que la sugerencia de TokenMacGuy de utilizar splines es buena. De nuevo, no sé de lo que estoy hablando, pero tal vez esto te dará algunas ideas.

¿Tiene que ser exactamente una parábola o una aproximación funcionará? Lo que quiere hacer se parece mucho al rendering text along a curve (vea screenshot también). Esa serie de publicaciones parece ser una buena forma de explicar cálculos de ángulos y demás. Cada "personaje" corresponde a una posición de tu automóvil. La parametrización en la longitud del arco asegura que su velocidad sea constante.

En cuanto a cómo hacerlo en un iPhone ... ni idea.

Answer 5

que incluyen la rotación de la imagen a lo largo del camino, sólo tiene que añadir el siguiente

pathAnimation.rotationMode = @"auto"; 

también puede agregar una función de tiempo para crear el easeIn/out efecto

pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];