Déplacer un UIImageView

Question

Quelle est la meilleure façon de déplacer une image le long d'un tableau de points?

Answer 1

Le plus simple est d'usage UIView animations

Un exemple rapide qui suppose que vous êtes en mesure d'utiliser UIImageView pour maintenir votre image et NSArray pour maintenir votre point.

UIImage *image = [UIImage imageNamed:@"image.png"]; 
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image]; 

    [someView addSubview:imageView]; // Assume someView exists 

    NSValue *firstPoint = [NSValue valueWithCGPoint:CGPointMake(0, 0)]; 
    NSValue *secondPoint = [NSValue valueWithCGPoint:CGPointMake(100, 0)]; 
    NSValue *thirdPoint = [NSValue valueWithCGPoint:CGPointMake(100, 100)]; 
    // And so on.... 

    NSArray *points = [NSArray arrayWithObjects:firstPoint, secondPoint, thirdPoint, nil]; 

    for (NSValue *pointValue in points) { 

     [UIView beginAnimations:@"UIImage Move" context:NULL]; 

     CGPoint point = [pointValue CGPointValue]; 
     CGSize size = imageView.frame.size; 

     imageView.frame = CGRectMake(point.x, point.y, size.width, size.height); 

     [UIView commitAnimations]; 
    } 

Answer 2

Mon approche recommandée serait d'envelopper le UIImage dans un UIImageView et utiliser un CAKeyframeAnimation pour animer votre couche de UIImageView le long d'un chemin qui passe à travers vos trois points:

UIImage *image = [UIImage imageNamed:@"image.png"]; 
imageView = [[UIImageView alloc] initWithImage:image]; 
[mainView addSubview:imageView]; 
// Remember to remove the image view and release it when done with it 

CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 
pathAnimation.duration = 1.0f; 
pathAnimation.calculationMode = kCAAnimationPaced; 
pathAnimation.fillMode = kCAFillModeForwards; 
pathAnimation.removedOnCompletion = NO; 

CGMutablePathRef pointPath = CGPathCreateMutable(); 
CGPathMoveToPoint(pointPath, NULL, viewOrigin.x, viewOrigin.y); 
CGPathAddLineToPoint(pointPath, NULL, point1.x, point1.y); 
CGPathAddLineToPoint(pointPath, NULL, point2.x, point2.y); 
CGPathAddLineToPoint(pointPath, NULL, point3.x, point3.y); 
pathAnimation.path = pointPath; 
CGPathRelease(pointPath); 

[imageView.layer addAnimation:pathAnimation forKey:@"pathAnimation"]; 

Notez que par défaut, la position d'une couche est au centre de la couche. Si vous souhaitez déplacer le calque par rapport à un autre point de référence, vous pouvez définir la propriété anchorPoint du calque sur quelque chose comme (0.0, 0.0) pour son coin supérieur gauche (sur l'iPhone) ou (0.0, 1.0) pour son niveau inférieur. la gauche. De plus, cela ne changera pas le cadre de l'UIImageView quand c'est fait, donc si vous vous référez à ce cadre plus tard, vous devrez peut-être en tenir compte ou ajouter un rappel de méthode délégué pour la fin de votre animation pour le définir à la bonne valeur.

Vous pouvez également faire en sorte que votre image se déplace le long de courbes, au lieu de lignes droites, en remplaçant les appels à CGPathAddLineToPoint() par CGPathAddCurveToPoint().

EDIT (14/05/2009): J'ai ajouté le pathAnimation.path = pointPath ligne manquant et a changé une référence erronée à curvedPath à pointPath.