一层上有两个动画

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

此代码工作成功,3秒后出现layerOne.

但我想隐藏这一层,所以我添加了这个:

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

好吧,首先,因为第二个动画具有相同的键,当您将其添加到图层时,原始动画将被删除.移除动画时,它的长期效果(设置opacity = 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"];