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
感谢前人的分享。

推荐阅读更多精彩内容