1 00:00:00,690 --> 00:00:03,310 In the real world things don't move at a constant speed, 2 00:00:03,310 --> 00:00:05,340 they accelerate and decelerate. 3 00:00:05,340 --> 00:00:08,681 And the rate they change their speed depends on their mass and 4 00:00:08,681 --> 00:00:10,198 the forces being applied. 5 00:00:10,198 --> 00:00:14,752 In order to create animations that feel natural and pleasant want to apply similar 6 00:00:14,752 --> 00:00:17,791 rules without sacrificing simplicity and elegance. 7 00:00:17,791 --> 00:00:22,106 In this video, we'll look at the tools that Android gives us to fine tune 8 00:00:22,106 --> 00:00:23,958 the timing of our animations. 9 00:00:23,958 --> 00:00:28,342 In Android an interpolator defines the rate of change of an animation. 10 00:00:28,342 --> 00:00:33,041 Linear interpolator instructs the property value to change at a constant speed, 11 00:00:33,041 --> 00:00:36,785 this is also referred to as linear change because you can plot it as 12 00:00:36,785 --> 00:00:37,818 a straight line. 13 00:00:37,818 --> 00:00:42,066 AccelerateDecelerateInterprolator is the default interpolator it's used if you 14 00:00:42,066 --> 00:00:44,648 don't set the interpreter value of an animation. 15 00:00:44,648 --> 00:00:48,187 As its name indicates the change of property value first gets fast and 16 00:00:48,187 --> 00:00:50,620 faster and then slows down. 17 00:00:50,620 --> 00:00:54,722 If necessary you can define custom interpolators by extending the time 18 00:00:54,722 --> 00:00:56,030 interpolator class. 19 00:00:56,030 --> 00:01:00,715 Since Lollipop, we can define the timing of an interpolator in terms of a busy 20 00:01:00,715 --> 00:01:04,908 a curve, this gives us a convenient way to fine tune our animations. 21 00:01:04,908 --> 00:01:08,255 It's important to note that the interpolator can not only be applied on 22 00:01:08,255 --> 00:01:11,960 the spatial movements of an object, but also any property of the object. 23 00:01:11,960 --> 00:01:15,800 For example the alpha value which we know controls how transparent or opaque it is. 24 00:01:17,060 --> 00:01:19,265 So let's get back to our music album animation. 25 00:01:19,265 --> 00:01:23,565 If you look closely you'll notice that there is a slight pause after the title 26 00:01:23,565 --> 00:01:25,390 panel is expanded. 27 00:01:25,390 --> 00:01:29,310 That's happening because we haven't set any interpolators for animations, and 28 00:01:29,310 --> 00:01:33,190 by default Android will use AccelerateDecelerateInterpolator. 29 00:01:33,190 --> 00:01:37,678 This causes the title panel to slow down its movement when the track panel is about 30 00:01:37,678 --> 00:01:38,213 to show. 31 00:01:38,213 --> 00:01:42,420 Let's remove the pause and make the expansion of the two panel smoother. 32 00:01:42,420 --> 00:01:46,326 We just need to make the expansion of the title panel accelerate and 33 00:01:46,326 --> 00:01:48,361 then the track panel decelerate. 34 00:01:48,361 --> 00:01:53,349 So back in our code, let's add a new line after our animatorTitle and 35 00:01:53,349 --> 00:01:59,629 say animatorTitle.setIterpolater, and here we can create one of the interpolators 36 00:01:59,629 --> 00:02:04,542 provided by Android, so we'll say new AccelerateInterpolator. 37 00:02:04,542 --> 00:02:08,871 We can do the same thing for animatorTrack down here, so I'll add a line again and 38 00:02:08,871 --> 00:02:13,394 say animatorTrack again .setInterpolator and this time we want it to decelerate so 39 00:02:13,394 --> 00:02:15,460 that it slows down. 40 00:02:15,460 --> 00:02:19,938 So now let's run the app, click into the detail view and if we click on it, 41 00:02:19,938 --> 00:02:23,997 there's a little bit smoother you can probably see a difference. 42 00:02:23,997 --> 00:02:27,286 We can actually make that difference stand out a little more by playing with a few 43 00:02:27,286 --> 00:02:28,377 additional parameters. 44 00:02:28,377 --> 00:02:31,876 So there are other parameters of animation that you can configure for 45 00:02:31,876 --> 00:02:34,107 example the duration of the animation, and 46 00:02:34,107 --> 00:02:37,620 the time to wait before starting an animation both in milliseconds. 47 00:02:37,620 --> 00:02:41,780 They all can be used to precisely control the timing of your animations. 48 00:02:41,780 --> 00:02:45,403 Let's try a few to control the duration of our animation and 49 00:02:45,403 --> 00:02:47,806 introduce a slight delay at the start. 50 00:02:47,806 --> 00:02:52,668 So first we want to pick our animatorTitle and we'll use the setDuration property, 51 00:02:52,668 --> 00:02:54,998 and this parameter is in milliseconds, 52 00:02:54,998 --> 00:02:58,437 so if we do 1000 milliseconds it will equal one second. 53 00:02:58,437 --> 00:02:59,916 Let's do the same thing for 54 00:02:59,916 --> 00:03:05,050 the animatorTrick we'll set the duration to 1000 milliseconds as well. 55 00:03:05,050 --> 00:03:09,650 Finally we can set a delay and we'll do it on the first one the animatorTitle, 56 00:03:09,650 --> 00:03:13,700 set the start delay to 1000 milliseconds. 57 00:03:13,700 --> 00:03:17,760 And this means that the animation will start after one second. 58 00:03:17,760 --> 00:03:21,637 So now if we run the app we'll be able to see more clearly when things accelerate 59 00:03:21,637 --> 00:03:22,538 and decelerate. 60 00:03:24,347 --> 00:03:28,973 Okay, so click on the album and then click on it again to start the animation and 61 00:03:28,973 --> 00:03:34,177 after a second, accelerates in, and then decelerates out, cool just what we wanted. 62 00:03:34,177 --> 00:03:37,432 All right now, well it's not exactly what we wanted because it doesn't move as 63 00:03:37,432 --> 00:03:39,580 quickly as the animation we're going for. 64 00:03:39,580 --> 00:03:44,211 So I'm going to comment out these lines but I'll leave them here as reference so 65 00:03:44,211 --> 00:03:48,219 you can see how to set configuration parameters like the duration and 66 00:03:48,219 --> 00:03:49,067 start delay. 67 00:03:49,067 --> 00:03:53,905 Just as anything else, details matter a small difference in how things move on 68 00:03:53,905 --> 00:03:57,218 our UI, may have a big impact on the user experience. 69 00:03:57,218 --> 00:04:00,823 Android provides tools such as interpreters to give us fine control of 70 00:04:00,823 --> 00:04:02,200 our animations. 71 00:04:02,200 --> 00:04:05,210 Now it's our job to polish our UI and make sure that it stands out.