如何在单个动画中缩放和旋转视图 [英] How to scale and rotate a view in a single animation

问题描述

我正在尝试通过使其从屏幕中心出现，同时使其放大到全尺寸，同时还使其以3D方式围绕x轴旋转来呈现视图。创建视图时，我对其应用了变换以确保它被缩小并旋转以开始（它是如此之小以至于它实际上是不可见的），然后我尝试使用像这样的CATransform3D：

I am trying to present a view by making it emerge from the centre of the screen while growing to its full size, while also rotating it around the x-axis in a 3D manner. When I create the view I apply a transform to it to make sure it is shrunk and rotated to start off with (it is so small it is not actually visible), then I try to use a CATransform3D like this:

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];
CATransform3D transform = CATransform3DRotate(view.layer.transform, M_PI, 1.0, 0, 0);
transform = CATransform3DScale(transform, 1000, 1000, 1000);
transform.m34 = 1.0 / 10000;
[anim setToValue:[NSValue valueWithCATransform3D:transform]];
[anim setDuration:0.75f];
anim.removedOnCompletion = NO;
anim.delegate = self;
[view.layer addAnimation:anim forKey:@"grow"];

但是此动画不会更改图层的实际变换，所以我也这样做：

However this animation does not change the actual transform of the layer, so I also do this:

- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
    view.layer.transform = CATransform3DIdentity;
    [view.layer removeAllAnimations];
}

在动画停止后设置变换。但是，这有时会导致动画结束时出现明显的闪烁。我相信这是因为动画将原始转换放回动画阶段的末尾，并且这是在animationDidStop例程被调用之前暂时发生的。有更好的方法吗？

to set the transform once the animation stops. However this sometimes results in a noticeable flicker at the end of the animation. I believe this is because the animation puts the original transform back at the end of the animation phase and this happens momentarily before the animationDidStop routine gets called. Is there a better way to do this?

编辑：将其合并到UIView动画中的工作方式是，您可以直接设置转换：

Incorporating it into a UIView animation works as this way you can set the transform directly:

view.layer.transform = CATransform3DScale(CATransform3DIdentity, 0.001, 0.001, 0.001);
view.layer.transform = CATransform3DRotate(view.layer.transform, M_PI, 1.0, 0.0, 0.0);

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.75];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
CATransform3D transform = CATransform3DRotate(view.layer.transform, M_PI, 1.0, 0, 0);
transform = CATransform3DScale(rotationTransform, 1000, 1000, 1000);
transform.m34 = 1.0 / -500;
view.layer.transform = transform;
[UIView commitAnimations];

但是，我仍然想对我的原始查询做出回答，以了解如何成功实现相同的目标

However, I would still like an answer to my original query, as to how to achieve the same successully using a CAAnimation, as that provides more flexibility for animations generally.

Edit2：看来，我最初的问题（如何解决CAAnimation的问题）的答案实际上是非常简单。为了保持结束状态（并消除闪烁），我只需要添加以下行：

It seems the answer to my original question (how to fix the problem with the CAAnimation) was actually very straightforward. To keep the end state (and remove the flicker), I just needed to add the following line:

anim.fillMode = kCAFillModeForwards;

推荐答案

这可能会帮助您：

  animationView.layer.anchorPoint = CGPointMake(0.0f, 0.0f);

  animationView.center = CGPointMake(0, 
                                  (animationView.center.y - 
                                   (animationView.bounds.size.height/2.0f)));

  // start the Page Open
  [UIView beginAnimations:@"Animation" context:nil];
  [UIView setAnimationDuration:2.0];     
  // set angle as per requirement
  [animationView.layer setValue:[NSNumber numberWithInt:180] 
                  forKeyPath:@"transform.rotation.x"];

  [UIView commitAnimations];

这篇关于如何在单个动画中缩放和旋转视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！