¿Cómo animo aún más una image que está en un path más bello?

Quizás alguien pueda apuntarme en la dirección correcta. Probé con Google, pero realmente no sé cómo definir mi pregunta en términos de búsqueda.

Estoy animando una image a lo largo de un UIBezierPath así:

UIBezierPath *trackPath = [UIBezierPath bezierPath]; [trackPath moveToPoint:P(8, 250)]; [trackPath addCurveToPoint:P(318, 250) controlPoint1:P(156, 86) controlPoint2:P(166, 412)]; [trackPath addCurveToPoint:P(652, 254) controlPoint1:P(488, 86) controlPoint2:P(512, 412)]; [trackPath addCurveToPoint:P(992, 254) controlPoint1:P(818, 96) controlPoint2:P(872, 412)]; CALayer *bee = [CALayer layer]; bee.bounds = CGRectMake(0, 0, 69, 71); bee.position = P(160, 25); bee.contents = (id)([UIImage imageNamed:@"bee3.png"].CGImage); [self.view.layer addSublayer:bee]; 

Lo que quiero hacer es animar la image misma a medida que avanza por el path. Puedo animar la image cuando su b es así:

  NSArray *blueArray = [NSArray array]; blueArray = [[NSArray alloc] initWithObjects: [UIImage imageNamed:@"blue1.png"], [UIImage imageNamed:@"blue2.png"], nil]; blueFly.animationImages = blueArray; blueFly.animationDuration = 0.20; blueFly.animationRepeatCount = -1; [blueFly startAnimating]; 

¿Cómo puedo combinar los dos, por así decirlo?

Además, sé cómo dibujar el path en la pantalla de esta forma:

 CAShapeLayer *beeline = [CAShapeLayer layer]; beeline.path = trackPath.CGPath; beeline.strokeColor = [UIColor whiteColor].CGColor; beeline.fillColor = [UIColor clearColor].CGColor; beeline.lineWidth = 2.0; beeline.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:6], [NSNumber numberWithInt:2], nil]; [self.view.layer addSublayer:beeline]; 

Pero, ¿cómo puedo dibujar la línea solo detrás de la image como se está animando a lo largo del path?

Puede usar un CAShapeLayer para mostrar la ruta. Una capa de forma proporciona dos properties strokeStart y strokeEnd que tienen valores entre 0 y 1 y determinan la fracción de la ruta que es visible. Al animar strokeEnd puede crear la printing de que la ruta está "dibujada" en la pantalla. Consulte http://oleb.net/blog/2010/12/animating-drawing-of-cgpath-with-cashapelayer para ver un ejemplo que anima un lápiz que dibuja una línea.

Para cambiar la image de la abeja, simplemente puede agregar una animation que cambie el contenido de su abeja. Por ejemplo, para cambiar la image de la pluma en el proyecto CAShapeLayer anterior, podemos agregar el siguiente código al método startAnimation .

 CAKeyframeAnimation *imageAnimation = [CAKeyframeAnimation animationWithKeyPath:@"contents"]; imageAnimation.duration = 1.0; imageAnimation.repeatCount = HUGE_VALF; imageAnimation.calculationMode = kCAAnimationDiscrete; imageAnimation.values = [NSArray arrayWithObjects: (id)[UIImage imageNamed:@"noun_project_347_1.png"].CGImage, (id)[UIImage imageNamed:@"noun_project_347_2.png"].CGImage, nil]; [self.penLayer addAnimation:imageAnimation forKey:@"contents"]; 

Esto simplemente agrega una animation de key a la propiedad de contents de la capa que muestra el lápiz. Tenga en count que la image "noun_project_347_1.png" no forma parte del proyecto, por lo que tendría que agregar una image para ver el efecto. Simplemente he volteado horizontalmente la image que viene con el proyecto. Al establecer calculationMode en kCAAnimationDiscrete la animation no se interpolaza entre dos imágenes reemplazando una por la otra.

Siempre que pueda get la ruta exacta en la que desea animar la alignment de la image, puede hacerlo usando Core Animation y CAKeyframeAnimation.

Refiera how-to-animate-one-image-over-the-unusual-curve-path-in-my-ipad-application) enlace.