SwiftConf '18 - Paul Hudson: Mastering iOS Animation

[Applause] so alone my name is Paul Hudson and his talk is called mastering iOS animation if I've learned one thing in these last two days it's don't use the headset mics are they using this thing the entire time and this might fail of course at minutes as well slowly see as stuff said I'm back in Cologne I supposed to be here last year it's a real privilege to finally be here I had a rather hideous biking accident what with pictures don't worry so I couldn't come last year I sort of pulled out but now I'm finally here I can give to you the only joke I know in German so brace yourselves for this one according to Sigmund Freud what lies between fear and sex low it's bad and also as you know there's a legal requirement I've got to say this is the last talk before lunch I'm keeping you all from lunch we're also what 24 minutes over so I'm gonna go as fast I possibly can through this to get through it y'all have lunch I should say spoiler that's not lunch don't get your hopes up it's something else so just briefly Who am I on what do I do I want a site called hacking with Swift at Conley hacking with Swift comm there are some like 1,200 articles there now all about Swift or online or free of charge early this year I launched a new video course called Swift in 60 seconds teaching Swift in videos at one minute or less it's lightning fast and includes things like closures and optionals and more every year on the Swiss community Awards we vote for the people and products that have helped you most over the year just last month every sanu open-source app on github to help people learn Swift interactively on their phones on github go and check it out so yeah great my code is or not and I teach ago I launched a podcast like everyone else in the world with my friend Sean Allen it's called Swift over coffee and of course it's excellent go and subscribe but my main job is writing books about Swift iOS Mac OS to us watch os vapor design patterns you name it if I can break it and fix it and break it again and fix it again then write about it I love it that's why it's called hacking with Swift I enjoy having fun with Swift and everyone here including folks on the live stream go to this URL and you can get yourselves a free book all my books come with a free lifetime Swift updates which means in about two or three weeks you will get a update for Swift 4.2 that's going away in five seconds four three two too late next if you wanna get in touch please do I am two straws on Twitter on github I'm two straws on reddit and two straws but I'm to go a flow I am two straws oh so that's the email me I'm Paul at whispers calm okay today's plan animations are complex things I try to break it down to small understandable chunks looking at things like what are the basic rules of animation how should they work and why we'll look at a recap of the basics things all being well you're all already know or at least new at 1.4 you've gotten we'll look at more modern interruptible terrible animations using your iOS 10 api's will do a bit of core animation stuff a go at deeper than uikit talk about blending views things that are definitely not animations don't try and eat animations for these things and finally some last tips now if you watch any of my talks normally I present using keynote I present usually two to three hundred slides in a 30-minute slot this time I thought it'd be a terrible idea and I was wrong I thought I'd do the whole thing as an iOS app this is literally the iOS simulator running on my Mac which is why I got the gray bars around it now the reason for that would become increasingly clear it allows me to do some text and then have UIKit code literally running inside the slide so everything you see is done as part of live UI kit code this doesn't mean Xcode might get in the way sometimes at UNESCO is like a bit of a laugh and of course if you do see any comedy crashes it's my fault not you I care animations fault the basics the rules of animation what are we trying to achieve now you may have heard the idea that our apps should surprise and delight users now delight got that that makes sense everyone wants to be delighted I hope you all have delightful laps surprised not so much surprise isn't a very pleasant thing there are lots of nasty surprises out there things we don't like I didn't behave what I thought that was not predictable and you got to think about it you know you just trust our apps with a lot of data it might be like high scores it might be their banking information they expect our apps to behave in a really predictable way because they're honest we haven't got a great reputation for this our apps sometimes do very surprising things like Samsung sending random pics other people don't do that instead animations should be functional they've got a job to do and that's it get out of the way and continue on you know probably the most famous iOS animation the most common you'll see is right there you can see on the screen it's this flashing blue insertion carrot it's telling me the app is live the apps responding it's waiting for me to type something in there and I try and type one handed one of the very few German words I know and the depth so it's responding it's alive but apps animations also guide our eyes when we delete something we can see it moves from A to B we know if you wanna undelete it we're looking B you link it out it's back to being an a again so tell us where things have gone and why there's also performance aspect if you're doing a long background task having a quick distracting animation actually makes your app feel more responsive versus ensuring like a progress bar or something and animation should be simple compared this kind of Micra suppressant ation with apples equivalent and you realize getting things out of the way focusing what matters delivers a much more dramatic presentation so simplify your animations we've done that fine be as delightful as you like I don't care what you do make it with the fireworks for all I care it's functional and fast and simple and clear pretty boots and polish and polish and polish now that my number one favorite animation of all time will only be appeal to sort of older folks who've been using this was this animation from iOS 6 the wallet app when you shredded a pass in the past app it got a shredder out literally shredder you have passed up into little bits it was fantastic I would actually add passes again just to shred them again it was that nice that's a delightful animation and sadly it's replace with this really quite boring sort of TV screen effects but dull now but our house is your morphism now if you're thinking through his talk come on where's the magic well it's a surprise show us some cool tricks no that's what I'm trying to say here your think should be functional your adulation should be kind of boring in some respects right I don't wanna see any magic I don't see any fancy tricks going on if you're doing that it's probably lost pointless slightly so let's look at the basics things I believe you all should know at this point make sure on all the same song sheet and is there me a lot of code so if you want to read the code come forward I know it smell that madly first up our old friend uiview animate with duration right I can say take this picture of monkeys move across to a sentence 870 and my little closure and I'll move across the screen and very very slowly but it will work I haven't got to worry about it iOS takes care of all the hassles for me which is really really nice that's its job we haven't got to make all the interstitial frames by hand we just say move to there you figure it out and in fact Daniel Steinberg gave me a lovely example of how this is very similar to a map function we don't say how to do every step of the way we just say here's my transformation you figure it out if you want user interaction you should know you've got to add this allow user interaction you know here so if I click on the monkey's now you see it change the background picture of my thing like I said it's all your work it really running but if I press next to make this thing animate and now click on the monkeys you'll see it doesn't work anymore despite me saying allow user interaction which is very very frustrating what's happening here is that UI kids being a bit clever when you say additive duration something happens in media under the hood your model the actual unlined data updates straight away to say okay that picture is now the top right corner instantly not in ten seconds now it's there now and core animation handles animation in the meantime what it means is when it sings animating I can't click here to change stuff but I can click here to change stuff thanks for that you like it you should know that this kind of code doesn't do what you think I'm trying to rotate this thing by pi times 6 pi 180 degrees 6 times that is 360 times 3 so when I animate that nothing will happen thanks for that UIKit that's basically never what I want so if you see pi times 5 now you'll see what really happens it will do 180 degrees then rather than doing five times that it'll do a single hundred degrees again never what you want if you really want to do that stack it up column iteration loop over six times make individual PI transforms apply them all the concatenation and now it will spin around beautifully again hopefully you're all doing this already you can do additive animations these are new in iOS 8 so it means when you add animations that work on the same object they blend together beautifully so here I can say initially move to 870 X and then after that go back to 100 what you'll see is it'll slide to the right pick up some speed and then I press next again change its mind slowed down slowly and reversing the direction doesn't snap back and forwards it looks much much nicer thanks to the additive animations and you can do more advanced things you could say you know firstly go to a hundred then go down to 600 and then scale up and so forth and then it'll just blend them all together absolutely perfectly over time really really nice super simple hopefully you know what the animate keyframes method the Koch this is a bit grungy but there's no simple way of writing it you can say I want a 5 second keyframe animation and say here's my first keyframe this thing saying start at 0 last for a third of my time become bigger second keyframe start a third of the way through last a third of the time move to a position the last one will be last start six of the way through last a four to one fourth tenth of the way through and move again and it'll just blend it beautifully as it goes like this it's nice bounce effect as it wounds through that's called a cubic animation there's a paste animation which looks like differently it kind of scales at the entire time you can choose how you want to work basically very nice fairly simple API plus you can animate more interesting things so here we're doing a sense X and a transform we could also say - this changes a whole corner radius of my view to be rounded make a in lajjun shape and make the whole thing red and again uikit just figures out for us it'll do the whole thing it's just gorgeous your animations are really really nice plus you can animate thoroughly advanced stuff so hey I'm saying I've got a UI visual effect view animate whole thing using with dark prominent style and it'll just blend it out gently on the screen like that gorgeous totally free of charge just put it side animation blocks it all works great hopefully you all knew that stuff that's the basics of animation it kind of works well right now but there's so much more and that's where the superior interoperable animations framework comes in which is all powered by UI view property animator I hope you are all using that so nice ad that's probably to your class right now that you can go ahead and do things with it so I'll say animate over five seconds with Kirby ease it out add as many animations I want as independent blocks when I'm ready call start animation I get the same effect it'll slide across the screen looks the same but it's more flexible and using closures now so we can call them in different ways plus user interaction works correctly hurrah it's when this thing animating I can click on the monkeys as you change the background color as it expect it behave sensibly even better you can add completion blocks whenever you want to as often as you want to so I can say add a condition block when this thing gets to the end I want to make the whole thing red boom it'll fly across ping red that's all for us add as many as you like even better and more importantly so where it gets interruptible you can scrub these things you'll see about a segmented control to the top when I tap on these things it will just literally scrub through the animation so I can say give me 30% give me 60% 80% and so forth and UIKit will intelligently interpolate the remainder of the animation based on where it started so I can say start from 70% and press play from there now that the lasts of 0.6 animation wherever it is not a lot of course you do it a slider as well how perfectly interpolate between the positions it's very very nice there we go now one of the neat things is you can add animations as often as you need to whenever you need to so here I'm going to animate this thing across the screen like this but partway through I'm going to add this second animation make this thing scale up and you like it will automatically figure out how far you are through the animation and use the remainder to apply the next animation so they'll both synchronize exactly the finish at the same time so the first one kicks off I got part way through and then second one kicks off they both finish exactly right and boom turn red does all that for you you haven't got to worry about it it's super nice in Reverse animations so here but the monkeys flying around so forth and I can say great go to the right actually wrong direction go to the left again no back to the right again and again UIKit just figures it out it's super nice you've got to worry about every step along the way what you've seen is that we hit the end it turns red but when I have this pause on completion equals true we get some interesting different functionality because when it gets the end now it will not turn red it never actually finishes anymore it's just going to pause at the end well this means is and it's important for any UI work using animations the UI animation has not been destroyed it's still active which means I can grab the slider even when the animation is finished and drag it around again again again so let's relations remain interactive even when they're officially finished she already Springs brilliant api for that that's gorgeous you should damping ratio plus you can add your own control points so here i've got one that does a slow fast start that slows down and speed up again that works great you may notice by the way that if i scrub this thing it scrubs linearly which may be what you want me not what you want there a separate API for that called scrubs liliane Lee helpfully it's set to false and now it will scrub with the animation timeline it set the true by default because this is a bit of a weird animation like I wouldn't wouldn't what make sense my finger on the screen but yeah if you want it you want it there we go there's some CA stuff you should know of course the uikit goes down to Cora narration under the scenes but there are many things you cannot animate in your mic yet you're kind of stuck with doing core animation and it's a bit grungy the main thing you look at here of course see a shape layer which is a beautiful beautiful thing don't use this for all your shape drawing this here is a single a shape being drawn like a rectangle with rounded corners and with CA basic animation I can say I want to go ahead and add up all the dots and dashes in my screen this will find the dash and add them up to a total make a animation based on the line - phase where the dots and dashes start say when I start from zero the default up to however many dots and dashes I have over 0.5 seconds forever and begin and it's instantly medias of March the answer fact it's ridiculously simple to do and it's again it's doing nearly all the work for you similarly you can do things like stroke and make the line draw itself one draw itself so here I'll say animate the how much of this thing's being drawn from nothing being drawn to fully being drawn over two seconds make it go back at the end so it'll draw and draw draw and or and then repeat forever again it's lovely effect super nice plus any Bezier path you want you can draw I mentioned unwrapped at the beginning this is the unwrapped logo as a UI Bezier path being drawn just saying draw stroke zero to draw stroke 1 and again it's doing all the work for me absolutely brilliant I'm gonna sit back and relax if you use paint Co this is how I did it I went to paint code drew my shape as I wanted it it generates the Bezier path paste that into my Xcode project for this demonstration here boom it works out of the box it's absolutely fantastic then is blending view this is introduced in iOS 11 of course we had this thing where nav bars will go from that size to that size really smoothly really nicely it's actually the magic trick is quite simple to do you have two labels one is small on the right you'll see it goes from a small thing and scales upwards and fades out very gently and at the same time you've got a large label which starts small invisible and scales up and fades in all you doing is combining those two animations at the same time synchronizing them to make it look good bit of mathematics you know you've got to calculate the difference between the large one the small one it'll say well you're twice as big or three times as big whatever it is make a transform and apply it and it'll do the rest for you and it's the inverse of that for the larger one figure out how much smaller I need to be and apply it and get it's lovely animation out-of-the-box it's really nice there are some things that are not animations please use animations for these things there's a bad idea tease animations here for example if you ask or label and you want to count upwards to show how many points someone's earned great this is a bad use for animations you want to use a thing called see a display link give it a method to update give your display link attached to a run loop it will just fly up like that do not use animations for this display link you have used before synchronizes itself to the screen refresh rate you've guaranteed have maximum time to do your work as opposed to using a timer more advanced effects for example applying static to images or warp effects or you know glowing lights or even look bendy water effects again animations are a terrible idea for that don't do that you want to use shaders I've got a whole library for you I wrote it's brilliant it's on github it's got like 30 of these things you just drop into your your sprite get scenes boom you get no water so forth out-of-the-box it works great do not use animations for that you want to use particles like this kind of thing having confetti to pull down do not use animations for that we've got a whole thing called see a metal layer for that it's brilliant out-of-the-box superfast goes down to metal animations you're a terrible choice for that and finally you wanna do uiviewcontroller animation transitions just don't that's like the worst api ever made finally some last tips things people forget this is one of most important things you can do for your animations please check this property UI X s birthday dot is reduce motion abled people with accessibility problems will turn this on saying please don't show me big animations and almost no one reads its property they're completely ignored it's really annoying I see things flying around the screen when they've asked this not to happen you should instead say I'll just fade out gently and fade it in gently from reduce the motion because they've asked for explicitly or us to go hardcore mode just do that just turn off all the animations and you can still call uiview animates duration and so forth and it'll be totally ignored it'll snap across where needs to be straight away so with one small change you can help people with vision problems much much more easily and finally if you have this as your MVC code where C is the big red blob on the right ball of mud architecture please remember your animations are view code which means any restoration any UI view property animator code comes out of your view controllers into your UI view subclasses that's where they're supposed to live that's why it's called a view layer wrap up who looked at the roles of animation you know be functional fur that's the most important thing you can do it make it actually have a reason for it we've talked about the basics you know you can do cool blur effects by asking iOS to duel for you plus you can be scrub herbal interruptible reversible and more using property animators corner motion lets you do the handful of things you can animate in UI kit like stroke and line line - phrase and so forth you blend views get the nice iris navigation bar effect trivially there are four things you should not use animations for please do not unless you really hate yourself and these last tips thank you very much well that was fast actually you could have passed it down that the food would have waited for us so now we have a little bit of time for questions well I was gonna say like you know because we have a little bit of time you can ask him any question about this talk or any of his books or any of his life question anyone or is everybody who Paul the thing that used for the counter you say just a quick thing about that API what does that use for in general yeah really quite one okay so see a display link is so who has an iPad pro here you know iPad pro how fast the iPad pro in Hertz hundred and twenty Hertz writes extraordinarily fast I mean they've got eight milliseconds to do all your work in between screen redraws in order to animate smoothly and keep your UI responsive right so it's extraordinarily hard to do lots of complex work in 8 milliseconds if you use like a timer to say you know a bit a label a bit lame whatever it is your timer might fire just after the screens return but it might fire halfway through screen redraws or towards the end of a screen we draw if you start doing six Michigan's of work towards the end of a screen reader or you will not get 120 Hertz you'll get four Hertz like that right see a display link allows you to synchronize work to screen redraws so you can say as soon as screen rebuttal happens call this method immediately give me the maximum 8.3 milliseconds to do my work in so you can do all the transformations you want all the UI label updates you want to do safe you're maximizing your CPU time stir any other question because I do have one but yeah your first if you'd like to rebuild the shredder the shredder animation how would you do that so first so they were doing using older api's that we wouldn't use anymore nowadays you'd use and use UI screen capturing API through a UI view render you'd render the pass to a a single image and then I would off-screen split that into what twelve heavily sliced it was I'd make twelve individual images that were stitched together to look like they were attached and then make it move up the way now the magic is the best bit is that as it shreds it it curves up slightly so they probably use I'm guessing out of like the UI cat team they've already made separate segments of the images being sliced and curved the last one now and once you realize this but all your CA layers every one of them can have 3d transforms apply to apply perspective so that you're kind of saying apply a little bit better to the next one and there are lots the last ones make a curve effect that's how I would do it how they did it enough enough thanks I stopped discussing about the pro or or against SKU murph ISM in the panels a couple of years ago I gave up I ended up being the only one Pro I do have a question the last question and then I would agree that you are the first in line so you know you guys all give you give him priority and I know magicians don't always show their tricks but I'm really keen on getting a little bit of background about all this whole thing worked presentation from an because you don't know this probably but like three years ago I think we had a talk from news van Hoorn which was about coordinators by the way you would have loved the talk and it did everything on the iPad that was really interesting so like in two words how did you do this this app sounds interesting like I said I know me do keynote I prefer entertaining of Education personally that's my first style but it was like endless slides of like code I thought this is another work I want to show how actually looks on screen so three and a half days ago I thought I'm gonna toss my keynote away which I slightly regret and code the tie thing and because you spend three and a half days the code is pretty nasty well it's okay if it's nasty I was just wondering if there are other bunch of images or come on if you just said it's nasty you'll see my deck is here and there we go so it is still a dick it loads like it's saying it's image type slide with that flag thing use that button color then they'll be like top one is they are so title titles image me it just whizzes through it passes that into structures and then recreates that on the screen and there's faculties overlay sees that all the everything had to do in code and I want to show in code basically loaded overlay things here so every individual thing with like segmented control or sliders was a different view to overlay behind the slide yeah it felt a bit like procrastination Oh actually working my slides believe I know I'll code a slide engine instead so yeah it was basic right across the nation but you know hey thanks for showing the magic tricks all right give him oh yeah last question no questions just just a comment do you know the adapter presentation from I don't know three four years ago on-scene kit because this session was completely written in scene kit also and your presentation reminded me massively on it so super good this year slashes that was the intro video was done in sprite kit the people walking around the screen that was done in sprite kit avoid each other with collisions of stuff that was breaking so they do it cool all right we will please give him a run of applause and down [Applause]

Channel: SwiftConf

Views: 3,538

Keywords: iMovie

Id: _4McEnarqNc

Length: 27min 13sec (1633 seconds)

Published: Fri Sep 28 2018