如何同时为UIImageView的图像和UIImageView本身设置动画？

Question

标题可能不那么清楚，但我想要做的是让UIImageView显示一系列图像（有点像gif），我这样做是通过将animationImages设置为一个数组图像，然后调用[imageView startAnimating];。这很好用。我也有使用CABasicAnimation移动UIImageView的代码，这个动画代码也可以正常工作。但是，当我尝试动画UIImageView的图像并尝试移动UIImageView时，UIImageView的图像停止动画。有解决方法吗？

这是我的动画UIImageView内容的代码：

    self.playerSprite = [[UIImageView alloc] initWithImage:[self.player.animationImages objectAtIndex:0]];
    [self.playerSprite setFrame:CGRectMake(self.center.x, self.center.y, self.tileSet.constants.TILE_WIDTH, self.tileSet.constants.TILE_HEIGHT)];
    self.playerSprite.animationImages = self.player.animationImages;
    self.playerSprite.animationDuration = self.tileSet.constants.animationDuration;
    self.playerSprite.animationRepeatCount = 0; //Makes it repeat indefinitely

这是我使用CABasicAnimation为UIImageView制作动画的编码：

float playerSpriteX = self.playerSprite.center.x;
float playerSpriteY = self.playerSprite.center.y;

CABasicAnimation *moveAnimation = [CABasicAnimation animation];
moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(playerSpriteX + TILE_WIDTH, playerSpriteY)];
[moveAnimation setDelegate:self];
[moveAnimation setFillMode:kCAFillModeForwards];
[moveAnimation setRemovedOnCompletion:NO];
[moveAnimation setDuration:MOVE_ANIMATION_DURATION];       
[self.playerSprite.layer addAnimation:moveAnimation forKey:@"position"];

因此，当UIImageView的位置被动画化时，gif效果不起作用。我的问题是我怎样才能让UIImageView循环显示一个图像阵列，同时它的位置是动画的？

Answer 1

这是猜测，我根本没有对这个想法进行过测试，但您是否考虑过使用CAKeyframeAnimation以同样的方式实现图像动画？您需要从CGImage数组构造一个UIImage对象数组（以设置关键帧动画的values属性），但它看起来非常简单：< / p>

CAKeyframeAnimation *imageAnimation = [CAKeyframeAnimation animation];
imageAnimation.calculationMode = kCAAnimationDiscrete; // or maybe kCAAnimationPaced
imageAnimation.duration = self.tileSet.constants.animationDuration;
imageAnimation.repeatCount = HUGE_VALF;
// the following method will need to be implemented to cast your UIImage array to CGImages
imageAnimation.values = [self animationCGImagesArray];
[self.playerSprite.layer addAnimation:imageAnimation forKey:@"contents"];

-(NSArray*)animationCGImagesArray {
    NSMutableArray *array = [NSMutableArray arrayWithCapacity:[self.player.animationImages count]];
    for (UIImage *image in self.player.animationImages) {
        [array addObject:(id)[image CGImage]];
    }
    return [NSArray arrayWithArray:array];
}

Answer 2

我刚刚做了类似的事情。我使用的代码如下所示：

    CGRect r = ziv.frame;
    r.origin.x += WrongDistance;
    [ziv startAnimating];
    [UIView animateWithDuration:3.0 animations:^(void){
        [ziv setFrame:r];
    } completion:^(BOOL finished){

        [ziv stopAnimating];

        if (finished){
            // not canceled in flight
            if (NumWrong == MaxWrong)
                [self endOfGame:NO];
            else
                [self nextRound:self];
        }
    }];

也许您遇到的问题是因为两个动画都在同一个帖子上？

Answer 3

这不是制作精灵的好方法。我可以坚持你应该使用OpenGL，但可能没有必要走那么远;你可以用图层的核心动画做到这一切，我认为你会比尝试使用成熟的UIImageView更好。

使用图层的核心动画，我可以让这个PacMan精灵在屏幕上动画，同时打开和关闭他的嘴;是不是你想到的那种东西？

这是一个显示动画的视频！

http://www.youtube.com/watch?v=WXCLc9ww8MI

然而，创建动画的实际代码非常简单：只有两层动画（核心动画），一个用于更改图像，另一个用于位置。

你应该不将此答案奖励给赏金！我现在只是回应西莫斯坎贝尔所说的话;我只是填写了他的答案的细节。

好的，所以这里是生成上面链接的电影的代码：

- (void)viewDidLoad {
    [super viewDidLoad];
    // construct arr, an array of CGImage (omitted)
    // it happens I've got 5 images, the last being the same as the first
    self.images = [arr copy];
    // place sprite into the interface
    self.sprite = [CALayer new];
    self.sprite.frame = CGRectMake(30,30,24,24);
    self.sprite.contentsScale = [UIScreen mainScreen].scale;
    [self.view.layer addSublayer:self.sprite];
    self.sprite.contents = self.images[0];
}

- (void)animate {
    CAKeyframeAnimation* anim = 
        [CAKeyframeAnimation animationWithKeyPath:@"contents"];
    anim.values = self.images;
    anim.keyTimes = @[@0,@0.25,@0.5,@0.75,@1];
    anim.calculationMode = kCAAnimationDiscrete;
    anim.duration = 1.5;
    anim.repeatCount = HUGE_VALF;

    CABasicAnimation* anim2 = 
        [CABasicAnimation animationWithKeyPath:@"position"];
    anim2.duration = 10;
    anim2.toValue = [NSValue valueWithCGPoint: CGPointMake(350,30)];

    CAAnimationGroup* group = [CAAnimationGroup animation];
    group.animations = @[anim, anim2];
    group.duration = 10;

    [self.sprite addAnimation:group forKey:nil];
}

Answer 4

你的“基本”问题从这一行开始：

CABasicAnimation *moveAnimation = [CABasicAnimation animation];

CABasicAnimation个对象uses only a single keyframe。这意味着您要制作动画的图层内容会被绘制一次，然后该图像将用于动画的持续时间。

使用CAKeyframeAnimation作为Seamus建议是处理问题的一种方法 - 关键帧动画将多次重绘动画图层的内容，因此为每个关键帧绘制连续图像也会对内容进行动画处理作为职位。