仿网易云音乐广告页的转场动画

先上效果图:

效果图
效果图

细心的小伙伴会发现,现在 网易云音乐的广告页 以及 微信相册中点击查看评论 都用了该转场动画。作为一名 iOS 程序员,本能的想去实现它。

说明:本篇博文参考了 onevcat 的 WWDC 2013 Session笔记 以及 GitHub 上的开源项目。不打算先理论了,直接拿 demo 项目开撸。

项目结构

很显然,有两个 ViewController,在本例中分别是 MainViewController(下文简称 mainVC) 和 ForwardViewController(简称 forwardVC)。

首先,我们让 mainVC 声明 UIViewControllerTransitioningDelegate 协议,并实现 - (id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source;方法。

该方法需要你返回一个自定义的动画,该动画类型为 NSObject ,并需要实现 UIViewControllerAnimatedTransitioning 协议。

因此,接下来我们需要实现这样一个实现 UIViewControllerAnimatedTransitioning 协议的 object,不妨取名为 NeteaseTransitionAnimation。

实现 NeteaseTransitionAnimation

在本例中,我们着重看 UIViewControllerAnimatedTransitioning 协议中的两个方法,一是 - (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;,第二个是 - (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext

第一个方法传入动画的时间长度,在这里我们设置为 0.8 秒,我们主要在第二个方法中设定具体的动画效果。

第二个方法中有一个很重要的 UIViewControllerContextTransitioning 类型的上下文对象 transitionContext,通过该对象我们可以获得切出以及切入的 VC 从而设置动画的具体参数等。不多说,接下来直接上具体实现步骤及相应代码。

获得切出和切入的 ViewController

UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];

获得 containerView 并将待切入的 view 加入其中

UIView *containerView = [transitionContext containerView];
[containerView addSubview:toVC.view];

有人问,containerView 是用来干嘛的。官方定义: * The view that acts as the superview for the views involved in the transition. * 。并且,它会自动的将当前所在的 viewController 的 view 加入其中。

使用 CATransform3D 实现动画过程

这步应该算是本篇中最核心的一步。关于涉及到的动画知识,建议先看iOS 核心动画高级技巧中的 3D 变换这一章,在本篇博文中就不具体谈了。
代码:

CATransform3D transform = CATransform3DIdentity;
transform.m34 = -0.002; // 设置透视效果,一般设为 -0.002
[containerView.layer setSublayerTransform:transform]; // 将动画影响到父视图下的所有子视图

CGRect initialFrame = [transitionContext initialFrameForViewController:fromVC];
toVC.view.frame = initialFrame; // 给 toVC 设置初始 frame

让我们重新看一下开头的效果图,可以将整个动画过程分成 3 个阶段。(假设我们将一个周期的总时间设为 t,并规定逆时针转动为正,顺时针转动为负,逆顺指针均从视角的正上往正下看)

0 阶段

fromVC 初始在原位,而 toVC 初始化在 pi / 2 的位置。见图:

具体代码:
toVC.view.layer.transform = CATransform3DMakeRotation(M_PI_2, 0.0, 1.0, 0.0);

0 ~ t / 2 阶段

fromVC 顺时针从 0 度转到 - pi / 2 的位置,toVC 在 pi / 2 位置保持不动。(这时在视觉上二者重合)

t / 2 ~ t 阶段

toVC 从初始的 pi / 2 位置顺时针转到 0 位置。

0 ~ pi 阶段的具体代码:

[UIView animateKeyframesWithDuration:duration delay:0.0 options:0 animations:^{
        [UIView addKeyframeWithRelativeStartTime:0.0
                                relativeDuration:0.5
                                      animations:^{
                                          fromVC.view.layer.transform = CATransform3DMakeRotation(- M_PI_2, 0.0, 1.0, 0.0);
                                    }];
        [UIView addKeyframeWithRelativeStartTime:0.5
                                relativeDuration:0.5
                                      animations:^{
                                          toVC.view.layer.transform =  CATransform3DMakeRotation(0.0, 0.0, 1.0, 0.0);
                                    }];
                              } completion:^(BOOL finished) {
                                  [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
    }];

值得提一下 [transitionContext completeTransition:![transitionContext transitionWasCancelled]]; ,如果没有取消动画的话,即为 [transitionContext completeTransition: YES]。在该方法中,* UIKit will ensure the final state is consistent and remove the fromView from the container. * ,即,在我们这里,该方法将会移除 fromVC.view 。

结尾

该动画源码已上传 GitHub,链接戳此。有问题可以提 issue 或者直接在本博文下方的评论框中进行评论。

其实该动画并不难,建议对着源码多比较,并按 option + 函数名 查看官方定义,会很有收获的。

参考链接也不另给了,基本都是 Apple 官方的文档,没有什么资料比官方文档更有说服力了。

联系我

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

推荐阅读更多精彩内容