如何围绕对角线旋转CALayer？

Question

我正在尝试实现一个翻转动画,用于iPhone应用程序等棋盘游戏.动画应该看起来像一个旋转的游戏片,并改变其背面的颜色(有点像黑白棋片).我已经设法创建了一个围绕其正交轴翻转片段的动画,但是当我尝试通过改变围绕z轴的旋转来围绕对角线轴旋转时,实际图像也会旋转(不出意料).相反,我想围绕对角轴"按原样"旋转图像.

我试图改变layer.sublayerTransform但没有成功.

这是我目前的实施.它的工作原理是解决在动画结束时获取镜像图像的问题.解决方案是实际上不将图层旋转180度,而是将其旋转90度,更改图像然后将其旋转回来.

最终版本:基于Lorenzos建议创建离散键控动画并计算每帧的变换矩阵.相反,该版本试图根据图层大小估计所需的"引导"帧数,然后使用线性键控动画.此版本以任意角度旋转,因此绕对角线旋转使用45度角.

用法示例:

[someclass flipLayer:layer image:image angle:M_PI/4]

执行:

- (void)animationDidStop:(CAAnimationGroup *)animation
                finished:(BOOL)finished {
  CALayer *layer = [animation valueForKey:@"layer"];

  if([[animation valueForKey:@"name"] isEqual:@"fadeAnimation"]) {
    /* code for another animation */
  } else if([[animation valueForKey:@"name"] isEqual:@"flipAnimation"]) {
    layer.contents = [animation valueForKey:@"image"];
  }

  [layer removeAllAnimations];
}

- (void)flipLayer:(CALayer *)layer
            image:(CGImageRef)image
            angle:(float)angle {
  const float duration = 0.5f;

  CAKeyframeAnimation *rotate = [CAKeyframeAnimation
                                 animationWithKeyPath:@"transform"];
  NSMutableArray *values = [[[NSMutableArray alloc] init] autorelease];
  NSMutableArray *times = [[[NSMutableArray alloc] init] autorelease];
  /* bigger layers need more "guiding" values */
  int frames = MAX(layer.bounds.size.width, layer.bounds.size.height) / 2;
  int i;
  for (i = 0; i < frames; i++) {
    /* create a scale value going from 1.0 to 0.1 to 1.0 */
    float scale = MAX(fabs((float)(frames-i*2)/(frames - 1)), 0.1);

    CGAffineTransform t1, t2, t3;
    t1 = CGAffineTransformMakeRotation(angle);
    t2 = CGAffineTransformScale(t1, scale, 1.0f);
    t3 = CGAffineTransformRotate(t2, -angle);
    CATransform3D trans = CATransform3DMakeAffineTransform(t3);

    [values addObject:[NSValue valueWithCATransform3D:trans]];
    [times addObject:[NSNumber numberWithFloat:(float)i/(frames - 1)]];
  }
  rotate.values = values;
  rotate.keyTimes = times;
  rotate.duration = duration;
  rotate.calculationMode = kCAAnimationLinear;

  CAKeyframeAnimation *replace = [CAKeyframeAnimation
                                  animationWithKeyPath:@"contents"];
  replace.duration = duration / 2;
  replace.beginTime = duration / 2;
  replace.values = [NSArray arrayWithObjects:(id)image, nil];
  replace.keyTimes = [NSArray arrayWithObjects:
                      [NSNumber numberWithDouble:0.0f], nil];
  replace.calculationMode = kCAAnimationDiscrete;

  CAAnimationGroup *group = [CAAnimationGroup animation];
  group.duration = duration;
  group.timingFunction = [CAMediaTimingFunction
                          functionWithName:kCAMediaTimingFunctionLinear];
  group.animations = [NSArray arrayWithObjects:rotate, replace, nil];
  group.delegate = self;
  group.removedOnCompletion = NO;
  group.fillMode = kCAFillModeForwards;
  [group setValue:@"flipAnimation" forKey:@"name"];
  [group setValue:layer forKey:@"layer"];
  [group setValue:(id)image forKey:@"image"];

  [layer addAnimation:group forKey:nil];
}

原始代码:

+ (void)flipLayer:(CALayer *)layer
          toImage:(CGImageRef)image
        withAngle:(double)angle {
  const float duration = 0.5f;

  CAKeyframeAnimation *diag = [CAKeyframeAnimation
                               animationWithKeyPath:@"transform.rotation.z"];
  diag.duration = duration;
  diag.values = [NSArray arrayWithObjects:
                 [NSNumber numberWithDouble:angle],
                 [NSNumber numberWithDouble:0.0f],
                 nil];
  diag.keyTimes = [NSArray arrayWithObjects:
                   [NSNumber numberWithDouble:0.0f],
                   [NSNumber numberWithDouble:1.0f],
                   nil];
  diag.calculationMode = kCAAnimationDiscrete;

  CAKeyframeAnimation *flip = [CAKeyframeAnimation
                               animationWithKeyPath:@"transform.rotation.y"];
  flip.duration = duration;
  flip.values = [NSArray arrayWithObjects:
                 [NSNumber numberWithDouble:0.0f],
                 [NSNumber numberWithDouble:M_PI / 2],
                 [NSNumber numberWithDouble:0.0f],
                 nil];
  flip.keyTimes = [NSArray arrayWithObjects:
                   [NSNumber numberWithDouble:0.0f],
                   [NSNumber numberWithDouble:0.5f],
                   [NSNumber numberWithDouble:1.0f],
                   nil];
  flip.calculationMode = kCAAnimationLinear;

  CAKeyframeAnimation *replace = [CAKeyframeAnimation
                                  animationWithKeyPath:@"contents"];
  replace.duration = duration / 2;
  replace.beginTime = duration / 2;
  replace.values = [NSArray arrayWithObjects:(id)image, nil];
  replace.keyTimes = [NSArray arrayWithObjects:
                      [NSNumber numberWithDouble:0.0f], nil];
  replace.calculationMode = kCAAnimationDiscrete;

  CAAnimationGroup *group = [CAAnimationGroup animation];
  group.removedOnCompletion = NO;
  group.duration = duration;
  group.timingFunction = [CAMediaTimingFunction
                          functionWithName:kCAMediaTimingFunctionLinear];
  group.animations = [NSArray arrayWithObjects:diag, flip, replace, nil];
  group.fillMode = kCAFillModeForwards;

  [layer addAnimation:group forKey:nil];
}

Answer 1

你可以这样伪造它:创建一个仿射变换,沿着它的对角线折叠图层:

A-----B           B
|     |          /
|     |   ->   A&D
|     |        /
C-----D       C

更改图像,并在另一个动画中将CALayer转换回来.这将产生围绕其对角线旋转的层的错觉.

那个矩阵应该是我记得数学正确的:

0.5 0.5 0
0.5 0.5 0
0   0   1

更新:好的,CA真的不喜欢使用退化变换,但你可以这样近似:

CGAffineTransform t1 = CGAffineTransformMakeRotation(M_PI/4.0f);
CGAffineTransform t2 = CGAffineTransformScale(t1, 0.001f, 1.0f);
CGAffineTransform t3 = CGAffineTransformRotate(t2,-M_PI/4.0f);  

在我在模拟器上的测试中仍然存在一个问题,因为旋转比te平移更快,因此使用纯黑色方块效果有点奇怪.我想如果你有一个居中的精灵周围有透明区域,那么效果将接近预期的效果.然后,您可以调整t3矩阵的值,以查看是否获得更具吸引力的结果.

经过更多的研究,似乎应该通过关键帧为自己的过渡动画,以获得对过渡本身的最大控制.假设您要在一秒钟内显示此动画,您应该使用kCAAnimationDiscrete在十分之一秒内显示10个矩阵.那些矩阵可以通过以下代码生成:

CGAffineTransform t1 = CGAffineTransformMakeRotation(M_PI/4.0f);
CGAffineTransform t2 = CGAffineTransformScale(t1, animationStepValue, 1.0f);
CGAffineTransform t3 = CGAffineTransformRotate(t2,-M_PI/4.0f);  

其中keyFrame的ech的animationStepValue取自此进程:

{1 0.7 0.5 0.3 0.1 0.3 0.5 0.7 1}

那就是:你正在生成十个不同的变换矩阵(实际上是9),将它们作为关键帧推送到每十分之一秒,然后使用"不插入"参数.您可以调整动画编号以平衡平滑度和性能*

*对不起可能的错误,最后一部分是在没有拼写检查的情况下编写的.