iOS UIView 动画 CATransform3DMakeRotation 混淆

发布于 2024-12-21 04:11:00 字数 940 浏览 2 评论 0原文

我有一个 UIView,我正在尝试将其向下翻转,同时将其轴置于视图底部。例如:

在此处输入图像描述

为此,我尝试使用 UIView 动画:

[UIView animateWithDuration:3 delay:0 options:UIViewAnimationCurveEaseOut animations:^{

     // Flip Down
     top3.layer.anchorPoint = CGPointMake(0.5, 1.0);
     top3.layer.transform = CATransform3DMakeRotation(M_PI, 1, 0, 0);

 } completion:^(BOOL finished) {

     // Reset?
     //top3.transform = CGAffineTransformMakeScale(1, 1);

 }];

现在它不起作用如我所愿,视图似乎正在远离用户而不是朝向用户。它似乎没有提供 3D 效果,使其在向下旋转时看起来更接近用户,如我的图片所示。我确信这是因为我缺乏了解如何使用 CATransform3DMakeRotation 。

问题

  • 如何让视图在下降时看起来更靠近用户?比如像我的图像示例中那样倾斜它?
  • 当我设置 anchorPoint 时,它会将我的视图向下移动,如何防止这种情况发生并仍然设置我的 anchorPoint
  • 对于UIView动画,我可以使用缓动设置吗?在选项中使用了UIViewAnimationCurveEaseOut
  • 我可以使用重力设置吗?

I have a UIView that I am trying to animate flipping down, while having its axis at the bottom of the view. E.g.:

enter image description here

To do this, I am trying to use a UIView animation:

[UIView animateWithDuration:3 delay:0 options:UIViewAnimationCurveEaseOut animations:^{

     // Flip Down
     top3.layer.anchorPoint = CGPointMake(0.5, 1.0);
     top3.layer.transform = CATransform3DMakeRotation(M_PI, 1, 0, 0);

 } completion:^(BOOL finished) {

     // Reset?
     //top3.transform = CGAffineTransformMakeScale(1, 1);

 }];

Right now it isn't working how I want, it seems like the view is animating AWAY from the user rather then toward. It does't seem to give a 3D effect that makes it look closer to the user when rotating down, as shown in my image. I am positive that this is because of my lack of understanding how to use CATransform3DMakeRotation.

Questions:

  • How can I make the view appear closer to the user as it drops? Such as skewing it as in my image example?
  • When I set my anchorPoint it shifts my view down, how can I prevent this and still set my anchorPoint?
  • With UIView animation, can I use easing settings? Used UIViewAnimationCurveEaseOut in options.
  • Can I use gravity settings?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

要走干脆点 2024-12-28 04:11:00
  • 从你的问题来看,这并不完全清楚,但听起来你在动画过程中没有看到透视变形——视图在旋转时保持矩形,对吗?对于要以透视方式显示的 CALayer,其 transform 需要具有 m34 元素集,如 此处
  • 为了补偿 anchorPoint 移动视图图层,您需要更改视图的原始位置。
  • 是的。除了您正在使用的动画选项之外,还有多个动画选项,您可以像这样组合它们(例如): UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction。
  • 核心动画实际上没有任何物理概念。根据您想要的效果,您可以通过将多个动画与特定的缓动设置链接在一起来实现它,例如,撞击固体表面的下落物体将在其下降过程中使用“缓入”动画,然后使用“缓动”动画。如果随后反弹,则“缓出”。
  • It’s not completely clear from your question, but it sounds like you’re not seeing a perspective distortion during the animation—the view’s staying rectangular as it rotates, right? For a CALayer to display with perspective, its transform needs to have the m34 element set, as described here.
  • To compensate for the anchorPoint moving your view’s layer, you need to change the view’s original position.
  • Yes. There are several animation options in addition to the one you’re using, and you can combine them like this (for example): UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction.
  • Core Animation doesn’t really have any concept of physics. Depending on the effect you’re going for, you can achieve it by chaining multiple animations together with particular easing settings—for instance, a falling object that hits a solid surface would use an “ease in” animation on its way down, then an “ease out” if it then bounced back up.
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文