iOS 仿淘宝加入购物车 向内凹陷折叠动画效果

转自：http://www.jianshu.com/p/1272fed070b7

1. 实现效果：

项目中需要添加一个效果，弹出弹框时，底部控制器向内凹陷，类似淘宝加入购物车动画效果，如下图：

效果.png

2. 实现方法

这里有2种实现方法，一种是通过自己代码，另一种通过第三方框架

2.1 自己代码实现

2.1.1 此处只写明关键步骤的实现原理，view根据自己的页面自定义，步骤：

1. 按钮点击事件[pop]中，在AnimationVC上面添加一个MaskView（可根据需求在MaskView上添加点击退出的按钮）
2. 在Window上，添加弹出的popView
3. 添加动画效果，凹陷view
4. 在确定/取消的方法中调用[self close];

2.1.2 这里先解释下m34：

transform本身就是个结构体，首先要实现View的透视效果（近大远小），就是通过它来实现的.

CATransform3D transform3D = CATransform3DIdentity;transform3D.m34 = 1.0 / -500;

m34负责z轴方向的translation（移动），m34= -1/D,默认值是0，也就是说D无穷大，这意味layer in projection plane（投射面）和layer in world coordinate重合了。
D越小透视效果越明显。所谓的D，是eye（观察者）到投射面的距离。

2.1.3 代码：

1. 动画开始

- (void)pop {    // 隐藏tabbar    self.tabBarController.tabBar.hidden = YES;    // 1.view上添加遮罩    [self.view addSubview:self.maskView];    // 2.window上添加弹框    [[UIApplication sharedApplication].windows[0] addSubview:self.popView];    CGRect rec = self.popView.frame;    rec.origin.y = SCREEN_HEIGHT - FYpopView_HEIGHT;    [UIView animateWithDuration:0.3 animations:^{        // 第一段操作        // 逆时针X轴旋转 缩小到0.95倍，实现向内倾斜凹陷的透视效果        self.view.layer.transform = [self transform1];    } completion:^(BOOL finished) {        // 第二段操作，        // 把transform设置为初始化，透视效果和第一段一样，        // 让他回归到正常（不倾斜），        // 同时大小最终为0.8，高度向上移动一点点，        // 添加maskView，添加popView        [UIView animateWithDuration:0.3 animations:^{            self.view.layer.transform = [self transform2];            self.maskView.alpha = 0.5;            self.popView.frame = rec;        } completion:^(BOOL finished) {        }];    }];  }

2. 动画结束

- (void)close {    CGRect rec = self.dimensionView.frame;    rec.origin.y = self.view.bounds.size.height;    // 动画回去    [UIView animateWithDuration:0.3 animations:^{        self.dimensionView.frame = rec;        self.maskView.alpha = 0;        self.view.layer.transform = [self transform1];    } completion:^(BOOL finished) {        [UIView animateWithDuration:0.3 animations:^{            // 折叠完之后让transform回归到正常水平            self.view.layer.transform = CATransform3DIdentity;        } completion:^(BOOL finished) {            [self.dimensionView removeFromSuperview];        }];    }];    self.tabBarController.tabBar.hidden = NO;}

3. 关键形变方法

// 第一次形变- (CATransform3D)transform1{    // 每次进来都进行初始化 回归到正常状态    CATransform3D form1 = CATransform3DIdentity;    // m34就是实现视图的透视效果的（俗称近大远小）    form1.m34 = 1.0/-900;    // 缩小    form1 = CATransform3DScale(form1, 0.85, 0.85, 1);    // x轴旋转    form1 = CATransform3DRotate(form1, 15.0 * M_PI/180.0, 1, 0, 0);    return form1;}// 第二次形变- (CATransform3D)transform2{    // 初始化 再次回归正常    CATransform3D form2 = CATransform3DIdentity;    // 用和上面相同的m34 来设置透视效果    form2.m34 = [self transform1].m34;    // 向上平移一丢丢 让视图平滑点    form2 = CATransform3DTranslate(form2, 0, self.view.frame.size.height * (-0.08), 0);    // 最终缩小到0.8倍    form2 = CATransform3DScale(form2, 0.8, 0.8, 1);    return form2;}

2.2 通过第三方框架实现 KNSemiModalViewController

这是国外一个比较成熟的库，自定义非常高，可弹出view，也可弹出控制器，但是用时会遇到些问题

2.2.1 使用步骤：

1. 将Source文件夹拖到项目中
2. 添加QuartzCore.framework
3. 导入头文件#import "UIViewController+KNSemiModal.h"
4. 调用 [self presentSemiModalView:myView] 弹出动画
5. 调用[self dismissSemiModalView] 关闭动画

2.2.2 可能遇到的问题：

1. 问题1

ld: 1 duplicate symbol for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
解决方法：add typedef

typedef NS_ENUM(NSUInteger, KNSemiModalTransitionStyle) {KNSemiModalTransitionStyleSlideUp,KNSemiModalTransitionStyleFadeInOut,KNSemiModalTransitionStyleFadeIn,KNSemiModalTransitionStyleFadeOut,};

2. 问题2

Exception: Defaults must have been set when accessing
解决方法：
如果你要的根控制器是有导航栏的

[self.navigationController presentSemiViewController....]

如果没有导航栏

[self presentSemiViewController....]

感谢作者： 参考资料

文／Anna_Wang（简书作者）
原文链接：http://www.jianshu.com/p/1272fed070b7
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。