一层上有两个动画

Question

我有一个 CALayer，我想显示它然后隐藏它。

CALayer *layerOne = [CALayer layer];
[layerOne addSublayer:textOne];
layerOne.frame = CGRectMake(0, 0, size.width, size.height);
[layerOne setMasksToBounds:YES];
layerOne.opacity = 0.0;

CABasicAnimation *animationOne = [CABasicAnimation animationWithKeyPath:@"opacity"];
[animationOne setDuration:0];
[animationOne setFromValue:[NSNumber numberWithFloat:0.0]];
[animationOne setToValue:[NSNumber numberWithFloat:1.0]];
[animationOne setBeginTime:3];
[animationOne setRemovedOnCompletion:NO];
[animationOne setFillMode:kCAFillModeForwards];
[layerOne addAnimation:animationOne forKey:@"animateOpacity"];

此代码运行成功，layerOne 在 3 秒后出现。

但是我想隐藏这个层，所以我添加了这个：

CABasicAnimation *animationTwo = [CABasicAnimation animationWithKeyPath:@"opacity"];
[animationTwo setDuration:0];
[animationTwo setFromValue:[NSNumber numberWithFloat:1.0]];
[animationTwo setToValue:[NSNumber numberWithFloat:0.0]];
[animationTwo setBeginTime:6];
[animationTwo setRemovedOnCompletion:NO];
[animationTwo setFillMode:kCAFillModeForwards];
[layerOne addAnimation:animationTwo forKey:@"animateOpacity"];

而且它不起作用。 layerOne 3 秒后没有出现。它只是在第 6 秒闪过然后消失了。似乎第二个动画阻止了第一个动画，只有第二个动画在播放。

我做错了什么？

Answer 1

好吧，一方面，因为第二个动画具有相同的键，当您将其添加到图层时，原始动画将被删除。当动画被移除时，它的长期效果（设置不透明度 = 1.0）也将被移除，因此动画将立即隐藏。

对于这样的事情，显示层的正常过程是：

// set the final result you want to persist forever
layerOne.opacity = 1.0;

// set up your animation here
CABasicAnimation *animationOne = [CABasicAnimation animationWithKeyPath:@"opacity"];
animationOne.fromValue = @(0.);
animationOne.toValue = @(1.);
animationOne.duration = 3.;
animationOne.beginTime = 0.;
animationOne.removedOnCompletion = true;
animationOne.fillMode = kCAFillModeRemove;    // for clarity, this is the default
[layerOne addAnimation:animationOne forKey:@"animateOpacity"];

然后，当您想隐藏图层时，只需反转该过程：

// Set the final animation state
layerOne.opacity = 0.0;

// set up your animation here
CABasicAnimation *animationTwo = [CABasicAnimation animationWithKeyPath:@"opacity"];
animationTwo.fromValue = @(1.);
animationTwo.toValue = @(0.);
animationTwo.duration = 3.;
animationTwo.beginTime = 0.;
animationTwo.removedOnCompletion = true;
animationTwo.fillMode = kCAFillModeRemove;    // for clarity, this is the default
[layerOne addAnimation:animationTwo forKey:@"animateOpacity"];

如果您想将整个过程作为单个事件运行，您应该将两个动画放在一个动画组中：

// set up your animation here
CABasicAnimation *animationOne = [CABasicAnimation animationWithKeyPath:@"opacity"];
animationOne.fromValue = @(0.);
animationOne.toValue = @(1.);
animationOne.duration = 3.;
animationOne.beginTime = 0.;
animationOne.fillMode = kCAFillModeForwards;

// set up your animation here
CABasicAnimation *animationTwo = [CABasicAnimation animationWithKeyPath:@"opacity"];
animationTwo.fromValue = @(1.);
animationTwo.toValue = @(0.);
animationTwo.beginTime = 6.;
animationTwo.duration = 3.;
animationOne.fillMode = kCAFillModeForwards;

// set up the animation group
CAAnimationGroup*   group = [CAAnimationGroup new];
group.beginTime = 0.;
group.duration = 9.;
group.animations = @[ animationOne, animationTwo ];

[layerOne addAnimation:group forKey:@"animateOpacity"];