(Core) Animation开始时，图层位置跳跃

Question

我正在尝试创建一个翻转瓦片效果，就像在Windows Phone 7上一样。

到目前为止，我有以下代码，但我有几个问题。

CALayer *layer = self.theRedSquare.layer;
CATransform3D initialTransform = self.theRedSquare.layer.transform;
initialTransform.m34 = 1.0 / -1000;

[UIView beginAnimations:@"Scale" context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve: UIViewAnimationCurveEaseInOut];
layer.transform = initialTransform;
layer.anchorPoint = CGPointMake(-0.3, 0.5);

CATransform3D rotationAndPerspectiveTransform = self.theRedSquare.layer.transform;

rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, M_PI , 0 , -self.theRedSquare.bounds.size.height/2, 0);

layer.transform = rotationAndPerspectiveTransform;

[UIView setAnimationDelegate:self];
[UIView commitAnimations];

1. 为什么我的红色正方形（一个简单的UI视图）在动画开始时向右移动了？

2. 对于锚点，是否可以在父视图上设置位置？目前我是任意地相对于当前视图设置它。

感谢您提供任何指导。

动画之前

动画期间（注意正方形已经向右移动）

动画之后（注意正方形已经向右移动）

视频链接: 示例视频

- JonB

---

这篇文章对我很有帮助：https://medium.com/@filippotosetto/animate-cashapelayer-6fa54adb22eb - AnupamChugh

Answer 1

-(void)setAnchorPoint:(CGPoint)anchorPoint forView:(UIView *)view
{
    CGPoint newPoint = CGPointMake(view.bounds.size.width * anchorPoint.x, view.bounds.size.height * anchorPoint.y);
    CGPoint oldPoint = CGPointMake(view.bounds.size.width * view.layer.anchorPoint.x, view.bounds.size.height * view.layer.anchorPoint.y);

    newPoint = CGPointApplyAffineTransform(newPoint, view.transform);
    oldPoint = CGPointApplyAffineTransform(oldPoint, view.transform);

    CGPoint position = view.layer.position;

    position.x -= oldPoint.x;
    position.x += newPoint.x;

    position.y -= oldPoint.y;
    position.y += newPoint.y;

    view.layer.position = position;
    view.layer.anchorPoint = anchorPoint;
}

-(void)animateView:(UIView *)theRedSquare
{
    CALayer *layer = theRedSquare.layer;
    CATransform3D initialTransform = theRedSquare.layer.transform;
    initialTransform.m34 = 1.0 / -1000;

    [self setAnchorPoint:CGPointMake(-0.3, 0.5) forView:theRedSquare];


    [UIView beginAnimations:@"Scale" context:nil];
    [UIView setAnimationDuration:1];
    [UIView setAnimationCurve: UIViewAnimationCurveEaseInOut];
    layer.transform = initialTransform;


    CATransform3D rotationAndPerspectiveTransform = theRedSquare.layer.transform;

    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, M_PI , 0 , -theRedSquare.bounds.size.height/2, 0);

    layer.transform = rotationAndPerspectiveTransform;

    [UIView setAnimationDelegate:self];
    [UIView commitAnimations];
}

以下内容摘自This，稍作修改...希望有所帮助 更改CALayer的锚点会移动视图

- vibrazy

---

你怎么让动画只是在内部播放？（那个翻转效果）我已经试了几个小时了，还是没搞清楚。 - Frankrockz

Answer 2

如果你将正方形作为独立的视图，翻转功能已内置。

[UIView beginAnimations:@"flip" context:nil];
[UIView setAnimationDuration:.35f];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft
     forView:self.window cache:YES];

// change to the new view (make this one hidden, the other not)

[UIView commitAnimations];

- Lou Franco

---

我很感激，从我的描述中并不是特别明显，但我不是想要从原地翻转。我想要在我的红色正方形（已经是UIView）的左边缘翻转。请参见以下视频以了解我想要的效果：http://www.youtube.com/watch?v=wgoGDPF_NGo - JonB

Answer 3

CALayer 的 anchorPoint 取值范围为 [0,1]。在您尝试沿 Y 轴翻转时，您的图层的锚点应该是 [0, 0.5]。

- Mark Adams

---

我之前已经把这个做好了，但是在动画开始之前红色的UIView就会向右移动。我会尝试录制一个视频。有趣的是，将anchorPoint设置为-0.3可以使其绕y轴向左偏移旋转。 - JonB

我已经添加了一个视频来展示问题。在动画的第一次运行中，正方形向右移动了一些像素。似乎无法解决这个问题。 - JonB