¿Cómo animar una imagen sobre la ruta de curva inusual en mi aplicación de iPad?

Tengo dos imágenes separadas.

  1. Imagen de CurvedPath (adjunta a continuación)
  2. PersonImage

enter image description here

Como puede ver, este camino no tiene un arco perfecto para un solo ángulo.

Tengo otra PersonImage que quiero animar exactamente encima de la línea central de esta imagen de arco con efecto de acercamiento.

Esta animación debe comenzar desde el punto inferior izquierdo hasta el punto superior derecho.

¿Cómo lograr este tipo de animación?

He leído sobre la animación de QuartzCore y BeizerPath, pero como tengo menos conocimiento sobre ellos, me resultará bastante difícil lograr esto rápidamente.

preguntado el 22 de mayo de 12 a las 16:05

¿Qué has probado que no ha funcionado? ¿Cómo se creó la imagen? ¿Puedes recuperar el bezier exacto que se usó para generarlo? ¿Eres capaz de generar el bezier por tu cuenta en Photoshop o alguna aplicación similar? -

solo visita este tutorial. creo que soluciono tu problema.. blog.devedup.com/index.php/2010/03/03/… -

1 Respuestas

Avanzando por un camino

Siempre que pueda obtener la ruta exacta en la que desea animar la alineación de la imagen, puede hacerlo utilizando Core Animation y CAKeyframeAnimation.

Cree una animación de cuadro clave para la propiedad de posición y configúrela para que se anime a lo largo de su ruta

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

Si creó su ruta como UIBezierPath, puede obtener fácilmente CGPath llamando CGPath en el camino de Bézier.

A continuación, configura la animación con duración, etc.

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

Ahora agrega la animación a la capa de su imageView y se animará a lo largo de la ruta.

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

Si nunca antes ha usado Core Animation, debe agregar QuartzCore.framework a su proyecto y agregar #import <QuartzCore/QuartzCore.h> en la parte superior de su implementación.

Creando un UIBezierPath

Si no sabe qué es un camino bezier, mire el sitio de Wikipedia. Una vez que conozca sus puntos de control, puede crear una ruta bezier simple como esta (donde todos los puntos son CGPoints normales):

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

haciendo zoom

Para lograr el efecto de zoom, puede aplicar una animación similar usando CABasicAnimation para la transformación de la capa. Simplemente anime desde una transformación a escala 0 (infinitamente pequeña) a una transformación a escala 1 (tamaño normal).

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"];

Los dos al mismo tiempo

Para que ambas animaciones se ejecuten al mismo tiempo, agréguelas a un grupo de animación y agréguelo a la vista de imagen de la persona. Si hace esto, configure el grupo de animación (con duración y tal en lugar de las animaciones individuales).

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"];

contestado el 22 de mayo de 12 a las 18:05

Lo siento, pero como soy nuevo en BeizerPath, ¿puede agregar el código para tal curvatura beizerpath también? Sería muy útil. - mrunal

Sí, la animación se ha hecho perfectamente. Pero al final, la imagen de esa persona vuelve automáticamente a su posición original (que configuramos en moveToPoint). ¿Cómo evitar eso? - mrunal

Core Animation solo cambia lo que ves en la pantalla. Para que la vista cambie su valor, cambie los valores justo antes de agregar la animación (asegúrese de que sus animaciones tengan un valor de origen). Es decir [myView setPosition:endPoint]; [[myPersonImageView layer] addAnimation:zoomAndMove forKey:@"bothZoomAndMove"]; - David Rönnqvist

@mrunal Me alegra saber que funcionó. Considere aceptar la respuesta si resolvió su problema. - David Rönnqvist

Sí, setPosition debe configurarse. Tu respuesta realmente me ayudó. Muchas gracias. :) - mrunal

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.