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

1. 实现效果:

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

效果.gif

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....]

感谢作者: 参考资料

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,522评论 25 707
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,096评论 5 13
  • 以前在没有生宝宝的时候,每逢周末休息的时候,睡到自然醒是件最美的事情了。那时候听说孕期需要经常做产检,而且需...
    辛馨阅读 415评论 0 0
  • 虽说是意料之中,但还是让人非常不愉快的剧情如期而至。 某些人的某些做法已经是不知道该怎么形容了。 现在的工作变成了...
    沃雷塔尔阅读 100评论 0 0
  • “如何在30秒内快读说明自己的观点,让对方满意?” 小青曾经也觉得特别难,不过她最近找到了秘籍。 - 1 - 能说...
    栋仔的龙大猫阅读 245评论 0 1