疯狂使用 XCode 动画链

Question

我正在尝试制作一个非常简单的动画，但这给了我很大的悲伤...我一定是做错了一些简单的事情，只是错过了一点我想要的结果。

正如此处发布的： 围绕对角线旋转axis

我试图重新创建一个“黑白棋”棋子 - 一个正方形，当激活时会绕轴 Y=X 旋转，并改变颜色以给人一种它正在旋转以露出其背面的错觉。因此，一侧为蓝色，另一侧为红色。

为了完成这项工作，我必须将动画分成 4 部分： 1）绕Y=X旋转90度 2) 将颜色从oldColor更改为0.5*oldColor（给出变暗的错觉） 3）绕Y=X旋转90度（使“后”侧面向前面） 4）将颜色从 0.5*newColor 更改为 newColor（当作品更多地进入光线时给出照明的错觉）

这工作得很好......理论上。问题是，前两个步骤执行得很好，但我无法让后两个步骤启动。

我尝试在 CAAnimationGroup 中执行此操作，但问题是，我需要显式地将颜色设置为新颜色，否则当步骤 3 和 4 动画开始时，会闪烁到原始颜色。我不知道如何在组内做到这一点，所以我将它们分成单独的动画，然后将它们链接起来，如下所示： 1) 火灾1&2 2）捕获animationDidStop：finished：事件并设置颜色，然后触发3和4

这样做，3和4永远不会触发。它只是挂着。

所以我尝试将 3 和 4 上的 timeOffset 更改为 1 和 2 动画的持续时间。这导致 1 和 2 没有发射，但 3 和 4 工作得很好......ARG！

Here is the code broken out as individual animations:
<pre><code>
- (IBAction)handleButtonClick {
 FlipLayer3View *v = (FlipLayer3View *)[self view];
 col = ctr % 2 ? [UIColor blueColor].CGColor : [UIColor redColor].CGColor;

 [self aniFromColor:v.theSquare.backgroundColor toColor:col];

 ctr++;
}

- (void)aniFromColor:(CGColorRef)fromCol toColor:(CGColorRef)toCol {
 FlipLayer3View *v = (FlipLayer3View *)[self view];
 const CGFloat *fromColors = CGColorGetComponents(fromCol);
 const CGFloat *toColors = CGColorGetComponents(toCol);

 v.theSquare.backgroundColor = fromCol;

 ani1 = [[CABasicAnimation animationWithKeyPath:@"transform"] retain];
 [ani1 setDuration:dur];
 [ani1 setToValue:[NSValue valueWithCATransform3D:CATransform3DConcat(v.theSquare.transform, CATransform3DRotate(CATransform3DIdentity, M_PI/2, -1, 1, 0))]];
 [ani1 setValue:@"shrink" forKey:@"name"];
 [ani1 setDelegate:self];
 [ani1 setFillMode:kCAFillModeForwards];
 [ani1 setRemovedOnCompletion:NO];

 ani2 = [[CABasicAnimation animationWithKeyPath:@"backgroundColor"] retain];
 UIColor *c1 = [UIColor colorWithRed:(fromColors[0]/2.0f) green:(fromColors[1]/2.0f) blue:(fromColors[2]/2.0f) alpha:1.0f];

 const float *cgCol1 = CGColorGetComponents(fromCol);
 const float *cgCol2 = CGColorGetComponents(c1.CGColor);
 NSLog(@"Setting color FROM R:%f G:%f B:%f", cgCol1[0], cgCol1[1], cgCol1[2]);
 NSLog(@"Setting color TO R:%f G:%f B:%f", cgCol2[0], cgCol2[1], cgCol2[2]);

 [ani2 setDuration:dur];
 [ani2 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
 [ani2 setFromValue:(id)fromCol];
 [ani2 setToValue:(id)c1.CGColor];
 [ani2 setValue:@"dim" forKey:@"name"];
 [ani2 setDelegate:self];
 [ani2 setFillMode:kCAFillModeForwards];
 [ani2 setRemovedOnCompletion:NO];

 ani3 = [[CABasicAnimation animationWithKeyPath:@"transform"] retain];
 [ani3 setDuration:dur];
 [ani3 setFromValue:[NSValue valueWithCATransform3D:CATransform3DConcat(v.theSquare.transform, CATransform3DRotate(CATransform3DIdentity, M_PI/2, -1, 1, 0))]];
 [ani3 setToValue:[NSValue valueWithCATransform3D:v.theSquare.transform]];
 [ani3 setValue:@"grow" forKey:@"name"];
 [ani3 setTimeOffset:dur];
 [ani3 setDelegate:self];
 [ani3 setFillMode:kCAFillModeForwards];
 [ani3 setRemovedOnCompletion:NO];

 ani4 = [[CABasicAnimation animationWithKeyPath:@"backgroundColor"] retain];
 UIColor *c2 = [UIColor colorWithRed:(toColors[0]/2.0f) green:(toColors[1]/2.0f) blue:(toColors[2]/2.0f) alpha:1.0f];

 cgCol1 = CGColorGetComponents(c2.CGColor);
 cgCol2 = CGColorGetComponents(toCol);
 NSLog(@"Setting color FROM R:%f G:%f B:%f", cgCol1[0], cgCol1[1], cgCol1[2]);
 NSLog(@"Setting color TO R:%f G:%f B:%f", cgCol2[0], cgCol2[1], cgCol2[2]);

 [ani4 setDuration:dur];
 [ani4 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
 [ani4 setFromValue:(id)c2.CGColor];
 [ani4 setToValue:(id)toCol];
 [ani4 setValue:@"glow" forKey:@"name"];
 [ani4 setTimeOffset:dur];
 [ani4 setDelegate:self];
 [ani4 setFillMode:kCAFillModeForwards];
 [ani4 setRemovedOnCompletion:NO];

 [v.theSquare addAnimation:ani1 forKey:@"rotate1"];
 [v.theSquare addAnimation:ani2 forKey:@"fadeout"];
 [v.theSquare addAnimation:ani3 forKey:@"rotate2"];
 [v.theSquare addAnimation:ani4 forKey:@"fadein"];
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
 if (flag) {
  NSString *str = [anim valueForKey:@"name"];

  if ([str isEqual:@"shrink"]) {
   NSLog(@"SHRINK complete...");
  }
  else if ([str isEqual:@"dim"]) {
   NSLog(@"DIM complete...");

   FlipLayer3View *theView = (FlipLayer3View *)[self view];
   theView.theSquare.backgroundColor = col;
  }
  else if ([str isEqual:@"grow"]) {
   NSLog(@"GROW complete...");
  }
  else if ([str isEqual:@"glow"]) {
   NSLog(@"GLOW complete...");
  }
 }
}
</code></pre>

在这里，FWIW 是我在 CAAnimationGroup 解决方案中使用的代码：

<pre><code>
- (IBAction)handleButtonClick {
 FlipLayer3View *v = (FlipLayer3View *)[self view];
 CGColorRef c = ctr % 2 ? [UIColor redColor].CGColor : [UIColor blueColor].CGColor;

 aniGroup = [self aniFromColor:v.theSquare.backgroundColor toColor:c];

 [v.theSquare addAnimation:aniGroup forKey:@"rotate"];
 ctr++;
}

- (CAAnimationGroup *)aniFromColor:(CGColorRef)fromCol toColor:(CGColorRef)toCol {
 FlipLayer3View *v = (FlipLayer3View *)[self view];
 const CGFloat *fromColors = CGColorGetComponents(fromCol);
 const CGFloat *toColors = CGColorGetComponents(toCol);

 ani1 = [CABasicAnimation animationWithKeyPath:@"transform"];
 [ani1 setDuration:dur];
 [ani1 setToValue:[NSValue valueWithCATransform3D:CATransform3DConcat(v.theSquare.transform, CATransform3DRotate(CATransform3DIdentity, M_PI/2, -1, 1, 0))]];
 [ani1 setValue:@"shrink" forKey:@"name"];

 ani2 = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
 UIColor *c1 = [UIColor colorWithRed:(fromColors[0]/2.0f) green:(fromColors[1]/2.0f) blue:(fromColors[2]/2.0f) alpha:1.0f];
 [ani2 setDuration:dur];
 [ani2 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
 [ani2 setToValue:(id)c1.CGColor];
 [ani2 setValue:@"dim" forKey:@"name"];

 ani3 = [CABasicAnimation animationWithKeyPath:@"transform"];
 [ani3 setDuration:dur];
 [ani3 setFromValue:[NSValue valueWithCATransform3D:CATransform3DConcat(v.theSquare.transform, CATransform3DRotate(CATransform3DIdentity, M_PI/2, -1, 1, 0))]];
 [ani3 setToValue:[NSValue valueWithCATransform3D:v.theSquare.transform]];
 [ani3 setValue:@"grow" forKey:@"name"];
 [ani3 setBeginTime:dur];

 ani4 = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
 UIColor *c2 = [UIColor colorWithRed:(toColors[0]/2.0f) green:(toColors[1]/2.0f) blue:(toColors[2]/2.0f) alpha:1.0f];
 [ani4 setDuration:dur];
 [ani4 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
 [ani4 setFromValue:(id)c2.CGColor];
 [ani4 setToValue:(id)toCol];
 [ani4 setValue:@"glow" forKey:@"name"];
 [ani4 setBeginTime:dur];

 aniGroup = [CAAnimationGroup animation];
 [aniGroup setDuration:dur*2];
 [aniGroup setAnimations:[NSArray arrayWithObjects:ani1, ani2, ani3, ani4, nil]];
 [aniGroup setFillMode:kCAFillModeForwards];
 [aniGroup setRemovedOnCompletion:NO];

 return aniGroup;
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
 if (flag) {
  NSString *str = [anim valueForKey:@"name"];

  if ([str isEqual:@"shrink"]) {
   NSLog(@"SHRINK complete...");
  }
  else if ([str isEqual:@"dim"]) {
   NSLog(@"DIM complete...");
  }
  else if ([str isEqual:@"grow"]) {
   NSLog(@"GROW complete...");
  }
  else if ([str isEqual:@"glow"]) {
   NSLog(@"GLOW complete...");
  }
 }
}
</code></pre>

请有人告诉我我错过了什么笨蛋......这真是要了我的命！

谢谢！

克里斯

Answer 1

好吧，那么让我第一个说我白痴吧……在我首先尝试的Group版本中，我设置了beginTime，但在转换为单个动画时一定没有删除它，导致下半场动画序列失败。这让我尝试设置 timeOffset，这给出了奇怪的结果：不触发前半部分，而是触发后半部分。

我只是进去删除了所有这些，beginTime、timeOffset 等。然后触发了前两个动画。然后在animationDidStop:finished:方法中，我更改正在动画的图层的颜色以避免闪回原始颜色，最后启动第二组动画。还有维奥拉！！！

作为参考，这里是工作代码：

- (IBAction)handleButtonClick {
    FlipLayer3View *v = (FlipLayer3View *)[self view];
    col = ctr % 2 ? [UIColor blueColor].CGColor : [UIColor redColor].CGColor;

    [self aniFromColor:v.theSquare.backgroundColor toColor:col];

    ctr++;
}

- (void)aniFromColor:(CGColorRef)fromCol toColor:(CGColorRef)toCol {
    FlipLayer3View *v = (FlipLayer3View *)[self view];
    const CGFloat *fromColors = CGColorGetComponents(fromCol);
    const CGFloat *toColors = CGColorGetComponents(toCol);

    v.theSquare.backgroundColor = fromCol;

    ani1 = [[CABasicAnimation animationWithKeyPath:@"transform"] retain];
    [ani1 setDuration:dur];
    [ani1 setToValue:[NSValue valueWithCATransform3D:CATransform3DConcat(v.theSquare.transform, CATransform3DRotate(CATransform3DIdentity, M_PI/2, -1, 1, 0))]];
    [ani1 setValue:@"shrink" forKey:@"name"];
    [ani1 setDelegate:self];
    [ani1 setFillMode:kCAFillModeForwards];
    [ani1 setRemovedOnCompletion:NO];

    ani2 = [[CABasicAnimation animationWithKeyPath:@"backgroundColor"] retain];
    UIColor *c1 = [UIColor colorWithRed:(fromColors[0]/2.0f) green:(fromColors[1]/2.0f) blue:(fromColors[2]/2.0f) alpha:1.0f];

    const float *cgCol1 = CGColorGetComponents(fromCol);
    const float *cgCol2 = CGColorGetComponents(c1.CGColor);
    NSLog(@"Setting color FROM R:%f G:%f B:%f", cgCol1[0], cgCol1[1], cgCol1[2]);
    NSLog(@"Setting color TO R:%f G:%f B:%f", cgCol2[0], cgCol2[1], cgCol2[2]);

    [ani2 setDuration:dur];
    [ani2 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
    [ani2 setFromValue:(id)fromCol];
    [ani2 setToValue:(id)c1.CGColor];
    [ani2 setValue:@"dim" forKey:@"name"];
    [ani2 setDelegate:self];
    [ani2 setFillMode:kCAFillModeForwards];
    [ani2 setRemovedOnCompletion:NO];

    ani3 = [[CABasicAnimation animationWithKeyPath:@"transform"] retain];
    [ani3 setDuration:dur];
    [ani3 setFromValue:[NSValue valueWithCATransform3D:CATransform3DConcat(v.theSquare.transform, CATransform3DRotate(CATransform3DIdentity, M_PI/2, -1, 1, 0))]];
    [ani3 setToValue:[NSValue valueWithCATransform3D:v.theSquare.transform]];
    [ani3 setValue:@"grow" forKey:@"name"]; [ani3 setDelegate:self];
    [ani3 setFillMode:kCAFillModeForwards];
    [ani3 setRemovedOnCompletion:NO];

    ani4 = [[CABasicAnimation animationWithKeyPath:@"backgroundColor"] retain];
    UIColor *c2 = [UIColor colorWithRed:(toColors[0]/2.0f) green:(toColors[1]/2.0f) blue:(toColors[2]/2.0f) alpha:1.0f];

    cgCol1 = CGColorGetComponents(c2.CGColor);
    cgCol2 = CGColorGetComponents(toCol);
    NSLog(@"Setting color FROM R:%f G:%f B:%f", cgCol1[0], cgCol1[1], cgCol1[2]);
    NSLog(@"Setting color TO R:%f G:%f B:%f", cgCol2[0], cgCol2[1], cgCol2[2]);

    [ani4 setDuration:dur];
    [ani4 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
    [ani4 setFromValue:(id)c2.CGColor];
    [ani4 setToValue:(id)toCol];
    [ani4 setValue:@"glow" forKey:@"name"]; [ani4 setDelegate:self];
    [ani4 setFillMode:kCAFillModeForwards];
    [ani4 setRemovedOnCompletion:NO];

    [v.theSquare addAnimation:ani1 forKey:@"rotate1"];
    [v.theSquare addAnimation:ani2 forKey:@"fadeout"];

}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    if (flag) {
        NSString *str = [anim valueForKey:@"name"];

        if ([str isEqual:@"shrink"]) {
            NSLog(@"SHRINK complete...");
        }
        else if ([str isEqual:@"dim"]) {
            NSLog(@"DIM complete...");

            FlipLayer3View *theView = (FlipLayer3View *)[self view];
            theView.theSquare.backgroundColor = col;
            [theView.theSquare addAnimation:ani3 forKey:@"rotate2"];
            [theView.theSquare addAnimation:ani4 forKey:@"fadein"];
        }
        else if ([str isEqual:@"grow"]) {
            NSLog(@"GROW complete...");
        }
        else if ([str isEqual:@"glow"]) {
            NSLog(@"GLOW complete...");
        }
    }
}

如果有人发现问题或知道更好的方法，我很乐意听到！

谢谢，

克里斯