Animación utilizando la matriz de imágenes en secuencia

Tengo una serie de imágenes que quiero animar mediante la reproducción de estas imágenes una tras otra en una secuencia. Quiero repetir el bucle varias veces. Estoy desarrollando un juego para el iPad. Sugieren que para mí un método para lograr esta funcionalidad, en Objective-C con el marco de Cacao.

InformationsquelleAutor Yadnesh | 2011-05-18

6 Kommentare

  1. 11

    Ver el animationImages propiedad de UIImageView. Es difícil decir si se ajusta a sus necesidades, ya que no nos dan detalles, pero es un buen comienzo.

    • ¿qué clase de datos serán útiles??
    • ¿Qué tipo de juego? Acción, escritorio? (Que hace una diferencia en el rendimiento de la animación.) Cuántas imágenes?
    • es un pequeño juego de tragamonedas que yo edificio m,tengo 13-20 imágenes en una matriz,que se disputará después de que se cumplan ciertas condiciones en el juego,y en vez de 5(en el max,min 3) las matrices de este tipo será funcional(animación),si wanto knw nada más plz déjame knw!
    • Suena razonable, me gustaría probar el UIImageView.
    • ok enfermo intenta que.es QTmovie será útil,si pudiera hacer un video de estos de la matriz,como se mencionó stackoverflow.com/questions/3592167/…
    • QTMovie es una parte de QTKit que no está disponible en iOS.
    • ohh gracias por su ayuda!!!!

  2. 50
    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];

    añadir sus propias imágenes en la matriz.repetir el Conteo de 0 significa que el bucle infinito.Usted puede dar a su propio número también.

    • podemos agregar pageControl?
    • Gracias fácil y eficaz.
    • funcionado bien gracias
    • funcionado bien gracias
  3. 18

    Hay al menos 3 formas de animar una serie de imágenes a través de un UIImageView. Voy a agregar 3 enlaces para descargar el código de ejemplo para las 3 posibilidades.

    La primera es la que todo el mundo sabe. Los otros son menos conocidos.

    – UIImageView.animationImages

    Ejemplo De Enlace

    El problema de esto es que no han Delegado para que nos diga en que momento la animación está terminado. Así, podemos tener problemas si queremos mostrar algo después de la animación.

    De la misma manera, no hay ninguna posibilidad de mantenerse la última imagen de la animación en la UIImageView automáticamente. Si combinamos ambos problemas que puede tener un hueco en la final de la animación, si queremos que mantengan el último fotograma en la pantalla.

    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

    Ejemplo De Enlace

    Esta manera de animar a las obras a través de CAAnimation. Tiene un fácil delegado de usar y podemos saber cuando la animación final.

    Esta es probablemente la mejor manera de animar a una matriz de imágenes.

    - (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"];
    }

    Delegado:

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

    – CADisplayLink

    Ejemplo De Enlace

    A CADisplayLink object is a timer object that allows your application to synchronize its drawing to the refresh rate of the display.

    Esta forma de hacerlo es muy interesante y abre un montón de posibilidades para manipular lo que se nos muestra en pantalla.

    DisplayLink getter:

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

    Métodos:

    - (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++;
    }

    PROBLEMA GENERAL:

    A pesar de que tenemos este 3 posibilidades, si la animación es con un montón de imágenes grandes, considere el uso de un video en su lugar. El uso de la memoria disminuirá mucho.

    Un problema General que se enfrentan al hacer esto es en el momento de la asignación de las imágenes.

    Si utiliza [UIImage imageNamed:@»imageName»] tendrá cahe problemas.

    De Apple:

    This method looks in the system caches for an image object with the specified name and returns that object if it exists. If a matching image object is not already in the cache, this method locates and loads the image data from disk or asset catelog, and then returns the resulting object. You can not assume that this method is thread safe.

    Así, imageNamed: almacena la imagen en una memoria Caché privada.

    – El primer problema es que no se puede tomar el control del tamaño de la memoria caché.

    – El segundo problema es que la caché no se limpian en el tiempo y si usted está asignando una gran cantidad de imágenes con imageNamed:, su aplicación, probablemente, tendrá un accidente.

    SOLUCIÓN:

    Asignar imágenes directamente desde 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];

    Pequeño problema:

    Imágenes en Images.xcassets llegar nunca asignados. Así, mueva sus imágenes fuera de Images.xcassets asignar directamente del Paquete.

  4. 2

    He añadido un swift 3.0 extensión para este

    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)
                }
    
            })
        }
    
    }
  5. 1

    Mejor solución para mí, el uso de CADisplayLink. UIImageView no tiene la terminación del bloque y usted no puede coger los pasos de la animación. En mi trabajo debo cambiar de fondo de la vista con la imagen del secuenciador de paso por paso. Así CADisplayLink permite pasos de manipulación y acabado de animación. Si hablamos de uso de memoria, creo que la mejor solución de carga de imágenes de bulto y eliminar de la matriz después de terminar

    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
  6. 0

    Este es un simple y código de trabajo para la animación./

    -(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!");
                         }];
    }

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein