UIView 的动画透视图从底部向上/远离底部翻转

Posted

技术标签:

【中文标题】UIView 的动画透视图从底部向上/远离底部翻转【英文标题】:Animate perspective of UIView to flip halfway up/away from bottom 【发布时间】:2014-04-25 11:44:37 【问题描述】:

我有一个视图,我想像这里的插图一样翻转。

我目前的解决方案:

[UIView animateWithDuration:duration
                 animations:^
                     [someView.layer setAffineTransform:CGAffineTransformMakeScale(1, 0)];
                 ];

这个解决方案的问题是上边缘向下移动,而下边缘向上移动。我希望顶部边缘保持不变,而底部边缘像插图一样向上/远离。

编辑:就像那些猫门,哈哈。你用顶部的铰链将圆盘/方形表面推开。

EDIT2:解决方案。

CGFloat someViewHeight = self.someView.frame.size.height;

CATransform3D baseTransform = CATransform3DIdentity;
baseTransform.m34 = - 1.0 / 200.0;
self.someView.layer.zPosition = self.view.frame.size.height * 0.5;
self.someView.layer.transform = baseTransform;

CATransform3D rotation = CATransform3DMakeRotation(- M_PI_2, 1.0, 0.0, 0.0);
CATransform3D firstTranslation = CATransform3DMakeTranslation(0.0, someViewHeight * 0.5, 0.0);
CATransform3D secondTranslation = CATransform3DMakeTranslation(0.0, - someViewHeight * 0.5, 0.0);

self.someView.layer.transform = CATransform3DConcat(CATransform3DConcat(firstTranslation, CATransform3DConcat(rotation, secondTranslation)), baseTransform);

花了一段时间,直到我发现[UIView animateWithDuration:] 会为视角或其他东西设置动画,所以动画会缩小视图并做一些我无法解释的奇怪事情。所以我现在自己制作动画,每次只改变角度。

【问题讨论】:

【参考方案1】:

你的意思是这样的:

    [UIView animateWithDuration:3.0 animations:^
        [someView.layer setAffineTransform:
         CGAffineTransformConcat(CGAffineTransformMakeScale(1.0f, .0001f), CGAffineTransformMakeTranslation(.0f, someView.frame.size.height*-.5f))];
    ];

这只是解决您描述的问题,要获得图像上显示的结果,您需要进行 3D 转换。

在您的情况下,要进行 3D 变换,事情会变得非常棘手:

    CGFloat viewHeight = someView.frame.size.height; //needed later as this value will change because of transformation applied
    CATransform3D baseTransform = CATransform3DMakeTranslation(.0f, .0f, viewHeight*.5f); //put it towards user for rotation radius
    baseTransform.m34 = -1.0/200.0; //this will make the perspective effect
    someView.layer.zPosition = view.frame.size.height*.5f; //needed so the view isn't clipped
    someView.layer.transform = baseTransform; //set starting transform (no visual effect here)

    [UIView animateWithDuration:6.6 animations:^
        someView.layer.transform = CATransform3DConcat(CATransform3DConcat(CATransform3DMakeRotation(-M_PI_2, 1.0f, .0f, .0f), CATransform3DMakeTranslation(.0f, viewHeight*.5f, .0f)) , baseTransform);
      //or to stay at the same center simply:
      //someView.layer.transform = CATransform3DConcat(CATransform3DMakeRotation(-M_PI_2, 1.0f, .0f, .0f) , baseTransform);
    ];

现在试一试。

【讨论】:

我添加了 3D 变换示例 哇!非常好,谢谢!几乎正是我所需要的,我应该能够弄清楚我自己的最后一部分:) 顶部在移动,它应该是静止的。但是非常感谢,非常接近;)

以上是关于UIView 的动画透视图从底部向上/远离底部翻转的主要内容,如果未能解决你的问题,请参考以下文章

如何为两个视图之间的过渡设置动画,使其看起来第一个向上,第二个从底部出现?

动画调整全屏 UIView 的大小以在屏幕底部显示另一个 UIView

使用动画更改 UIView 背景颜色

通过更新约束滑入 UIView

是否可以将 UIView 的顶部固定到导航栏的底部?

UiView.animateWithDuration 不为 Swift3 设置动画