Configuring eases (SteppedEase)
So far all the eases we've worked with had limited customization options. Many of the advanced eases enable us to add more detailed customization. In this lecture, we will meet the first ease with such customizability: The SteppedEase.
Video Transcript
00:00So far we work with the baked and eases but I want us to cross over into the
00:05ease pack that is an extra not inside of tweenlight but natively inside of tween
00:09maps. Now one of the cool things in those and you're gonna have to open up the
00:13documentation more for those is that you have a little bit more control over them
00:18you can configure them to be a lot more close to what you want your animations
00:22to be. And in this lesson we're going to explore one of these eases which
00:25enables us to create basically almost like a frame rate animation FPS animation
00:30that helps us say how many frames are gonna it's not exactly it's not how many
00:34frames a second but how many frames in general will this animation have. Let's
00:39see what you don't worry it's not hard it's actually really fun those basic
00:42eases we're ready to talk about the ease pack we're not going to cover every
00:46single one of the eases but I want to start off with talking with the stepped
00:50ease which is an interesting ease it's a little bit different than all the
00:54other eases we've worked with before and the idea of stepped ease is to
00:58basically tell green song how many steps should the animation have or in
01:02many ways if you're if you come from flash how many frames how many how many
01:06times should the screen refresh or the visuals refresh as it's animating
01:10through. Now the process of creating that is very different than all the eases
01:14that we were working with before because the way we do that is
01:18basically we create a new ease variable and we send inside of it a new
01:23stepped, stepped ease which was the name of that ease and into it we send how
01:29many steps we want so for example if we only wanted to have three steps we would
01:32set it to be three steps and we can go ahead and you know let me just comment
01:36that out and we could send our ease to be that um let's call it stepped ease
01:41s step ease I'll just make sure I call this here step ease and if I say this
01:52go back to my application and click on refresh we're gonna see that now
01:55if you if you notice this the animation is a lot less detailed it's a lot less
01:59details there is no ease obviously the ease itself is actually just a pop up
02:03of those three steps to make it even more obvious let me jump up the amount
02:08of time that it's animating to let's say three seconds so we can see how slow
02:12how undetailed this animation is this could be really useful if you're trying
02:17to create some sort of a slow-mo effect where it's not really animating
02:20or it's kind of like animating in a very very precise measurement that you
02:24want so if we wanted here we could have set obviously as many steps as we wanted
02:27I set it to be 10 steps I could say hey I want it to be 10 steps we get more
02:32details into our animation but it's gonna be basically it could be very choppy it
02:37could be very basically what you're seeing there so it's a very cool ease
02:39and it's not done the traditional way where we had the ease in or ease out
02:44or ease in and out or like we sort the linear one which was no ease in this
02:49case we're actually creating an object and then sending the information in now
02:53by the way there's another way of setting it if you want to set it up in a
02:57really fast way you could set your ease and literally just send in the stepped
03:01ease but instead of creating a new stepped ease you just send into it a
03:06configuration function so you just set your config and then you set how many
03:11steps you want and it will automatically create a new ease stepped
03:14ease object and send it out so it's really just based on your preference they
03:18basically do the exact same thing one approaches a static method and the
03:23other is with a constructor and if we go ahead and we click on refresh we're
03:26gonna see basically the same thing if I didn't have a error so it's telling me
03:30that config is not a function Oh config is not a function so maybe I cannot do
03:38this or I just had here oh it's config not config not config not config
03:45config that sounds like a karate movie all right so there you go so I fixed
03:50that typo and everything is good and everything is well and everything is
03:54fabulous right so we're done talking about that I want to I'll talk about just
03:57one more ease although there's many of them you could explore them they're all
04:01very intuitive and they're documented really well so we're only gonna look at
04:05one more ease and when we come back we're gonna look at the elastic ease
04:09and see it in action so we'll see you in the next lesson when we do that