Yo estoy tratando de crear un simple CoreAnimation para su uso en un AVComposition. Mi objetivo es crear un CALayer que, a través de varias subcapas, se desvanece un título y salir, y luego se desvanece en una de las imágenes. Una presentación de diapositivas, básicamente. Esto es ser exportados a un .mov utilizando AVAssetWriter.

Con la ayuda de la WWDC 2011 AVEditDemo, he sido capaz de conseguir un título y las imágenes que aparecen. El problema es que todos ellos están en la pantalla al mismo tiempo!

He creado cada capa con una opacidad de 0.0. Entonces he añadido un CABasicAnimation a desvanecerse desde 0.0 a 1.0, utilizando el código siguiente:

CABasicAnimation *fadeInAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
fadeInAnimation.fromValue = [NSNumber numberWithFloat:0.0];
fadeInAnimation.toValue = [NSNumber numberWithFloat:1.0];
fadeInAnimation.additive = NO;
fadeInAnimation.removedOnCompletion = YES;
fadeInAnimation.beginTime = 1.0;
fadeInAnimation.duration = 1.0;
fadeInAnimation.fillMode = kCAFillModeForwards;
[titleLayer addAnimation:fadeInAnimation forKey:nil];

El problema parece ser el ‘beginTime’ de la propiedad. El «1.0» está destinado a ser un retraso, por lo que comienza a 1 segundo después del inicio de la animación. Sin embargo, es que aparece en la pantalla inmediatamente. Un fundido de salida de animación

El reverso de este código, para el fundido de salida, simplemente cambia el fromValue a 1.0 y el toValue a 0.0. Tiene un tiempo de inicio de 4.0 y funciona a la perfección.

Estoy usando lo siguiente para crear el animatedTitleLayer:

CATextLayer *titleLayer = [CATextLayer layer];
titleLayer.string =self.album.title;
titleLayer.font = @"Helvetica";
titleLayer.fontSize = videoSize.height / 6;
titleLayer.alignmentMode = kCAAlignmentCenter;
titleLayer.bounds = CGRectMake(0, 0, videoSize.width, videoSize.height / 6);
titleLayer.foregroundColor = [[UIColor redColor]CGColor];
titleLayer.opacity = 0.0;

La imagen se desvanecen en las animaciones tienen un beginTime 5 segundos de diferencia. Al igual que el título, su fade out animaciones funcionan bien.

Cualquier ayuda sería muy apreciada!

Saludos!

EDITAR

Las respuestas fueron útiles, pero al final descubrí que sólo una animación puede ser añadido a un CALayer. El fundido de salida de la animación estaba trabajando como lo fue el último agregado.

Luego trató de un CAAnimationGroup, pero esto no funcionó como estaba modificando el mismo valor de la clave del camino.

Así que me he dado cuenta de que un CAKeyframeAnimation es la mejor para esto. Sólo estoy teniendo algunas dificultades con eso también! El código es ahora la decoloración en el bien, pero no se desvanece. He intentado varios fillMode s, cambiar la duración, etc. No puede hacer que funcione!!

Aquí está mi código:

    CAKeyframeAnimation *fadeInAndOut = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    fadeInAndOut.duration = 5.0;
    fadeInAndOut.autoreverses = NO;
    fadeInAndOut.keyTimes = [NSArray arrayWithObjects:  [NSNumber numberWithFloat:0.0],
                                                            [NSNumber numberWithFloat:1.0],
                                                    [NSNumber numberWithFloat:4.0], 
                                                    [NSNumber numberWithFloat:5.0], nil];

    fadeInAndOut.values = [NSArray arrayWithObjects:    [NSNumber numberWithFloat:0.0],
                                                    [NSNumber numberWithFloat:1.0],
                                                    [NSNumber numberWithFloat:1.0], 
                                                    [NSNumber numberWithFloat:0.0], nil];
    fadeInAndOut.beginTime = 1.0;
    fadeInAndOut.removedOnCompletion = NO;
    fadeInAndOut.fillMode = kCAFillModeBoth;
    [titleLayer addAnimation:fadeInAndOut forKey:nil]; 
  • así que usted está tratando de tener todas las capas colocadas y configurado antes de tiempo, o se puede agregar como las diapositivas de la transición a través de?
  • Estoy de posicionamiento y configuración antes de tiempo. Lo he descubierto gracias a este post: stackoverflow.com/questions/2184803/…
  • Usted ha sido capaz de exportar un CALayer de vídeo? Estoy atascado en eso ahora. Si usted tiene algún consejo, por favor, responda a mi pregunta. Gracias! stackoverflow.com/questions/10285175/…
  • Keytimes debe ser un valor entre 0.0 y 1.0, de acuerdo a la documentación de Apple: developer.apple.com/documentation/quartzcore/…
InformationsquelleAutor gamblor87 | 2012-01-03

11 Comentarios

  1. 29

    Estoy enfrentado el mismo problema y el problema es que – una capa no puede contener fade in y out.
    Así que usted puede agregar otro animación a la capa principal como hice

    CALayer *parentLayer = [CALayer layer];
    CALayer *animtingLayer = [CALayer layer];
    
    //FADE IN
            CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
            animation.beginTime = CMTimeGetSeconds(img.startTime);
            animation.duration = CMTimeGetSeconds(_timeline.transitionDuration);
            animation.fromValue = [NSNumber numberWithFloat:0.0f];
            animation.toValue = [NSNumber numberWithFloat:1.0f];
            animation.removedOnCompletion = NO;
            animation.fillMode = kCAFillModeBoth;
            animation.additive = NO;
            [parentLayer addAnimation:animation forKey:@"opacityIN"];
    
    //FADE OUT
            CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
            animation.beginTime = CMTimeGetSeconds(CMTimeAdd(img.passTimeRange.start, img.passTimeRange.duration));
            animation.duration = CMTimeGetSeconds(_timeline.transitionDuration);
            animation.fromValue = [NSNumber numberWithFloat:1.0f];
            animation.toValue = [NSNumber numberWithFloat:0.0f];
            animation.removedOnCompletion = NO;
            animation.fillMode = kCAFillModeBoth;
            animation.additive = NO;
            [animtingLayer addAnimation:animation forKey:@"opacityOUT"];
    
        [parentLayer addSublayer:animtingLayer];
    • Yo nunca habría descubierto esto. Gracias @comonitos
    • encantados de ayudarle!
    • Tal vez es debido a iOS 7 SDK 2013-14 actualización o algo que me hizo de manera diferente, pero la adición de varios animaciones a una la capa es posible en la actualidad, haciendo innecesario el uso adicional de la capa de @comonitos
  2. 25

    Hombre, por lo que muchas complicado respuestas. La forma más sencilla es simplemente para agregar autoreverse. Voila.

    CABasicAnimation *fadeInAndOut = [CABasicAnimation animationWithKeyPath:@"opacity"];
    fadeInAndOut.duration = 5.0;
    fadeInAndOut.autoreverses = YES;
    fadeInAndOut.fromValue = [NSNumber numberWithFloat:0.0];
    fadeInAndOut.toValue = [NSNumber numberWithFloat:1.0];
    fadeInAndOut.repeatCount = HUGE_VALF;
    fadeInAndOut.fillMode = kCAFillModeBoth;
    [titleLayer addAnimation:fadeInAndOut forKey:@"myanimation"];
    • Esta solución se inicia el fundido de salida tan pronto como el fade ha completado. Supongo que el OP quiere que el título se desvanezca, permanezca visible por un momento, después de fundido de salida.
    • De hecho, la mejor respuesta. Me gustaría añadir para aquellos que están luchando, también es posible que desee agregar [yourView setWantsLayer:YES]; antes de llegar su punto de vista de la capa. Por defecto, las vistas no tienen capas.
  3. 3

    Esto funciona para mí:

     let fadeAnimation = CAKeyframeAnimation(keyPath:"opacity")
     fadeAnimation.beginTime = AVCoreAnimationBeginTimeAtZero + start
     fadeAnimation.duration = duration
     fadeAnimation.keyTimes = [0, 1/8.0, 5/8.0, 1]
     fadeAnimation.values = [0.0, 1.0, 1.0, 0.0]
     fadeAnimation.removedOnCompletion = false
     fadeAnimation.fillMode = kCAFillModeForwards
     layer.addAnimation(fadeAnimation, forKey:"animateOpacity")
     layer.opacity = 0.0
    • Bonita respuesta 🙂 en func
  4. 2

    De un préstamo del enlace mencionado por gamblor87 y añadir mis comentarios como explicación.

    //create a fadeInOut CAKeyframeAnimation on opacticy
    CAKeyframeAnimation *fadeInAndOut = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    
    //set duration
    fadeInAndOut.duration = 5.0;
    
    //autoreverses defaults to NO so we don't need this.
    //fadeInAndOut.autoreverses = NO;
    
    //keyTimes are time points on duration timeline as a fraction of animation duration (here 5 seconds).
    fadeInAndOut.keyTimes = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0],
                                                      [NSNumber numberWithFloat:0.20],
                                                      [NSNumber numberWithFloat:0.80], 
                                                      [NSNumber numberWithFloat:1.0], nil];
    
    
    //set opacity values at various points during the 5second animation
    fadeInAndOut.values = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0],//opacity 0 at 0s (corresponds to keyTime = 0s/5s)
                                                    [NSNumber numberWithFloat:1.0],//opacity 1 at 1s (corresponds to keyTime = 1s/5s)
                                                    [NSNumber numberWithFloat:1.0],//opacity 1 upto 4s (corresponds to keyTime = 4s/5s)
                                                    [NSNumber numberWithFloat:0.0],//opacity 0 at 5s (corresponds to keyTime = 5s/5s)
     nil];
    
    //delay in start of animation. What we are essentially saying is to start the 5second animation after 1second.
    fadeInAndOut.beginTime = 1.0;
    
    //don't remove the animation on completion.
    fadeInAndOut.removedOnCompletion = NO;
    
    //fill mode. In most cases we won't need this.
    fadeInAndOut.fillMode = kCAFillModeBoth;
    
    //add the animation to layer
    [titleLayer addAnimation:fadeInAndOut forKey:nil];
    • fadeInAndOut.beginTime = 1.0 no funciona, es necesario utilizar CACurrentMediaTime() + 1;
  5. 2

    El punto es el nombre de la clave. Usted tiene que establecer la opacidad de la clave.

    layer.add(animation, forKey: nil)         //Not Working
    layer.add(animation, forKey: "opacity")   //Working

    Comprobar el código de ejemplo. He probado en Swift 4

        let animation                   = CAKeyframeAnimation()
        animation.duration              = 1.53
        animation.autoreverses          = false
        animation.keyTimes              = [0, 0.51, 0.85, 1.0]
        animation.values                = [0.5, 0.5, 1.0, 0.5]
        animation.beginTime             = 0
        animation.isRemovedOnCompletion = false
        animation.fillMode              = kCAFillModeBoth
        animation.repeatCount           = .greatestFiniteMagnitude
        layer.add(animation, forKey: "opacity")
    • Añadiendo: usted puede establecer la clave en layer.add o en CAKeyframeAnimation(keyPath: "opacity")
  6. 1

    Tratar:

    fadeInAnimation.beginTime = CACurrentMediaTime()+1.0;
    • No parece hacer una diferencia. Por favor, ver mi edición.
  7. 1

    Creo que usted está buscando timeOffset, no beginTime

    • Gracias por alertarme a esta propiedad. Ha ayudado en otras maneras! Por favor, ver mi edición.
  8. 1

    LenK‘s respuesta funcionó a la perfección para mí. Si alguien está interesado, me re-escribió para Obj-C (tenga en cuenta que también ligeramente cambiado los fotogramas clave en fade in):

    CAKeyframeAnimation *fadeInAndOutAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    fadeInAndOutAnimation.beginTime = CACurrentMediaTime() + beginTime;
    fadeInAndOutAnimation.duration = duration;
    fadeInAndOutAnimation.keyTimes = @[@0.0, @( 2.0 / 8.0 ), @( 5.0 / 8.0 ), @1.0];
    fadeInAndOutAnimation.values = @[@0.0, @1.0, @1.0, @0.0];
    fadeInAndOutAnimation.removedOnCompletion = false;
    fadeInAndOutAnimation.fillMode = kCAFillModeForwards;
    • Esto funcionó bien para mí, pero usted tiene que añadir una línea adicional: fadeInAndOutAnimation.repeatCount = HUGE_VALF;. De lo contrario, la vista se desvanece una vez y nunca aparece de nuevo.
  9. 1

    La forma alternativa es el uso de CAAnimationGroup. CAKeyframeAnimation también funciona bien para la interfaz de usuario. Este código funciona correctamente en la interfaz de usuario para mostrar la animación en tiempo real. Pero no funcionará en todos los en AVVideoCompositionCoreAnimationTool – por favor, desplácese hacia abajo si es necesario. No es de código listo para copiar y pegar, pero te puedes hacer una idea. También, usted puede agregar, además de animaciones para el grupo:

    for (HKAnimatedLayer *animLayer in layersList) {
    
        overlayLayer = [CALayer layer];
        [overlayLayer setContents:(id)[animLayer.image CGImage]];
        overlayLayer.frame = CGRectMake(0, 0, size.width, size.height);
        [overlayLayer setMasksToBounds:YES];
    
        NSMutableArray *animations = [NSMutableArray array];
        //Step 1
        {
            CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
            animation.toValue = @(0);
            animation.duration = kLayerFadeDuration;
            animation.beginTime = kMovieDuration/5;
            animation.fillMode = kCAFillModeForwards;
            [animations addObject:animation];
        }
        {
            CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
            animation.toValue = @(1.0);
            animation.duration = kLayerFadeDuration;
            animation.beginTime = kMovieDuration*2/3;
            animation.fillMode = kCAFillModeForwards;
            [animations addObject:animation];
        }
    
        CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
        animationGroup.animations = animations;
        animationGroup.duration = kMovieDuration;
        animationGroup.fillMode = kCAFillModeForwards;
        animationGroup.removedOnCompletion = YES;
    
        [overlayLayer addAnimation:animationGroup forKey:nil];
    
        [parentLayer addSublayer:overlayLayer];
    }

    Aquí pequeña nota acerca de la animación en capas para AVVideoCompositionCoreAnimationTool. Usted puede ver los gif de imagen (títulos deben aparecer y desaparecer uno por uno). Para resolver este problema yo uso 2 CALayer‘s porque, por alguna razón, en una capa de 2 opaque animaciones en varias capas de glitched.

    CoreAnimation - Opacidad De Fade in y Out de la Animación No funciona

    //set up the parent layer
    CALayer *parentLayer = [CALayer layer];
    parentLayer.frame = CGRectMake(0, 0, size.width, size.height);
    //one layer for one animation
    CALayer *overlayLayer, *barrierLayer;
    CABasicAnimation *animation;
    for (HKAnimatedLayer *animLayer in layersList) {
    overlayLayer = [CALayer layer];
    overlayLayer.contents = (id)[animLayer.image CGImage];
    overlayLayer.frame = CGRectMake(0, 0, size.width, size.height);
    overlayLayer.masksToBounds = YES;
    //layer with appear animation
    if (animLayer.fromTime != 0 && (animLayer.fromTime - kLayerFadeDuration)>0) {
    overlayLayer.opacity = 0.0;
    animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    animation.fromValue = @(0);
    animation.toValue = @(1);
    animation.additive = NO;
    animation.removedOnCompletion = NO;
    animation.beginTime = animLayer.fromTime - kLayerFadeDuration;
    animation.duration = kLayerFadeDuration;
    animation.fillMode = kCAFillModeForwards;
    [overlayLayer addAnimation:animation forKey:@"fadeIn"];
    }
    if (animLayer.toTime == kMovieDuration) {
    [parentLayer addSublayer:overlayLayer];
    } else { //layer with dissappear animation
    barrierLayer = [CALayer layer];
    barrierLayer.frame = CGRectMake(0, 0, size.width, size.height);
    barrierLayer.masksToBounds = YES;
    [barrierLayer addSublayer:overlayLayer];
    animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    animation.fromValue = @(1);
    animation.toValue = @(0);
    animation.additive = NO;
    animation.removedOnCompletion = NO;
    animation.beginTime = animLayer.toTime;
    animation.duration = kLayerFadeDuration;
    animation.fillMode = kCAFillModeForwards;
    [overlayLayer addAnimation:animation forKey:@"fadeOut"];
    [parentLayer addSublayer:barrierLayer];
    }
    }

    Y al final, podemos obtener la correcta secuencia de animación CoreAnimation - Opacidad De Fade in y Out de la Animación No funciona

Dejar respuesta

Please enter your comment!
Please enter your name here