 OK. OK. Hi, guys. So today, I'll be talking about animations, transitions, and how you can use these in your applications to create a rich and interactive mobile experience. So if I can just do a quick survey before I begin. How many of you actually make use of these custom animations and transitions regularly in your apps? This is a quick show of hands. No, OK, that's a wonderful audience because there's a lot to learn today. OK. Great. So before I begin, a short introduction of myself. My name is Sudeep, and this is the second time I'm presenting in iOS Dev Scout. If you were here last month, you will recall my presentation about WebRTC. And right now, I'm working at a startup called Hallmask. So Hallmask is a pioneering digital health company which integrates big data, behavioral science, and consumer technology to address the growing epidemic of chronic diseases. So essentially, what we're doing is building powerful predictive algorithms that offer insights for personalized health care. In such a scenario, the user experience plays a critical role in determining the success of the app. And this is mainly because the app actually becomes an essential part of the user's lifestyle. So things like every time the user has a meal, he will use the app to input the photo into the app. Every time he goes for a run, for example, he uses the app to track his run. And so yeah, it becomes a very important part of the user's lifestyle. And so when our iOS team actually sat down together to ask ourselves how we can build this great user experience, when we asked ourselves that question and actually studied many of the successful apps on the app store, we realized something. And we realized that all of these apps actually make use of custom transitions and animations to make sure the user is fully immersed into the app. And he has a great time using it. And we found that it's really important. So today, I'll be just going through some quick examples, a few case studies of the apps that we really like, and a few coding examples on how we can get started to integrating your own transitions. Right, so I'm sure all of you have heard of core animation before. Core animation is a really powerful framework by Apple to do most of the graphics rendering and animation stuff you see on the devices regularly. So much of this actually happens under the hood, but you can actually use the API to create some really cool animations. So these are some examples we really like. In the first one, Goji, you can see subtle bounces and floating effects to add an element of fun to the app. In the second one, the app called Flight. You can see the plane moving, the animation adds an illusion of motion. And the rotating labels also add another dimension to the app. And I'm sure all of you have seen this Twitter star animation before. So I guess my point is that these animations don't really need to be grand or large to actually be effective. And even the smallest animations can add a lot to the entire user experience. Yeah, so the first example I'll go through is this Twitter animation that you see on the launch of the app. It works great as both a launching screen and a loading screen. And it's really simple to implement. So let me just go through that right now. So if I run it, you can see how it looks like. Yeah. OK, so let me just go through the code quickly. This is my storyboard setup. In my view, this is my main view. And I was too lazy to create a Twitter from scratch, so I just took an image. And you can pretend that's the app itself. And on top of that, I have an overlay, which is just a view with a white opaque background. So the strategy to solving this is first you have to mask it using the Twitter logo, which I have over here. Sorry. Yeah. So this is the Twitter logo, which you can't really see. So while the mask is decreasing and increasing in size, I want to reduce the obesity of the overlay. So let's see how that's done. OK, so here I set up my standard outlets. I declare my mask as a CA layer. And I have my animation, which is a CA basic animation. So you can also use a keyframe animation for this. But for the purpose of this example, I'm just going through a basic animation just to show you how it works. And OK, this is where I actually create the mask. OK, so I create the CA layer. I set the contents to the image. So this is the image of the Twitter logo. And I just set it as a 100 by 100 frame in the middle of the screen. And then I set the mask of the main view as this mask. So once I'm done with that, I go to decrease size, which is where the animation is actually being done for the decreasing size of the Twitter mask. So CA basic animation works with this thing called the key path. So if I set it to bounce, it will actually affect the size of, you can change the bounce of the mask. Here I set the delegate, the duration of the animation, and the from and to value. So here you can see that I'm making it smaller, making it 80 by 80. OK, and these two lines essentially ensure that the animation isn't removed on completion because the default behavior is such that after the animation runs, it will default to the original state. So by setting the fill mode, you can actually make sure it runs forward and it's removed on completion. And then I add the animation itself. So after the decrease animation is run, my delegate method is called because I set the delegate earlier. And here I call the increase animation. So if you remember correctly, let me just show it to you again. So the first, the animation decreases, and then it increases to give that bouncing effect. So let's go back to the code. So increase size is essentially the same thing. I'm just increasing it to arbitrarily large value, right now it's 4,000 by 4,000. And same thing, my fill mode and removed on completion. And I add the animation. One thing that's different here is the fade out overlay that you can see. So you can see that my duration is the same as the duration of the animation. And I'm reducing the alpha of the overlay to 0, right? So while the increase animation is being done, at the same time, the overlay alpha is being reduced to 0. So once you do that, you have this very funky Twitter animation that you see. And as you can see, it's very simple to do. It's just a few lines of code. That's how powerful our core animation is. All right, OK, so that's the first example. OK, so next up, custom transitions. In iOS 7, Apple introduced a set of APIs that made it really simple for developers to implement custom transitions in their apps. By adopting this thing called the UI View Controller Animated Transitioning protocol, you can actually create a container view that has references to both the presenting view controller and the presented view controller. And the transition animation is just done within this container view. And then once you're done with the animation, you complete the transition. So this container view is essentially the box where you take the reference of the view controller that you currently have, the initial view controller, and the final view controller. And then all the magic happens in this box. And then once you're done, you pass it on to the next view controller. All right, so these are some examples we liked. The first one is this app called Keezy. You can see the circle becoming a part of the background of the menu. The second one is it's an app called Storehouse. The image remains static and slowly increases in size, whereas the rest of the view seamlessly fades away. Instead of just the manual, the pushing of the view that you see in so many apps nowadays. The third one, it's an app called Elevate. And the animation actually gives you the illusion of going into a deeper level of the app. And that's done really well using the unique hexagon shape of the icon. And I think what all of these have in common is that the key to a great transition is actually taking part of the earlier view controller and seamlessly making it part of the next view controller. So this actually gives the user the idea that the app is, as in, he's still in the same flow of the app. He's still in the same experience. And this makes a lot of difference, even though it may not be so obvious from the start. OK, so today I'll be going through two relatively simpler transitions. The first one is an app called Ping, which is this pop zooming kind of animation, zooming kind of transition that you see between view controllers. The next is Nike's making app, where the cell kind of expands and takes over the entire screen. So this is kind of different from just increasing the frame of the cell that you're clicking on. You can see that the top cells are actually moving up and the bottom cells are actually moving down. So it's kind of like there are many things going on at the same time. It's not just the increase in frame. So I'll go through these two examples today. OK, so moving to Xcode. I'll go through the pop zooming animation first. Let me just show you how it looks like. So I have four buttons here, you can see it. When I click on it, it goes to the next view controller. So the background color is set based on which button I select. And the origin of the animation is also set dependent on which button I click. So it's quite a, it's become quite popular in recent, like you see this a lot in a lot of recent apps. OK, so moving on to the animation itself. How it's structured is that I have this class that handles all the animation for me. I call it pop animator. And it, like I said, it conforms to UI view controller animated transitioning. Yeah, OK, and this is the view controller where I actually have the buttons. I just simply set the outlets for the different buttons. I have a variable to store the transition here. And I saw a reference for the selected button here. So my view controller itself, you have to conform to UI view controller transitioning delegate. So this is important when you're working with custom transitions. And these two are two required methods. So the first method animation controller for presented controller is actually called when you are presenting the view controller. And the second one, animated controller for dismissed controller, like you guess, it's called when you are dismissing the view controller. Here I set some basic standard properties like transition mode. These are the, these are my own properties that are defined in my pop animator, which I'll go through later. But here I'm essentially I'm setting this to dot present. I'm setting the origin to the selected button center. I'm also setting the circle color to the selected button's background color. So the three things that you need to pass on to the animator. Same thing for the other one, except I set it to dismiss. OK. So let's move on to the animator itself. Here I have a simple enum of present and dismiss. So that's how I'm setting the transition mode. I have a reference to the circle, circle color, origin. And these are my durations for presenting and dismissing. OK. So the first required method is this one called transition duration. So this returns, you need to return whatever, return the duration of the animation. So if it's presenting, I return the present duration. If not, I return dismiss duration. OK. This is my method for finding the biggest frame to fit the screen. So like if I go back to the example, I need to find the biggest circle that will actually fit the entire screen. So this is where I do the math. I won't go into that, but it returns the frame. And this is the last and the most important required method. It's called animate transition. This is where all the animation actually occurs. So this is the container view I was talking about earlier. I have a reference to that. And so I have a simple if and else. If the view controller is being presented, then I run this. If not, I run that. OK. So the first thing I do is to get the view of the view controller being presented. And there's this method in the transition context called view for key. So in the view for key, if I input UI transition context to view key, I get the presented view. And if I put UI transition context from view key, I get the presenting view. And this is really simple to get the view. And you can apply your animations to that view accordingly. So I get the original center and original size here. And here I'm getting the circle using the earlier method that I went through. And I essentially make it a circle by setting its corner radius to half its height. And I set the center of the circle as well to the origin. So what I'm doing is I'm creating the circle in the middle of the button that I'm going to select. And then I add it to my container view so that I can animate it later on. OK. So this is my presented view. And I set the center again to the origin because I want to start from this. Let's say I'm selecting this circle, this button. I want to start from this button. And I make it very small. So both the circle and the presented view. And then I set the background color to the circle color. And once again, I add it to the container view. And this is where the animation takes place. It's just the UI view animation where I increase the size of both the circle and the presented view while maintaining the center of the presented view to the original center. So the animation goes from here to the center, which is here. And once the animation is complete, you just mark it as complete in the transition context. And that's all you need to do. And then you get this kind of animation. So that's how simple it is to actually get a custom animation. And in the else block, I'm doing exactly the same thing. I don't really need to go through it because it's just the same thing in reverse. I'm making it smaller. OK. So the next thing I want to go through is the expanding cell animation. Let me just run it and show you how it looks like. So depending on the cell that I click, you can see it taking over the entire screen. I can slow down the animation and show you how it looks like. You can see the top cells moving up and the bottom cells moving down. Right. So there are many ways to do this, but this is just one of the ways to do it. And I'll just go through that. So in my view controller, I have the same thing. I make it adopt UIViewControllerTransitionDelegate. I create my collectionViewCells. OK. These two important methods that I required that I mentioned earlier. Here I create the animator. This time my animator is called ExpandAnimator. I set the opening frame. The opening frame is essentially the frame of the cell that I'm selecting. And I also set the transitioning mode, which is present in this case and dismiss in this case. Right, OK. And here I am setting the opening frame based on width cell I'm selecting. So this method is quite important because it converts the cell to the cells framed in the context of the UIView's frame. And here I'm just presenting the view controller. So pretty standard stuff. Now, so this is the ExpandedViewController that appears after I click the view controller, the one that's being presented over here. OK. Let's go through the ExpandAnimator itself. Again, this is adopting UIViewControllerAnimator transitioning because this is the animator. And my enum here again, my duration, opening frame. I'm also storing two things called the top view and the bottom view. So you'll see why later. OK, transition duration, same method as before. If it's presenting, return present. If not, return dismiss. Animate transition, right. So this is the main method, right, where everything is happening. Again, same thing. I store the reference to the presentingViewController, store the reference to the presentedViewController, and the container view where all the animation happens. OK, this method is really cool because, hold on. So, resizable snapshot view from REC. What it does, it returns a snapshot view on the specified contents of the current view with stretchable insets. So what this means is that based on this view, I can get a specific portion of the view, a snapshot of the specific portion of the view based on the insets that I set. So using this, this is how I get the top view by setting the insets accordingly. Add it to my container. I do the same thing for the bottom view over here. Let's say, assuming this is the cell that I'm selecting, right, the middle one. So this would be my top view. And the one below would be my bottom view. And snapshot view is where I'm taking a snapshot of the entire view and setting its frame to the selected frame. So you can see this is where I set the frame to opening frame. And I add all three views to my container view. And this is where I animated. So I'm moving the top view out of the frame, the bottom view out of the frame, and the snapshot view. And I'm adjusting the snapshot view's frame to fill the entire view controller's frame. And once I'm done with that, I remove it from the super view, and I complete the transition. So if you do that correctly, you should be able to get this kind of nice animation that is much more interesting than just pushing the view or presenting the view. And adds another dimension to your app. OK. So to sum everything up, these are the three animations and transitions I've gone through today. And I hope this has inspired some of you to play around with custom transitions and animations and create something awesome. And if you manage to make something awesome, I want to hear about it. So feel free to contact me on Twitter or just send me an email. And at Hormask, we're looking out for creative and talented iOS developers to join our team. So if you're interested in what we do, we'd love to share about our work. Just feel free to approach any of us. And I hope you found my presentation useful. Thanks.