美文网首页动画OCDemoios实用开发技巧
iOS仿淘宝详情界面弹出动画

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

作者: 李长友同学 | 来源:发表于2017-02-26 11:08 被阅读1388次

前言

最近在开发一个农业电商项目,做到商品详情界面,选择规格时会弹出界面,需要仿照淘宝的动画,于是研究了 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
感谢前人的分享。

相关文章

网友评论

  • yue博客:设置一下锚点或许会更好一些呢
    李长友同学:@yue博客 淘宝改版以后确实没有这个动画了,我没注意这些细节,你真够细心的,我以后有时间拓展一下,感谢
    yue博客:因为你的第一部分的动画是以中心为轴做的旋转,我记得淘宝之前是以底部为轴的,我刚才又看了一下发现淘宝没有这个效果了,希望我没记错吧。
    李长友同学:@yue博客 没想过这方面的,能说的再具体一点么?
  • _昊昊荡荡荡荡:很不错,很实用
    李长友同学:@_昊昊荡荡荡荡 谢谢:smile:
  • 6baf1c83f725:厉害呢
    李长友同学:@GU_D_LUCK 谢谢:smile:
  • e763f1ec1cfe:唉,
    李长友同学:@Viterbi_iOS 嗯?
  • xxttw:不错,不过代码有注视没,有几个参数没看懂
    李长友同学:@Unc1eWang 注释我晚上加上吧,这个确实没考虑到,多谢提醒

本文标题:iOS仿淘宝详情界面弹出动画

本文链接:https://www.haomeiwen.com/subject/cimwwttx.html