Flutter Forward - Making UI Animation Easy & Fun

[Music] foreign [Music] hi there I'm Grant Skinner and I'm really excited to talk to you today about flutter animate it's a library I've been working on for a while that makes it really easy to add beautiful animation to flutter UI I run a company called G Skinner you may have seen some of the showcases that we've built such as flutterfolio flutter vignettes flock and the wondrous app and if you've checked these out you've probably noticed that we really love animation the challenge though is that while animation flutter is very powerful it can also be very verbose to work with for example if I wanted to take this hello world text and just add it in a fade and a nice slide you'd think that would be very simple but by the time I was done I would have something that looks like this which is a lot of code and requires a fair amount of re-architecture now there are some simpler more concise ways to do this in flutter but they all come with their challenges and I really believe that animation should be fun it should be something that you can easily add play around with refine and if it's not working it should be really easy to discard as well to get rid of ultimately it should be an intuitive layer on top of your UI code basically the frosting on top of your cupcake so when we started looking at building the Wonders app about a year ago we realized that we wanted a lot of Rich animation and one of my devs came to me and said hey is there any way that we can make it this simple so I thought about it for a while I wrote some tests and ultimately I wound up building flutter animate it's currently on version 2.1 it's available on Pub Dev and it's completely open source and transparently developed so let's take a look at working with flutter animate it's really simple it comes with a bunch of pre-built effects everything from move and fade through to color effects blur and shadows and they're really easy to apply for example I have this simple widget and I want to make it animate all I do is I wrap it in an animate widget and then I can specify a list of effects that I want to apply for example a fade effect you can see it running on the right hand side or a slide effect one of the cool things about flutter animate is it actually lets you do this in two different ways you can use this nested widget approach or you can take advantage of extension methods for example my widget dot animate dot fade dot slide and hey Dot Shake now I really like this syntax because I think it's a little bit more concise and it really keeps the focus on the UI code instead of on my animation but you can use whichever one you prefer the other little advantage to this syntax is it includes some semantic shortcuts so for example I could Fade Out or I could fade in I could slide X or I could slide y but again all this capability is available in either syntax Now the default behaviors of each effect might not be exactly what you want so you're able to configure how effects behave I could set this shake to run really fast or really slow most effects also have a begin and an end value so I could make this slide start at twice its height or I could make an end there begin and end are smart and that if you only provide one it'll automatically use a neutral value for the other one I also want to be able to manipulate the timing of my effects so for example I could specify a longer duration like a thousand milliseconds you'll notice that we've added extensions to number to make it easier to Define these durations I could add a delay so for example pause for half a second before running and I could add a curve so you can see it slow down at the end of the animation now these timing parameters are actually inherited by subsequent effects which is why my shake and my slide have remained in sync with my fade but I can override these values for each effect so for example say I wanted my slide to start halfway through my fade I could delay it by 500 milliseconds so you can see I fade part way in and then my slide begins this allows us to really choreograph complex animations and there's a special effect that actually helps with this as well called then basically all then does is it sets its inheritable delay to the time of the end of the previous animation so for example it will set its delay to 1 000 milliseconds which is when this fade ends this causes the slide to begin immediately after the fade ends similarly I could add a then here and all three of my effects will run in sequence let's take a look at a real world example on wondrous we have Collectibles scattered throughout the application and we wanted an animation that would tease the user to interact with them while looking at this animation I figured to implement it I would break it into three separate effects a shimmer a shake and a scale effect that scales in pauses and then scales out let's look at some code so I start with my collectible and I tell it I want to animate then add a shimmer in the application the delay is actually four seconds that it's not running all the time and it has a duration of 1.8 seconds on top of that I add a shake the shake inherits the delay and the duration and it introduces a new curve now I just need it to scale which is a little bit more complicated I wanted it to scale in for the first third of the animation so I changed the duration to a third of the total that gets my scale in but now I need it to pause and scale out so I added a then with a delay of another third of the time I follow that with a scale out which also inherits the 600 millisecond duration so it scales in pauses for 600 milliseconds and then scales out awesome the only thing that's missing now is that this isn't repeating but to do that we have to take a look at how to actually control our animations there are a number of ways that you can control animations but one of the most flexible ways is via the animation controller that's used internally by all animate instances here I have a warning animation that I want to Loop inside of animate I can add an on play parameter they will accept the controller and then manipulate it so for example I can tell it to repeat so that's working pretty good but I don't like how it resets at the beginning every time so I can tell it I want it to reverse and that gets me that nice pulse that I'm looking for I don't want it to repeat infinitely either though so we include an extension to animation controller called Loop it works exactly the same as repeat but it adds a count parameter so if I say a count of four it'll animate out in out and then in again so if I run that out in out in perfect the other way that I can work with the animation controller is by specifying my own so for example I can say controller equals my controller this allows me to retain the controller in my state and manipulate it whenever I want another way to control an animation is with an adapter adapters Drive animations from external value providers for example a value Notifier or a scroll controller in this example we're passing a list scroll controller into the scroll adapter and then using it to drive an animation this synchronizes the animation with our scrolling if you want your animation to react to State changes this is actually really easy with the target parameter on animate in this example whenever I click this it toggles animating between growing up and growing down and it's really easy basically I just have a gesture detector that on tap toggles this value between true and false I then use this in the Target parameter to change a value between 0 and 1. now with Target zero corresponds to the beginning of the animation one corresponds to the end of the animation and whenever the value is changed it'll automatically animate between those two positions so in this case when I click it sets the target to 1 and animates the end when I click again it sets the value to zero and animates to the beginning really simple but we can go kind of crazy with it so for example I have this excessive thumb where when I roll over a whole ton of stuff happens in fact a little bit too much stuff happens but I wanted to show it to you because it's kind of interesting in how this single toggle of over can drive two different animations I have one animation that's on my image with five different effects and I have another animation on my container on the frame which drives three different effects so it's a little bit excessive but it shows what you can do as a last quick note testing animations can be difficult and one way to make it easier is with the animate.restart on hot reload Global setting this just means that every time while you're testing that you hot reload your application all of the animations on screen will restart so that you can see them you can turn this on and off it has no impact on your production application we've learned how to apply built-in effects adjust them and control them but what if you want to do something completely unique well if you want something that's reusable you can create your own effect classes this looks like a lot of code but really most of it is just writing extension methods and dealing with parameters ultimately all you need to do is extend the effect class and Define a build method it's pretty straightforward and if you get lost there's about 20 other effects that you can look at for reference if you'd prefer to create something one-off you can use custom effect it's essentially an effect that uses a builder allowing you to do whatever you'd like in this case I've implemented a star wipe I added a custom effect with a duration and a curve and then I defined a builder method that accepts a value and a child and simply constructs the effect that I want using those as you'd expect this can be layered with other effects as well as an interesting side note animate doesn't actually require a child and this means that we can use a custom effect to drive the content that we're animating in this case I'm just doing a countdown from five to zero over the course of five seconds and again this can be layered with other effects to create a much more complex and Rich animation we're almost done but I'd like to leave you with a few tips about performance animation always impacts performance but there's a number of things we can do to minimize that the first is to use repaint boundary simply wrap your animated content in a repaint boundary widget and this tells flutter to draw that content into an off-screen buffer and composite it back into the view this minimizes how much of the view needs to be repainted every time that the animation updates another thing that we should try and do is to minimize idle animation or animation that's continuously playing for example in wondrous our collectible animation has a four second pause in it the actual animation only runs for about two seconds and that means for two-thirds of the time we're not doing any updates at all this next tip might seem very self-evident but we want to reduce the complexity of our animations eight separate effects for a single hover is kind of crazy we want to try and do more with less it's worth noting as well that certain types of effects like blurs or Shadows can be more expansive than simpler effects like moves or rotations related to this we want to exercise restraint overall not everything on the screen needs to be animated you'll probably just wind up annoying your user in wondrous when a user discovers a collectible we celebrate that moment with an over-the-top animation and that's fine but if you look at most of our screens the animations are very subtle very simple we want to try and wow a user with Elegance not with excess that brings us to the end of the talk thank you so much for watching and I hope it's inspired you to play around with adding more animation to your uis I had so much fun writing this library and I'm truly excited to see what you do with it if you'd like more information please check out flutteranimate on Pub Dev there's some great documentation and a few examples to get you started have fun and happy animating [Music]

Channel: gskinner

Views: 29,480

Keywords:

Id: lxkFL9disq0

Length: 16min 42sec (1002 seconds)

Published: Wed Jan 25 2023