Core Animation with Marin Todorov – Podcast S03 E05

Welcome back to season 3 of the raywenderlich.com podcast!

In this episode, take a deep dive into Core Animation with the author of iOS Animations by Tutorials – Marin Todorov!

Podcast: Play in new window | Download

Subscribe: Android | RSS

[Subscribe in iTunes] [RSS Feed]

Transcript

Mic: Hey, Jake. How are you?

Jake: I’m good, Mic. How are you doing?

Mic: Not so bad, just about got over the jet lag from RWDevCon now.

Jake: Yeah. I heard it took you a few days. I saw some chat where you were saying you were still trying to adjust.

Mic: Yeah. Well, I think I just about got it going on the last day when we were doing the last podcast in the hotel room. I was just about getting over the jet lag from going and then obviously I had to fly back the same day. It’s probably taken me about the same number of days to recover, which is unusual for me because it just usually takes a day or so. I think we were five hours difference so almost halfway there. Yeah it’s been good working on WatchKit by Tutorials this week so flat out getting ready for the launch which is a week from Monday.

Jake: Yeah. How’s that going? Has that been fun?

Mic: It’s been a lot of fun to be fair getting it straight into it on a brand new platform, brand new framework, getting to learn all that, new team of authors which has been really good. There is a unique spin on this book that I’m not going to give away at this point that I think the readers will enjoy.

Jake: You tease.

Mic: Yeah, it’s been a lot of fun.

Jake: Good.

Mic: We’re going to be talking about iOS Animations and Core Animation in the podcast today and a little bit later on we’re going to be joined by Marin Todorov, who’s an iOS developer, and a raywenderlich.com team member. He’s also written this book; iOS Animations by Tutorials which is available today. He’s going to be joining us shortly and we’re going to have a chat about the book a general chat about Core Animation.

One of the things that strikes me about Core Animation is its one of those things that’s so ingrained [00:02:00] in iOS and iOS development that a lot of people will be using it without even knowing they’re using it.

I know we were taking off air a little bit about this Jake. I wanted to really get your take on Core Animation. How it relates to iOS, all the stuff that we’ve come to take for granted almost is all handled by this framework when it comes to UI and UX interactions and things like that.

Jake: It’ll be interesting to get Marin’s take on this too but my understanding is that when the first iPhone came out, you had to do a lot of this animation on the GPU because it was the only way to move that much visual data around that quickly and make it work.

We got it in 10.5 on the Mac but it was really only there first because they were working on it for the iPhone. Anything that actually shows up on screen at some point passes through some level of Core Animation even if there’s not animations going on.
I think the composting is done … I don’t know if that’s technically called Core Animation but the compositing is done on the GPU. Anyway, it’s interesting because you and I were just saying where does Core Animation end and not Core Animation begin? It’s hard to define that because I think Core Animation is everywhere.

Mic: This seems to be in every layer of abstraction. At some point you’re going to be dipping down and touching Core Animation. If you’re using the UIView class methods animate with duration, that kind of thing, that underneath is using Core Animation.

If you want to drop down and you want to manipulate layers directly, that’s using Core Animation. Like you say right down until you get to the GPU, all the way down that tree you’re going to be using Core Animations. Is it a little bit of a difficult topic to get a grasp on and know which bits to pull out and talk specifically about?

Jake: Yeah, just in terms of the questions we wanted to ask. We didn’t want to seem like we didn’t know that Core Animation was still being used [00:04:00] even though we’re saying when you use the UIView API, we wanted to talk about UIView Animation but it’s still Core Animation.

Mic: I think things like UI Dynamics and all that kind of stuff as well, that still at some level uses Core Animation. I think just listening to the last two or three minutes that we’ve been talking people are going to understand that it’s almost like you can’t escape it, you know, anything that is using an iOS, definitely an iOS is at some level…

Jake: It’s why the focus on UI for the iPhone has always been so dynamic. Animations communicate so much to the user. I think it’s one of those things where we take it for granted now but at the time it was pretty sweet that there was so much animation and it was so fluid.

Mic: I think that was one of the things that Jobs wanted for that initial iPhone. It’s a similar idea to the whole skeuomorphism because things had to behave in a way that they behaved in real life so people knew how to interact with them because it was the first real really responsive touch screen.

We had this whole new platform and they were expecting people to be a little bit unsure. By using skeuomorphism and textures and things that resemble their real world counterparts and having things move in a fluid motion, be responsive in the same way that they are in real life, I think that was the whole part of that initial launch and why everything is so key.

Jake: Yeah and it was part of that initial magic that was so impressive relied heavily on this technology.

Mic: I think animation as well is key in the shift that we’ve had recently from skeuomorphism, iOS 6 being the latest one into iOS 7 and 8. As we’ve gone much flatter you can’t use gradients and shadows and textures as much to differentiate UI [00:06:00] and to make the bits UI. The focus has moved almost exclusively onto feedback through animation and interaction.

Jake: Yeah and I feel like the most impressive apps are those that have really dynamic interesting custom animations. When it’s done well, it’s really impressive especially, if it’s a little bit novel.

Mic: We had Alli Dryer on a couple of weeks ago talking about capptivate.co. That entire site is all about capturing those really great interactions and visual design. If you look on that site, it’s all about animations because of this shift.

The other thing I briefly wanted to talk about before we ask Marin to join the conversation was, we are iOS 8 now so Core Animation has been the king of animation on the iOS platform for the entire 8 iterations, but we are starting to see the odd framework, new framework pop up here and there that’s going to try and tackle animation in a different way, that perhaps doesn’t use Core Animation under the hood.

One of those is Facebook’s Pop framework. I was just wondering what your take on that was?

Jake: I think it’s interesting. I haven’t built an app on top of Pop so I don’t have the deep experience with it but it’s interesting. One of the exciting things for me about Pop was that you could use their Quartz Composer plug-in to design some of those animations.

Then you could basically translate the settings that you used in the Quartz Composer patches into the code. So it gave you the visual design tool on top of some of the dynamic animations available in Pop that aren’t necessarily easy in [00:08:00] Core Animation but the design tool on top making it easy to come up with them and iterate over different was something that was really exciting to me.

I don’t know if people are using that a lot. I haven’t heard as much about it since launch. I’ve heard a lot more about the Pop framework than I have heard about the Quartz Composer plugin lately. I think that’s key; is being able to try out different things quickly and get that visceral feedback going.

Mic: This is Origami I think, the plugin code.

Jake: Thanks for reminding me. Yes.

Mic: I think this is the difference between a group of developers coming up with a set of API that functions really well and then people in the real world using that. Because something like Origami is the kind of thing that you’d expect to be built into Xcode in the same way that interface builder is.

It’s a visual interaction designer but we don’t have that and it doesn’t look like that’s going to be coming anytime soon. People are really looking to push the boundaries on iOS design and interaction and things like that.

They’re actually developing their own tools or plugins to other tools that we do have access to, to allow them to do this kind of thing. I think that’s quite significant.

Jake: Yeah. I have seen there are some tools coming out, not from Apple and obviously it would be better if it was built into Xcode but there’s a tool I think called Core Animator. I’m not sure if that’s the right name, but anyway it’s like a key frame, almost a Flash-style animation tool that then spits out Core Animation code. People are working on these tools to make that more accessible so that it doesn’t have to all be done in code. Personally I like interface builder.

I know some programmers are like, do everything in code. It’s just better and cleaner and it makes more sense but for me I feel like if you’re designing something visual having the visual feedback is, there is a visceral element to it that you don’t get when you’re working with the code that I think is essential to really being creative and exploring this space.

Jake: Definitely and also the bigger your app gets, the longer between each [00:10:00] build and run. If you’re going to have a tool that’s giving you immediate feedback rather than writing some code, waiting a few seconds for it to build and then change it.

I also think, just before we bring Marin in, because I know he’s waiting in the wings, Facebook have another open source library called Tweaks. That’s what that’s designed to do.

We have a tutorial on the site. If you want to check that out then find the tutorial on the site. We’ll put a link in the show notes but that’s a really good way to avoid unnecessary build and runs because you can divide some parameters and then change those parameters while the app’s actually running and see some immediate feedback.

We’re going to invite Marin into the conversation now. Welcome Marin.

Marin: Hello guys.

Mic: How are you?

Marin: Thank you for inviting me. I’m very well, thank you.

Mic: No problem. Just before we get into talking some more about iOS animations and Core Animation, can you give our listeners a little bit of insight into just who is Marin Todorov?

Marin: Well that’s a long story but I’ll try to give you the abbreviated version. Well, I’m an independent developer and a consultant. I’ve been working for the iPhone basically for iOS since the end of 2009.

I started at the very end. I thought it was just around the corner, good times. Right now I do a lot of programming and consulting and apparently I work on a lot of books with the Ray Wenderlich team.

With two books on my own and a few more working on a team I can already say that I’m also a writer. Yeah. If you want to know anything else, just ask away but I think that’s as good as an introduction.

Mic: That’s great. Also, you are not just a writer but you also produced a series of videos on Core Animation or [00:12:00] iOS animations. How did you end up getting roped into that?

Marin: That was a great adventure. If you remember, some time ago, Ray decided to put a video section on the website and so naturally he started pioneering this part of the website himself.

Then he brought a couple of more members from his company Razeware. There was a series made by Vicki and there was I think an early video by Brian Moakley and the he made a call for authors within the team.

I being overly competitive wanted to be the first of out of Razeware to make a video series. When I saw that he was looking for somebody to do a series on animations, I have to be the one.

This is pretty much what my email to him said like “I have to be the one.” That’s how it happened and that was a great, great experience.

Mic: How did you find that because obviously that’s very different from writing?

Marin: It was difficult because I had to do about a month and a half of research in advance, develop all the projects and plan everything out without having an idea how the actual recording would go.

Then we would get together, me and Ray, and actually start recording and then we were like whatever happens, happens. We have only this much time and we had to finish it in time. That was a little bit stressful in the beginning.

Put a lot of pressure but whilst we were doing videos, but by the end it was pretty fun. We had a good time.

Mic: Okay, great. My final question before we get back to animations is at what point did you decide you had enough in the video series to then transition to writing fully fledged “By Tutorials” book [00:14:00]?

Marin: Well as said, I had a month and a half to prepare for the video tutorial series and in that time you can come up with a lot of ideas. We had only this much time.

I think we agreed in the beginning to have a maximum 15 episodes in the series and so I had to order by priority how content will just flow, how episodes could feel natural flowing one after the other.

I had to draw the line at some point and say this is going to go on the video series. I think it was the second day of the recordings that I said to Ray, “Ray I had so many ideas and many of them, good ones, didn’t make it in the video series. What do you think about a book?”

He was, “Well a book is good. Some people learn better from books, some other people learn better from videos so that’s probably a good idea.” Funny enough when I had to prepare the book, we as well had a cap on how much content we could put in.

I again ended up with more ideas that I can actually produce for the book. That’s how I came up with the idea for the newsletter so I am also now running a newsletter because I couldn’t fit everything in the book. That’s pretty much it.

Jake: What are you going to do next when you can’t fit everything into the newsletter?

Marin: If I can’t fit everything into the newsletter I’m probably going to take a vacation. [Laughter]

Mic: You heard our brief explanation of Core Animation at the top of the show. Can you define Core Animation and clarify anything you thought maybe we left ambiguous?

Marin: Actually I was listening to you guys and I was laughing [00:16:00] just a little bit because this is pretty much how you can explain Core Animation. It’s something that is not clearly defined what it is and its everywhere.

If you’re an iOS developer it just floats into air. Everywhere you’re around it surrounds you, kind of the Midichlorians in Star Wars. It’s just everywhere and you use it.

Joke aside, the idea of Core Animation is mainly I think to separate the app logic and the app code from the actual process that renders everything else.

Core Animation is a little bit deceivingly named because at the time “Core Graphics” were already taken so they couldn’t really call it Core Graphics but Core Animation actually is also responsible for rendering not only content that has been animated but actually all content.

Because UIView is just a thin wrapper around CALayer and CALayer is just Core Animation layer. Core Animation takes care of rendering stuff and for animating them. This happens on a background process.

There is this thing called a rendering server so whenever you start an animation or you just send some content to your components or views and so forth, the hierarchy is being sent to this background process where the server will interpolate all the intermediate steps of your animation and everything that needs to happen on screen.

It will push all this information to the GPU so that the GPU can take care of rendering everything independently from your own app process. That’s why even if you block the main thread of your app, even if you are doing something like some heavy lifting on your app process, your animation will [00:18:00] still run fluently in the background.

I think it’s a pretty neat idea and we’ve benefitted greatly from it. As one of you guys said, that was one of the best things of the first iPhone. It was so fluid, everything was so amazing. That was really great, yeah.

Mic: You just touched on it there. You mentioned CALayer and its relationship to UIView. Can you give us a little bit of insight because I know obviously we’re all familiar with animating UIViews but I believe you can also animate the layer directly? I was just wondering what the difference between the two is.

Marin: Well as said in iOS, the UIView is really just a wrapper around the CALayer. That’s why everything you can do to a view, you can also do to a layer animation-wise.

You can just move them around. You can change their opacity and transfer them and so forth. When you animate for example the opacity of your view that you’re actually animating the opacity of your layer, therefore the CALayer is just a level deeper inside the framework so you can be more flexible [00:20:00].

You can animate more things but the main idea would be that UIKit have to provide an easier and more sane way into animations because like everything was really new.

People really wanted to grasp how everything works and Apple really wants to make animations very, very accessible to anyone so UIs can be lively and animate and so forth.

UIKit just provides you with a shortcut to what actually Core Animation offers. UIKit would offer you this one line APIs, really easy but not as flexible as Core Animation. If you use Core Animation you can just create animations straight for your layers and then you can animate much more things.

You can achieve much more flexibility in terms of for example the transitions in Core Animations, they have third dimensions. That’s something. You get only two dimensions with UIKit and three dimensions with Core Animation. That’s a very good example of what kind of more flexibility Core Animation offers.

Of course in the end you have all the specialized layers in Core Animations like the gradient layers or the shape layers where you just create very specific super powerful effects by using a certain type of layer to create animations.

Jake: You’re touching on it a little bit but can we go through a survey of different animations? As you said, you scale, rotate, translate; which is just move stuff around.

You can adjust opacity but we’ve also got things like UIKit dynamics that simulate physics. We’ve got CAShapeLayer that will allow you to animate the drawing of a path.

I just wanted to give the listeners the scope of like if you’re thinking about you want to animate something, what are your options [00:22:00].

Marin: Okay. I think that’s a good question because I think that there are more ways to animate something on iOS than most people know about. Actually that’s one of the reasons why we called the video series and the book iOS Animations by Tutorials.

We didn’t want to write about Core Animation because Core Animation is just one of the many ways to animate stuff on iOS. Of course we have View Animations – actually using only the UIKit built in APIs will get you very, very far.

You can create amazing applications by just combining different View Animations. This will get you really far don’t get me wrong. Of course with View Animation there comes Auto Layout because that’s the way to create animations when your UI is a slave to Auto Layout.

Basically that’s one way but of course another way to animate stuff is layer animations where you can do exactly the same things as with views plus more. You can do Keyframe Animations with Layers.

This is a really interesting topic because this is the way to make certain objects on screen for example, an image or a pattern or anything actually animate over a path. This is really a cool effect because most animations go from point A to point B.

Keyframe Animation with Layers is the only way to make something actually follow a bezier path or any arbitrary path you define. You can do a lot with shape layers. That’s the way to draw shapes on screen and you can draw any arbitrary shape and you can just feed the UIBezierPath.

Actually CGPath but you can use a UIBezierPath to create one so you can draw basically anything on screen. You can also draw interactively any shape, meaning [00:24:00] you can simulate pen writing, a word on screen or something like this. It’s really cool animations.

In the book we have a chapter about creating an animation with a gradient layer. Even though gradient is not the first thing that you think about that you can animate but also you can create amazing effects when you combine it with masks or with text.

That’s really a great topic that I haven’t seen much about on the Internet. Besides this you can go into the third dimension as I mentioned earlier. Core Animation is not really a full-fledged 3D framework but it still offers you quite a bit of 3D possibilities like rotate things around a position in 3D space. That’s just really cool as well. You can add simple 2D effects to your app as well.

Jake: That’d be something like a deck of cards and flipping a card over, something like that, right?

Marin: Yeah. Well actually layers are just 2D textures. They represent on an image basically and you can rotate this in 3D space and position them. You still work with 2D objects, so all of your layers are three but you can still just rotate them around kind of like position them. You can’t really build a very complex 3D object but you can still rotate and position your 2D layers in 3D space.

Mic: One thing I wanted to pick up on Marin you mentioned a couple of minutes back. The old way of doing things – before Auto Layout was usable on iOS – the way that you would animate would be that you would have an existing frame, you’d calculate your new frame and then in that UIView [00:26:00] animation black, you’d set that new frame and Core Animation or UI animation would take care of the rest for you.

Obviously now as developers are moving towards using Auto Layout, how do we go around moving from this thing where we would set frame manually to how do we animate constraints and things like that?

Marin: That’s actually easier than one might think to do. Earlier we just animated the frame manually ourselves and since now the frame of the view is managed by auto layout then we need to talk to auto layout to animate the frame for us. How do we talk to Auto Layout?

We talk to it by constraints. It’s really easy actually. If your view is positioned on a certain spot on screen and it has constraints to that position, you just would remove some of those constraints and add new ones to just position it to a different spot.

Auto layout will actually take care to see that the frame has been changed and will take care to create animations between these two positions for you and then head it off to Core Animation. It’s pretty easy. You just only need to learn how to do it and when to do it but then it’s broken apart.

Mic: There is a chapter that covers this in the book?

Marin: Yeah. That was one of the topics that I regretted not including in the video series. We just didn’t have the time for it. That’s one of the very important topics I wanted to be in the book.

We have a section with two chapters. One is an introduction to Auto Layout and how it works. It’s like a crash course into all the layouts and then a second chapter is then how to continue the projects from previous chapters and add animations to the layout that you produced [00:28:00].

Further in other of the new projects in the book there is also Auto Layout UI, so you get to exercise a few more times all the other animations.

Jake: The book is available now. It was officially announced during the keynote at RWDevCon, right?

Marin: Yeah, that was great. That was all Ray’s idea. He gets all the credit for it. It was amazing idea how to surprise and awe everyone. I think it worked.

Jake: What happened? How did that go down?

Marin: Back in October I sent my pitch to Ray because it was a single author book so it was not really a team book. It was only me. I sit down and wrote this pitch about the book, what it’s going to be about, all the content.

I did a detailed table of contents. I also wrote few chapters just to show what I had in mind. I sent it to Ray and after a few days he was like “Yeah I’m fully on board with this. It looks great.”

We were talking about who the editors were going to be and so on and then he just came with the idea. How did he come up with this? Maybe we have to ask him and chat about this because he said “Hey how about we keep the book secret and we just announce it on the day of launch?”

I was like “Oh okay. That sounds good.” A few days later, “Oh we have the conference in three months. How about we work nonstop and then we have it ready for the conference?”

I’m “Let that be the plan. Let’s see how it goes but that will be the ultimate goal” to have ready for the conference and launch it for the audience, give books as freebies. It was all him [00:30:00]. Don’t ask me.

Mic: The attendees, they didn’t know they were getting a book right? Because you teased this in the keynote but then in the following remarks you then said actually we’ve got one more thing and then the doors opened.

Marin: Yeah. Actually the attendees didn’t know and I think most of the team members didn’t know either because it was the idea that we would just really keep this a secret until the very end because we didn’t want the work to like go out and people would start talking about it or so.

We just really wanted it to be the very best surprise for everybody just to … I think there is a photo in the Flickr channel that is from this very moment where all this happens at the end.

It’s this amazing photo where every single person in the audience is smiling. It’s really amazing photo. It is so positive and this was great.

Mic: The book is part of the Spring Swift Fling celebration currently underway at raywenderlich.com. Can you give us a little bit more insight into that?

Marin: iOS Animation by Tutorials and WatchKit by Tutorials are available right now on the raywenderlich.com store. iOS Animations by Tutorials is ready for download right now as we are doing this podcast.

WatchKit is going to come out a week later but it’s available for preorder. Since there were two books already ready to go at almost the same time we thought to make a little celebration.

We’re going to put out a number of posts related to both books. There are going to be a few abbreviated chapters from our Animations by Tutorials and there is going to be a few posts by the guys involved in WatchKit by Tutorials.

They’re going to prepare special posts about WatchKit that have to do with creating [00:32:00] watch phases and whatnot. In the end we’re going to be giving some free books so be sure to check out the Swift Spring Fling on raywenderlich.com.

Mic: I think that’s probably as good a place as any to wrap things up chaps. Thanks again for joining us, Marin.

Marin: Thank you very much for having me.

Mic: No, it’s been our pleasure. As always, we’d love to hear your feedback so please do email in using podcast@raywenderlich.com.

As this episode represents the midway point of season three, our current season, we’re now starting think about what we can change for season four to hopefully improve things. This is a really good opportunity for you to let us know what we’re doing right and what you’d like to see us change. If you did like this episode then please don’t forget to leave a nice review on iTunes.

We really do hope that you enjoyed the raywendrlich.com podcast. Thanks for listening and we’ll see you again next time.