Motion curve improves CSS animation effect

Original link

Translation \ Translator Bao

There is a UI animation before a good UI animation. Good animations make people wonder "Wow!" "--because the page looks smooth and beautiful, and most importantly, naturally, it doesn't make people feel discordant or stiff. If you often visit dribbble or uplabs sites like this, you will understand what I am talking about.

Some excellent reading resources to expand:
· Path clipping animations for SVG and CSS
• A number of practical animation techniques
• Use SVG hand-drawn animations
• New Web Animation API

Since so many talented designers have created such beautiful animations, it is natural that any developer will want to introduce these effects in their own projects. Now, CSS provides some preset variables for transition-timing-function, such as Ease-in, Ease-out, and Ease-in-out, which raise the smoothness and realism of the page a notch, but Don't you think this method is too popular? Imagine how tedious it would be if every animation on the page used these 3 same time variables.

(citation: Lukášstraňák)

Transition-timing-function has a variant of Cubic-bezier (N1, N2, N3, N4), you can pass in 4 parameters to create your own unique time function. At the end of this article, you'll see what these 4 parameters represent-but, believe me, it's not easy to find four numbers to capture your imaginary transformation. Thanks to Cubic-bezier and Ceasar, you don't have to do it yourself. These tools introduce motion curves into a Web page.

(citation: m-2-h)

The motion curve was first used by passive painters to create advanced, lifelike animations (such as Adobe after Effects). With Cubic-bezier and Ceasar, you can easily manipulate the shape of the curve, in addition (N1, N2, N3, N4) These 4 numbers will be filled for you, this is absolutely awesome! However, if you want to maximize the function of the motion curve when you use it, you need to understand how they work, which is what we'll talk about in this article next. Now let's get started.

Understanding Motion Curves

　　The motion curve is really just a point of connecting animation properties and time. A motion curve shows how the speed of an animated motion is affected by time and varies.

A motion curve is a point that connects animation properties and time.

Let's take distance (TranslateX) as an example of animated properties. (This explanation also applies to any of the other animated properties.) )

Calculates the speed of a T1 moment on a distance-time graph.

If you have a certain foundation of physics and Elementary calculus, you will know that it is very easy to get the speed out of a distance-schedule. The distance traveled by the unit time in the table divided by the derivative of the time given at a given moment is the velocity. In other words, the distance-time curve of the object in the steep curve of the place has a faster speed, and in the smooth curve of the place, the speed is relatively slow. If you know how it works, that's great! It means you are ready to skip the following section.

Today, I realize that design and development are completely different areas, after all, not everyone has the same background. Perhaps the above words you can not understand completely, also need not be discouraged, because I will slowly explain the next.

Have you seen the red box below? Please allow me to still retain childlike it as "Boxy"; it would be more convenient to mention it. Well, we can see that boxy is moving from one side of the screen to the other in a linear way, so let's analyze its motion.

A preset parameter for transition-timing-function is linear. To get boxy moving, all we have to do is add the following method.

. moveforward {  Transform:translatex (1000px);}

To control the animation effect, we set the transition property for boxy, as shown below:

#boxy {  width:200px;  height:200px;  background:red;  Transition-property:transform;   Transition-duration:1s;   Transition-timing-function:linear;}

It's a hassle to explain transition, in fact, you'll find that transition are written in shorthand:

#boxy {  width:200px;  height:200px;  background:red;  Transition:transform 1s linear;}

Look at the effect it moves. View

The red box is doing a straight motion.

It looks like a robot, doesn't it? of course, you can say that it looks very mechanical, because it does the linear motion , which sounds reasonable. But how do you explain the causes of this phenomenon? We can see that the linear motion makes the movement of the item seem very mechanical, but what is the principle behind the screen? so, our top priority is to figure out why such moves can make people feel very mechanical, discordant and unnatural.

Let's show the boxy's moving axis to see if we can get some useful information. The axis has two axes, the longitudinal axis represents the distance, and the horizontal axis represents the time. The boxy walked 1000 pixels in 1 seconds. We'll use some math, but don't worry, because it's easy.

This is the very simple chart we built, with two axes on it, as I just mentioned.

Only an empty table of axes

Now, it's empty, let's fill in some data.

First, we can see that at the initial moment (that is, 0 seconds), the animation has not started, and the boxy is in its initial position (that is, the position of 0 pixels). After 1 seconds, boxy a total of 1000 pixels, stopping at the opposite of the initial position.

The starting and ending positions of the boxy.

Let's draw the data in the graph.

Charts marked with boxy start and end locations

Everything went well so far. But only two points of data are far from enough-we need more. The next data records the location of boxy at different points in time (thanks to my high-speed camera).

The location of the boxy at different points in time

We add this data to the axis.

Axes that are marked with different positions.

Of course, you can also collect more points at different times (such as 0.375s, 0.6s, etc.), but we now have enough to build this watch. After labeling all the points above, our table is built. Come on, hit the palm!

Axis final version

Cool! But what can we get from this? We must always remember that the purpose of the experiment is to figure out why boxy's linear motion looks unnatural and mechanical. Obviously, the form we've built doesn't tell us why. We need to explore more deeply.

Let's remember this watch and take 1 minutes to talk about speed. I believe you should understand the concept of speed--I mean speed in mathematical terminology. It is calculated as follows:

Mathematical formula for calculating speed

So if a truck travels 100 kilometers in 1 hours, we say it's at a speed of 100km/h.

Calculation of the speed

If the truck doubles the speed, he will double the distance (200 km) within 1 hours of the same time interval, in other words, 100 kilometres, which now only takes half the time (i.e. half an hour). Can you understand what I mean?

Similarly, if the truck cuts its speed in half, it will walk 50 kilometers in the same time period of 1 hours, that is to say, 100 kilometers, it will need double time (that is, 2 hours).

Good! Let's go back to the idea that we are currently trying to figure out how this distance-the timetable is helping us find the reason why boxy's linear motion looks stiff.

Hey, wait a minute! We have a distance-timetable, and speed can be calculated by distance and time, isn't it? Next we will try to calculate the speed of boxy in different units of time.

Calculates the speed of different unit time periods.

Here I have selected 3 different time periods: a close to the starting point, a section in the middle position, and a section close to the end of the position. Obviously, in these three time periods, the boxy velocity is the same (it moves the distance s1=s2=s3), namely 1000px/s. This shows that no matter what time period you choose in the table above, you will find that the boxy are moving at 1000px/s speed. Isn't that a surprise? in real life, no object can always move at a constant speed, they start with slower speed, and then gradually increase the speed, after a period of time, the movement will slow down before stopping, but boxy is 1000px/s speed suddenly started, and then do uniform motion, And it just stops abruptly at the same speed. That's why boxy's movement looks mechanical and unnatural, and then we have to redraw our coordinate system to reflect that. but before delving into it, we need to understand how the change in speed is changing the distance-schedule. You ready? The next exploration will be interesting.

We'll increase the speed of the boxy a few times to see how the coordinate map will change accordingly. The initial speed of the boxy, as we calculated above, is 1000px/s. Because we made it twice times faster, boxy only half the time--0.5 seconds--to go through the whole process. Let's draw it in the coordinate chart.

Coordinate diagram at twice times the speed

What if we increase it to 3 times times the speed? Boxy takes only one-third of the time to complete the journey (i.e. 1/3 seconds).

Coordinate diagram at three times times the speed

Well, what do you see? We can see that as the speed increases, the coordinate chart changes, and the angle between the line and the axis of time is increasing.

Well, we'll continue to halve the speed of the boxy. Halving its speed means that the boxy can only walk 500 pixels (that is, half the distance) within 1 seconds. Then let's draw it in the coordinate chart.

Coordinate chart at half speed (click to view large image)

We'll slow down the boxy a little bit and let it move at the original speed of One-third. In this case, the boxy can only walk through the first one-third of the journey in 1 seconds.

One-third coordinate chart at speed (click to view large image)

Do you see the rules? As we increase the speed of the boxy, the lines get steeper and the lines become smoother as the boxy slows down.

The line becomes steep when the speed increases, and the straight line slows down. (Click to see the big picture)

This conclusion is very important, because for a very steep straight line, that is, faster, a short period of time boxy walk will change a lot.

For a table with steeper segments, a small period of time will have a significant change in distance. (Click to see the big picture)

For a table with steeper segments, a small period of time will have a significant change in distance. (Click to see the big picture)

On the other hand, for the lower slope of the straight line, even if the past a long time, the distance will only change a little bit, this is the speed of movement is relatively slow situation.

The relationship between time and distance in the coordinate chart when the slope is relatively flat (click to see a larger view)

When the slope is relatively flat, the relationship between time and distance in the coordinate chart (click to see a larger view)

All we've done is change the speed of the boxy, and it's still doing straight motion. However, we have a new way of figuring out how distances and times change speed, and then we can draw a table to let boxy move in a natural, real way.

Let's step by step. First of all, real-life objects are slowly beginning to move, and gradually increase the speed of movement. So, let's simulate the process.

Looking closely, you will find that the starting and ending positions have not changed. Because we don't want to change the duration of the animation, nor do we want to change the boxy distance.

Private custom-made motion curve (click to view larger image)

Boxy if you follow the above chart motion, it will be slower in the first 0.25 seconds, because the line is relatively flat between 0 seconds and 0.25 seconds, and then it will suddenly grow (because the segment suddenly gets steeper after 0.25 seconds). But we need to make this transition smooth, because we don't want any corners-after all, it's a motion curve. Next, replace the sharp turn with a curve.

Private custom-made motion curve (click to view larger image)

Pay attention to the smooth transition from stationary to gradual growth in boxy.

Follow the boxy of the motion curve above (click to see the picture)

Very good! In real life, the speed of moving objects slows down before they stop. Let's modify the coordinate diagram to accommodate this change. Similarly, we will add a point where we want the boxy to slow down. Just add it to 0.6 seconds. I have changed the turning point into a curve.

The ultimate version of the motion curve (click to see the big picture)

Look, boxy, move up! It looks a lot more natural now, doesn't it?

Boxy according to the ultimate version of the motion curve (click to see the picture)

The curves we use to replace the corners are actually made up of a lot of short-term segments, and as you already know, the steeper the lines in the table, the faster theboxy moves, the smoother the line, the slower the boxy. looking at the left part of the coordinate chart, it is found that the smaller line segments of the curve become more and more large, resulting in a gradual increase in speed; correspondingly, the segments on the right side are getting smoother and slower.

A curve is just a collection of many short-term segments (click to view a larger image)

As we all know, it's a lot easier to figure out the motion curve. Next, let's look at some examples.

Example 1 (point open to view)

Example 2 (point open to view)

Example 3 (point open to view)

Using motion curves in UI animations

Next you need to make a UI element move, you can use the motion curve for you. Whether it's a slider, a window model, or a drop-down menu, adding the right amount of animation to make them look smooth and natural can dramatically improve the quality of your user interface. it will make the user feel good about your interface. Take the slide-out menu below for an example:

This is the pen njial that Nash Vail (@nashvail) created on Codepen.

Clicking on the menu bar jumps out of the menu from the left, but the action appears stiff. The 51st line of the CSS table will transition-timing-function be set for this animation linear . This animation effect can obviously be optimized. Let's use Cubic-bezier to create a private custom timing feature.

If you read this, I guess you must be a designer or developer, or both, so you won't be unfamiliar with the three-time Bezier curve , and it's likely that you've met at least 1 times. The creation of Bezier curves is a miracle. They were initially used in computer graphics to draw shapes, and were used in tools such as sketch and Adobe Illustrator to draw vector graphics. three times Bézier curves are used so extensively because they are very handy: we just need to change the position of 4 different points and create the curve we need.

　　We generally know the starting and ending positions of the objects in the animation, so we can easily lock the two points. Then just find the two-point position where we need to change the speed. The first two fixed points are called anchor points, and the remaining two are called control points.

Part of the truncated Bezier curve. (Click to see the big picture)

　　as you know, you cubic-bezier need four parameters ( n1, n2, n3, n4 ) to customize transition-timing-function . These four parameters represent the position of the two control points: the n1, n2 x-and y-coordinate points of the first control point, which n3, n4 represents the X-and y-coordinate points of the second control point. changing the position of the control point causes the shape of the curve to change, and n1, n2, n3, n4 our animation will be different when all or part of the change occurs. For example, here is cubic-bezier(.14, .78, .89, .35) the result of the incoming parameter:

(.14, .78, .89, .35)the three-cubic Bezier curve in which the parameter is passed in. (Click to see the big picture)

The mathematical knowledge behind seemingly simple curves is fascinating.

Okay, okay, let's think back to the original idea: we want to customize it with three cubic Bezier curves 过渡时间功能的函数 . What we need is a menu that can quickly slide out and then slowly slow down and last stop:

The adjusted three Bezier curve. (Click to see the big picture)

It looks pretty good. The animation will start to slow down gradually, rather than moving at a constant speed over the course. I simply copied from the above cubic-bezier(.05, .69, .14, 1) and replaced it linear .

This is the pen njial published by Nash Vail (@nashvail) in Codepen.

You see the difference? The second version looks a lot more natural and more appealing. Imagine if every animation in your page has a natural timing function, how much will it be?

This shows that the motion curves are not complex at all, they are very simple to understand and use. With them, you can raise your UI page a notch.

I hope you understand how the motion curve works. If you're having problems with a motion curve, or you haven't used them at all, it should be easy for you to create beautiful animations as you wish. After all, animation effects are critical.

Finish

Motion curve improves CSS animation effect