按顺序使用图像数组的动画

Question

我有一组图像，我想通过按顺序播放这些图像来制作动画。我想将整个循环重复几次。我正在为 iPad 开发一款游戏。向我建议一种使用 Cocoa 框架在 Objective-C 中实现此功能的方法。

Answer 1

NSArray *animationArray = [NSArray arrayWithObjects:
                          [UIImage imageNamed:@"images.jpg"],
                          [UIImage imageNamed:@"images1.jpg"],
                          [UIImage imageNamed:@"images5.jpg"],
                          [UIImage imageNamed:@"index3.jpg"],
                          nil];
UIImageView *animationView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0,320, 460)];
animationView.backgroundColor      = [UIColor purpleColor];
animationView.animationImages      = animationArray;
animationView.animationDuration    = 1.5;
animationView.animationRepeatCount = 0;
[animationView startAnimating]; 
[self.view addSubview:animationView];       
[animationView release];

在数组中添加您自己的图像。repeat Count 0 表示无限循环。您也可以给出自己的编号。

Answer 2

至少有 3 种方法可以通过 UIImageView 对图像数组进行动画处理。我添加了 3 个链接来下载 3 种可能性的示例代码。

第一个是大家都知道的。其他的则鲜为人知。

- UIImageView.animationImages
示例链接

这个的问题是没有 Delegate 告诉我们动画在哪一刻完成。因此，如果我们想在动画之后显示某些内容，可能会遇到问题。

同样，不可能自动将动画中的最后一个图像保留在 UIImageView 中。如果我们将这两个问题结合起来，如果我们想将最后一帧保留在屏幕上，我们可能会在动画的结尾处出现间隙。

self.imageView.animationImages = self.imagesArray; // the array with the images
self.imageView.animationDuration = kAnimationDuration; // static const with your value
self.imageView.animationRepeatCount = 1;
[self.imageView startAnimating];

- CAKeyframeAnimation
示例链接

这种动画方式通过 CAAnimation 进行工作。它有一个易于使用的委托，我们可以知道动画何时完成。

这可能是对图像数组进行动画处理的最佳方式。

- (void)animateImages
{
    CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"contents"];
    keyframeAnimation.values = self.imagesArray;

    keyframeAnimation.repeatCount = 1.0f;
    keyframeAnimation.duration = kAnimationDuration; // static const with your value

    keyframeAnimation.delegate = self;

    //    keyframeAnimation.removedOnCompletion = YES;
    keyframeAnimation.removedOnCompletion = NO;
    keyframeAnimation.fillMode = kCAFillModeForwards;

    CALayer *layer = self.animationImageView.layer;

    [layer addAnimation:keyframeAnimation
                 forKey:@"girlAnimation"];
}

委托：

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    if (flag)
    {
        // your code
    }
}

- CADisplayLink
示例链接

CADisplayLink 对象是一个计时器对象，允许您的应用程序将其绘制与刷新同步显示速率。

这种方法非常有趣，并且为操纵我们在屏幕上显示的内容提供了很多可能性。

DisplayLink getter：

- (CADisplayLink *)displayLink
{
    if (!_displayLink)
    {
        _displayLink = [CADisplayLink displayLinkWithTarget:self
                                                   selector:@selector(linkProgress)];
    }

    return _displayLink;
}

方法：

- (void)animateImages
{
    self.displayLink.frameInterval = 5;
    self.frameNumber = 0;
    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop]
                           forMode:NSRunLoopCommonModes];
}

- (void)linkProgress
{
    if (self.frameNumber > 16)
    {
        [self.displayLink invalidate];
        self.displayLink = nil;
        self.animationImageView.image = [UIImage imageNamed:@"lastImageName"];
        self.imagesArray = nil;
        return;
    }

    self.animationImageView.image = self.imagesArray[self.frameNumber++];
    self.frameNumber++;
}

一般问题：

尽管我们有这 3 种可能性，但如果您的动画包含大量大图像，请考虑使用视频。内存的使用量会减少很多。

执行此操作时您将遇到的一个常见问题是在分配图像时。

如果您使用 [UIImage imageNamed:@"imageName"] 您将遇到缓存问题。

来自 Apple：

此方法在系统缓存中查找具有指定名称的图像对象，并返回该对象（如果存在）。如果缓存中尚不存在匹配的图像对象，则此方法将从磁盘或资产类别中查找并加载图像数据，然后返回结果对象。您不能假设此方法是线程安全的。

因此，imageNamed: 将图像存储在私有缓存中。
- 第一个问题是你无法控制缓存大小。
- 第二个问题是缓存没有及时清理，如果您使用 imageNamed: 分配大量图像，您的应用程序可能会崩溃。

解决方案：

直接从Bundle分配图像：

NSString *imageName = [NSString stringWithFormat:@"imageName.png"];
NSString *path = [[NSBundle mainBundle] pathForResource:imageName

// Allocating images with imageWithContentsOfFile makes images to do not cache.
UIImage *image = [UIImage imageWithContentsOfFile:path];

小问题：

Images.xcassets中的图像从未分配。因此，将图像移到 Images.xcassets 外部以直接从 Bundle 分配。

Answer 3

请参阅 UIImageView。很难说它是否符合您的需求，因为您没有向我们提供详细信息，但这是一个良好的开始。

Answer 4

我为此添加了 swift 3.0 扩展

extension UIImageView {

    func animate(images: [UIImage], index: Int = 0, completionHandler: (() -> Void)?) {

        UIView.transition(with: self, duration: 0.5, options: .transitionCrossDissolve, animations: {
            self.image = images[index]

        }, completion: { value in
            let idx = index == images.count-1 ? 0 : index+1

            if idx == 0 {
                completionHandler!()

            } else {
                self.animate(images: images, index: idx, completionHandler: completionHandler)
            }

        })
    }

}

Answer 5

对我来说最好的解决方案是使用 CADisplayLink。 UIImageView 没有完成块，您无法捕捉动画步骤。在我的任务中，我必须逐步使用图像序列器更改视图背景。因此 CADisplayLink 允许您处理步骤并完成动画。如果我们谈论内存的使用，我认为最好的解决方案是从捆绑中加载图像并在完成

ImageSequencer.h

typedef void (^Block)(void);

@protocol ImageSequencerDelegate;

@interface QSImageSequencer : UIImageView
@property (nonatomic, weak) id <ImageSequencerDelegate> delegate;

- (void)startAnimatingWithCompletionBlock:(Block)block;
@end

@protocol ImageSequencerDelegate <NSObject>
@optional
- (void)animationDidStart;
- (void)animationDidStop;
- (void)didChangeImage:(UIImage *)image;
@end

ImageSequencer.m后删除数组

- (instancetype)init {
    if (self = [super init]) {

        _imagesArray = [NSMutableArray array];

        self.image = [self.imagesArray firstObject];
    }

    return self;
}


#pragma mark - Animation

- (void)startAnimating {
    [self startAnimatingWithCompletionBlock:nil];
}


- (void)startAnimatingWithCompletionBlock:(Block)block {
    self.frameNumber = 0;

    [self setSuccessBlock:block];

    self.displayLink.frameInterval = 5;

    if (self.delegate && [self.delegate respondsToSelector:@selector(animationDidStart)]) {
        [self.delegate animationDidStart];
    }

    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop]
                           forMode:NSRunLoopCommonModes];
}


-(void)stopAnimating {
     self.image = [self.imagesArray lastObject];

    [self.displayLink invalidate];
    [self setDisplayLink:nil];
    Block block_ = [self successBlock];
    if (block_) {
        block_();
    }

    if (self.delegate && [self.delegate respondsToSelector:@selector(animationDidStop)]) {
        [self.delegate animationDidStop];
    }

    [self.imagesArray removeAllObjects];
}


- (void)animationProgress {
    if (self.frameNumber >= self.imagesArray.count) {
        [self stopAnimating];
        return;
    }

    if (self.delegate && [self.delegate respondsToSelector:@selector(didChangeImage:)]) {
        [self.delegate didChangeImage:self.imagesArray[self.frameNumber]];
    }

    self.image = self.imagesArray[self.frameNumber];
    self.frameNumber++;
}


#pragma mark - Getters / Setters

- (CADisplayLink *)displayLink {
    if (!_displayLink){
        _displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(animationProgress)];
    }

    return _displayLink;
}

- (NSMutableArray<UIImage *> *)imagesArray {
    if (_imagesArray.count == 0) {
        // get images from bundle and set to array
    }
    return _imagesArray;
}

@end

Answer 6

这是一个简单且有效的动画代码。/

-(void)move
{
    [UIView animateWithDuration:5
                          delay:0.0
                        options: UIViewAnimationCurveEaseOut
                     animations:^{
                         [_imgbox setFrame:CGRectMake(100, 100, _imgbox.frame.size.width, _imgbox.frame.size.height)];
                     }
                     completion:^(BOOL finished){
                         NSLog(@"Done!");
                     }];
}