如何使用 UIView 创建自定义翻转动画

Posted

技术标签:

【中文标题】如何使用 UIView 创建自定义翻转动画【英文标题】:How to create Custom flip animation using UIView 【发布时间】:2015-04-26 15:07:49 【问题描述】:

我正在尝试创建一个自定义动画,类似于 UIView 的默认翻转动画,但没有实际的翻转,以及我希望在左侧而不是在中心的翻转轴。这是我想要完成但没有重复的示例:

另外,在代码中,我将添加 UILabel 作为子视图和更多元素。

如果您能提供代码示例,将不胜感激 非常感谢您的任何支持!

更新:

使用@artal 提供的示例并获得了 UIImageView 想要的效果,但是我怎样才能获得 UIButton 的相同示例?

尝试了下一个代码:

objectivesButton = [[UIButton alloc] initWithFrame:CGRectMake( 0.25f * [UIScreen mainScreen].bounds.size.width, 0.7f * [UIScreen mainScreen].bounds.size.height, 0.5f * [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height * 0.3f)];
[objectivesButton addTarget:self
                action:@selector(startAnimationButton)
      forControlEvents:UIControlEventTouchUpInside];
objectivesButton.backgroundColor = [UIColor yellowColor];
objectivesButton.layer.anchorPoint = CGPointMake(0, 0.5);
[self.view addSubview:objectivesButton];

- (void)startAnimationButton

CATransform3D perspectiveTrasnform = CATransform3DIdentity;
perspectiveTrasnform.m34 = -0.004;

CGFloat rotateAngleDeg = 90;
CATransform3D flipTransform = CATransform3DRotate(perspectiveTrasnform, rotateAngleDeg / 180.0 * M_PI, 0, 1.5, 0);
[UIView animateWithDuration:3.0f animations:^()

    objectivesButton.layer.transform = flipTransform;
];


【问题讨论】:

你能把你的图片缩小一点,不要那么纯红色吗? @Azat 只是按照您的建议用更方便的方式更改了 gif 【参考方案1】:

您可以通过将透视和旋转变换应用于其底层 CALayer(3D 变换)来以这种方式为视图设置动画。 要从左侧开始,您可以设置图层的anchorPoint。 这是一个例子:

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.png"]];
imageView.center = CGPointMake(self.view.center.x - imageView.frame.size.width * 0.5, self.view.center.y + imageView.frame.size.height * 0.5);
imageView.layer.anchorPoint = CGPointMake(0, 1);
[self.view addSubview:imageView];

CATransform3D perspectiveTrasnform = CATransform3DIdentity;
perspectiveTrasnform.m34 = -0.004;

CGFloat rotateAngleDeg = 90;
CATransform3D flipTransform = CATransform3DRotate(perspectiveTrasnform, rotateAngleDeg / 180.0 * M_PI, 0, 1, 0);
[UIView animateWithDuration:5 animations:^()

    imageView.layer.transform = flipTransform;
];

【讨论】:

Artal,我刚刚更新了我的问题 @LaurStefan 此方法适用于任何视图。我在您的问题更新中尝试了代码,它按预期工作。我不明白它是否不适合你。

以上是关于如何使用 UIView 创建自定义翻转动画的主要内容,如果未能解决你的问题,请参考以下文章

使用自动布局时如何将动画从一个 UIView 翻转到另一个?

如何在 Swift 中多次为 UIView 的翻转设置动画

如何在 iOS 中为两个 UIView 翻转设置动画?

从 Tableview 自定义单元格翻转过渡到 UIViewController

如何知道 UIView 动画何时全部完成

UIView翻转动画