核心动画 - 不起作用的不透明度淡入淡出动画

Question

我正在尝试创建一个相对简单的CoreAnimation，用于在AVComposition中使用。我的目标是创建一个CALayer，通过各种子层，淡入淡出标题，然后淡入淡出图像。基本上是幻灯片。这是使用AVAssetWriter导出为.mov文件。

在WWDC 2011 AVEditDemo的帮助下，我已经能够让标题和图像出现了。问题是它们都同时出现在屏幕上！

我已经将每个图层的不透明度设置为0.0。然后，我添加了一个CABasicAnimation将它们从0.0淡入到1.0，使用以下代码：

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秒后开始动画，但它立即出现在屏幕上。一个淡出动画。

对于淡出的相反代码，只需将 fromValue 更改为 1.0，将 toValue 更改为 0.0。它具有 4.0 的开始时间，并且可以完美地运行。

我正在使用以下代码创建 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秒。正如标题所述，它们的淡出动画很好用。

非常感谢任何帮助！

干杯！

编辑

答案都很有用，但最终我发现只能向一个CALayer添加一个动画。淡出动画能够工作是因为它是最后添加的。

然后我尝试了CAAnimationGroup，但由于我修改了同一键路径，所以它不起作用。

所以我意识到CAKeyframeAnimation对此是最好的。但我现在也遇到了一些困难！代码现在可以淡入，但无法淡出。我尝试了各种fillMode，更改了持续时间等等。无法使其工作！！

这是我的代码：

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

- gamblor87

---

你是想提前定位和配置所有图层，还是可以在幻灯片转换时添加它们？ - nielsbot

我提前定位和配置好了。我通过这篇文章找到了答案：https://dev59.com/FkvSa4cB1Zd3GeqPgrcW - gamblor87

你已经能够将CALayer导出为视频了吗？我现在卡在这里了。如果你有任何提示，请在我的问题中回复。谢谢！http://stackoverflow.com/questions/10285175/avfoundation-exporting-calayers-only - spring

关键帧时间应该是0.0到1.0之间的值，根据苹果文档：https://developer.apple.com/documentation/quartzcore/cakeyframeanimation/1412522-keytimes。 - Jakehao

Answer 1

我遇到了相同的问题，问题是：一个层不能同时包含淡入和淡出效果。 因此，你可以像我一样将另一个动画添加到父层中。

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

- Tim Kozak

---

我从来没有想到过这个。谢谢@comonitos - David John Smith

可能是由于iOS 7 SDK的2013-14更新或我所做的某些不同之处，但目前可以将多个动画添加到一个图层中，使得无需使用额外的图层 @comonitos - petershine

Answer 2

哎呀，这么多复杂的答案。最简单的方法只是添加autoreverse。大功告成。

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

- Mikhail Larionov

---

这个解决方案在淡出完成后立即开始淡出。我猜原帖作者想要标题淡入，保持可见一段时间，然后再淡出。 - oskare

确实是最好的答案。对于那些正在遇到困难的人，我想补充一下，在获取你的视图层之前，你可能还需要加上 [yourView setWantsLayer:YES]; 。默认情况下，视图没有层。 - Borzh

Answer 3

这对我有用：

 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

- LenK

---

很好的回答 :) 在函数中 - YannSteph

Answer 4

重点是关键名称。您需要设置不透明度关键字。

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

请查看示例代码。我在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")

- Den

---

添加：您可以在 layer.add 或 CAKeyframeAnimation(keyPath: "opacity") 中设置关键字。 - João Souza

Answer 5

尝试：

fadeInAnimation.beginTime = CACurrentMediaTime()+1.0;

- Peter DeWeese

Answer 6

从gamblor87提到的链接中借鉴并添加我的评论作为解释。

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

- SayeedHussain

---

fadeInAndOut.beginTime = 1.0不起作用，你需要使用CACurrentMediaTime() + 1; - Jay

Answer 7

看看我的答案 https://dev59.com/KGUq5IYBdhLWcg3wT-2D#44204846

总结一下：要使用beginTime，你应该在动画对象上将fillMode设置为kCAFillModeBackwards。

- surfrider

Answer 8

问题的核心在于不理解CAKeyframeAnimation的keyTimes属性。这个问题澄清了一切，并让我走上了正确的道路： CAKeyFrameAnimation中的keyTime是什么类型的值？

- gamblor87

Answer 9

另一种方法是使用CAAnimationGroup。CAKeyframeAnimation对于UI也很有效。这段代码在UI中可以很好地展示实时动画。但是，在AVVideoCompositionCoreAnimationTool中根本不起作用 - 如果需要，请向下滚动。这不是可复制粘贴的代码，但你可以了解到思路。此外，你还可以将其他动画添加到组中：

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

这里是关于使用AVVideoCompositionCoreAnimationTool上的图层动画的小提示。您可以查看相关的gif图片（标题应该逐个出现和消失）。为了解决这个问题，我使用了2个单独的CALayer，因为由于某种原因，在一个图层上，多个图层上的2个不透明动画会出现故障。

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

在最后，我们可以得到正确的动画序列。

- WINSergey

Answer 10

LenK的答案对我非常有效。如果有人感兴趣，我已经为Obj-C重新编写了代码（注意我还稍微更改了淡入的关键帧）：

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;

- Ryan

---

这对我很有效，但你需要添加一行额外的代码：fadeInAndOutAnimation.repeatCount = HUGE_VALF;。否则视图会淡出一次，然后再也不会出现了。 - rmaddy