iOS仿淘宝详情界面弹出动画

前言

最近在开发一个农业电商项目，做到商品详情界面，选择规格时会弹出界面，需要仿照淘宝的动画，于是研究了 CATransform3D 并封装了一个控件，方便以后使用。

动画演示图：

动画演示

思路：

封装一个 CYModalView，上传到了 github，使用时只需要一行代码调用就可以使用，有兴趣的朋友可以去下载看一下，如果觉得不错可以帮忙 star 一下，万分感谢。github 地址见下文的使用说明。

子控件:(子控件具体初始化略，详情见github代码)

@property (strong, nonatomic) UIView *contentView;
@property (strong, nonatomic) UIControl *dismissControl;
@property (strong, nonatomic) UIImageView *maskImageView;
@property (strong, nonatomic) UIViewController *viewController;

初始化CATransform3D

CATransform3D t = CATransform3DIdentity;
t.m34 = - 1 / 300.0;
[_maskImageView.layer setTransform:t];
_maskImageView.layer.zPosition = -10000;

上下文绘制图片

+ (UIImage *)imageWithWindow {
    @autoreleasepool {
        UIGraphicsBeginImageContextWithOptions([UIApplication sharedApplication].keyWindow.bounds.size, YES, 2);
        [[UIApplication sharedApplication].keyWindow.layer renderInContext:UIGraphicsGetCurrentContext()];
        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return image;
    }
}

设置图片

_maskImageView.image = [self.class imageWithWindow];

将动画分解为两部分：

动画1：

_maskImageView.layer.transform = CATransform3DRotate(t, 7/90.0 * M_PI_2, 1, 0, 0);

动画1

动画2：

_maskImageView.layer.transform = CATransform3DTranslate(t, 0, -30, -40);

动画2

使用说明

从 github 下载代码，将带有 .h 和 .m 的文件夹 CYModalView 拖入到项目中，然后在要使用的控制器中:
github地址：https://github.com/lichangyou/CYModalView

1.导入CYModalView

 #import "CYModalView.h" 

2.添加属性

@property (strong, nonatomic) CYModalView *modalView;

3.初始化CYModalView

self.modalView = [[CYModalView alloc] initWithHeight:300 andViewController:self];

4.弹出视图

[self.modalView present];

5.弹回视图，两个方法，根据弹回后有无操作选择

[self.modalView dismiss];

[self.modalView dismissWithCompletion:^{
    // 弹回后的操作，如跳转到下一个界面
}];

参考资料：

了解CATransform3D，请看这里
关于CATransform3D
LPSemiModalView
感谢前人的分享。