From the course: Learning Adobe XD

AutoAnimate - Adobe XD Tutorial

From the course: Learning Adobe XD

Start my 1-month free trial Buy for my team

AutoAnimate

“

- [Instructor] If there is one wow feature in XD, it has to be Auto Animate. To be clear though, Auto Animate is not a full borne animation tool. In fact, the best way of thinking about Auto Animate in XD is to understand that all it does is move something from here to there or to change something from one state to another. By that, I mean having a shape change color, say from red to blue, or even change from red to blue as it moves from here to there. In this exercise, we're going to understand how it works, and then we'll get into practical examples. So to get started, open the Auto Animate XD found in your chapter download. Now, when it opens, you see two art boards here, each with a red box. To grasp how Auto Animate works, think of each of these art boards as being a key frame in an animation. The plan is to have this box move from here to there. So what we do is we select the box in the second art board, and holding down the shift key, we're just going to move it down so it just touches the bottom. You now have two art boards where the position property of the box has changed between them. To apply the animation, you select prototype mode, and we're going to select the first one, and run a wire from this board to the next. And the trigger's going to be a tap. So we're going to tap anywhere on the art board. We're going to Auto Animate, and it's going to move to this art board here. And we're going to use easy and out. And we'll give it a duration of one second just so you can see it happening. So to preview, select the art board, click preview, you know just move it into position. Click and down it goes. Now let's do a state change. Select the red box on the second art board, and go back into design mode, and change its color to blue. So we'll just change the color to blue. No, we didn't change anything in that position, just the color. Again, if we play. You see it changes color. You saw that change happened rather quickly, and this is where we get to play with another aspect of animation time, which is how long it takes for motion to occur. And what we're going to do, is we're going to go to prototype mode, and we're going to click on our timeline here or our wire, and we're going to change the duration to five seconds. Come back to the first art board. Test. Click. Slow as molasses. So time is also an important element of any animation. And in our UX design world, time is measured in milliseconds, and the common duration for any animation are anywhere between 0.03 to 0.06 seconds. There is one other aspect of motion. Motion is not linear. To understand this, think of driving a car. You accelerate to get up to speed, and decelerate to stop or slow down. When it comes to acceleration and deceleration, that is called easing. Easing was what makes motion look natural. So if I come back to our art board here, you can see our easing here. Ease in ease out is acceleration and deceleration. You got another one here. Snap, is very short overshoot, where that blue box will sort of bounce off the bottom of the art board and then come back. Wind up is the opposite. The red object will bounce up a little bit, and then drop. And bounce does exactly that. So let's get that out of your system, and just do it. So we're going to use a bounce, but we're going to change the duration to something more manageable. We'll go with .05 seconds. So we select Auto Animate. Click. Pretty neat. As you see, you can increase or decrease the motions duration by just simply changing time. Okay, back to design mode. And this time we're going to take the blue box, and we're going to rotate it. We'll say 45 degrees or something, like just rotate it, and move it over here so it kind of appears there. And the ease we're going to apply, and when we go over to prototype mode, is ease in out. And let's test. And you saw the acceleration and deceleration. So what you're discovering is animation is based on property changes between states or location. You are also discovering another important concept, the importance of time. One final point regarding properties and time. You can apply multiple property changes to an object over a period of time that you determine. This time, let's go back to design mode. And what we're going to do is we're going to select this box here, and with the shift key held down, we're just going to scale it down, and move it over here. Only, we're going to change the rotation value to 90 degrees. And if we come back and test, you can see it's tumbling now. Finally, there is a hard and fast rule regarding Auto Animate. The objects in motion must have the same name. So what I want you to do is open the Auto Animate layers, and I want you to change the name to Red Box. And let's give it a test. Nothing happens. The animation is broken. So there you have it. Auto Animate. Just keep these points in mind when using it. Art boards are key frames. Single or multiple properties of objects can be animated. Duration determines the length of the animation. All motion requires a niche. And finally, objects in motion must have the same name. And next up, we're going to take a look at triggers in XD.

Contents