iOS 仿淘宝加入购物车 向内凹陷折叠动画效果
2016-09-29 本文已影响1624人
何以_aaa
1. 实现效果:
项目中需要添加一个效果,弹出弹框时,底部控制器向内凹陷,类似淘宝加入购物车动画效果,如下图:
效果.gif2. 实现方法
这里有2种实现方法,一种是通过自己代码,另一种通过第三方框架
2.1 自己代码实现
2.1.1 此处只写明关键步骤的实现原理,view根据自己的页面自定义,步骤:
- 按钮点击事件[pop]中,在AnimationVC上面添加一个MaskView(可根据需求在MaskView上添加点击退出的按钮)
- 在Window上,添加弹出的popView
- 添加动画效果,凹陷view
- 在确定/取消的方法中调用[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 使用步骤:
- 将Source文件夹拖到项目中
- 添加QuartzCore.framework
- 导入头文件#import "UIViewController+KNSemiModal.h"
- 调用 [self presentSemiModalView:myView] 弹出动画
- 调用[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....]```
#感谢作者: [参考资料](http://www.2cto.com/kf/201608/541038.html)