¿Cómo animar una imagen sobre la ruta de curva inusual en mi aplicación de iPad?
Frecuentes
Visto 1,389 veces
0
Tengo dos imágenes separadas.
- Imagen de CurvedPath (adjunta a continuación)
- PersonImage
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.
1 Respuestas
4
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
¿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? - user1118321
solo visita este tutorial. creo que soluciono tu problema.. blog.devedup.com/index.php/2010/03/03/… - jamil
posible duplicado de ¿Cómo puedo animar el movimiento de una vista o imagen a lo largo de una trayectoria curva? - Brad Larson