CoreAnimation-不透明淡入和淡出动画不起作用 [英] CoreAnimation - Opacity Fade In and Out Animation Not Working

问题描述

我正在尝试创建一个相当简单的CoreAnimation，用于 AVComposition 。我的目标是创建一个 CALayer ，它通过各个子层淡入和淡出标题，然后淡出图像。基本上是幻灯片。使用 AVAssetWriter 将其导出到.mov。

I'm attempting to create a fairly simple CoreAnimation for use in an AVComposition. My goal is to create a CALayer which, through various sublayers, fades a title in and out, then fades in an out images. A slideshow, basically. This is being exported to a .mov using AVAssetWriter.

在WWDC 2011 AVEditDemo的帮助下，我能够获得标题和图像。问题是它们全部同时显示在屏幕上！

With help from the WWDC 2011 AVEditDemo, I've been able to get a title and images appearing. The problem is that they are all on screen at the same time!

我为每个图层创建的不透明度为0.0。然后，我使用以下代码添加了 CABasicAnimation 将它们从0.0渐变为1.0：

I have created each layer with an opacity of 0.0. I have then added an CABasicAnimation to fade them from 0.0 to 1.0, using the following code:

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];

问题似乎出在 beginTime属性上。 1.0是一个延迟，因此它在动画开始后1秒钟开始。但是，它立即出现在屏幕上。淡入淡出的动画

The problem seems to be the 'beginTime' property. The "1.0" is meant to be a delay, so it starts 1 second after the start of the animation. However, it is appearing on the screen straight away. A fade out animation

此淡出淡出的代码只需将fromValue更改为1.0，将toValue更改为0.0。它的开始时间为4.0，可以完美运行。

The reverse of this code, for the fade out, simply changes the fromValue to 1.0 and the toValue to 0.0. It has a begin time of 4.0 and works perfectly.

我正在使用以下代码创建 animatedTitleLayer ：

I'm using the following to create the 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;

动画中的图像淡入时间间隔为5秒的beginTime。

The image fade in animations have a beginTime 5 seconds apart. Like the title, their fade out animations work fine.

任何帮助将不胜感激！

欢呼！

编辑

答案都是有帮助的，但最终我发现只有可以将一个动画添加到 CALayer 中。淡出动画正在起作用，因为它是最后添加的动画。

The answers were all helpful, but ultimately I discovered that only one animation could be added to a CALayer. The fade out animation was working as it was the last one added.

然后我尝试了一个CAAnimationGroup，但是由于我正在修改相同的键值路径，所以此方法不起作用。

I then tried a CAAnimationGroup, but this didn't work as I was modifying the same key value path.

所以我已经意识到 CAKeyframeAnimation 是最好的选择。只是我也遇到了一些困难！代码现在可以消失了，但是还没有消失。我尝试了各种fillMode，更改了持续时间等。无法使其正常工作！

So I've realised that a CAKeyframeAnimation is the best for this. Only I'm having some difficulty with that too! The code is now fading in okay, but it isn't fading out. I've tried various fillMode's, changed the duration, etc. Can't make it work!!

这是我的代码：

    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]; 

推荐答案

我遇到了同样的问题，问题是-一层不能包含淡入和淡出。
因此，您可以像我一样将其他动画添加到父层中

I'm faced the same issue and the problem is - one layer can't contain fade in and out. So you can add the other animation to the parent layer as i did

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];

这篇关于CoreAnimation-不透明淡入和淡出动画不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！