The ideas for this article and the mathematical formulas involved in it all came from Spring Animation in CSS shared by @Thai Pangsakulyanont.

CSS Animation is not a new technology in Web Animation, but when making Animation, you may often struggle with how to use timing function. In general, animation-timing-function/transition-timing-function is used to animate key words. Those of you who are slightly familiar with Web Animation may use Cubic-bezier.com to help you create some timing functions. Often all of these are just limited to use, and do not know what the principle is.

In addition, it’s almost impossible to animate a real bounce (like spring elasticity) using these basic timing-functions.

Well, that’s not the case. Why do you say that? In the process of animation, mathematics may help us to do many more meaningful things, for example, with the help of some principles of mathematical calculus can let us create more realistic animation effects. Like spring bounce. So that’s what this article is about. If you’re interested, please read on.

Let’s start with an example of an animation effect:

The above animation example is from a case written by @dtinth. The author’s Stylus has been replaced with Sass.

These mathematical formulas are from Spring Animation in CSS, a post shared by @Thai Pangsakulyanont. And I left school for nearly 20 years, a lot of knowledge has been returned to the teacher, if the article is wrong, but also please point out more.

Why CSS Animation

This is an immutable topic, there is nothing to tangle with. For a student who knows nothing about JavaScript, one of the things he’s always been interested in is how to make the animation look like JavaScript with CSS (which is almost impossible, but most of the time it’s not very relevant). From a technical point of view, there are many excellent libraries for implementing Web Animation, such as React-Motion, Velocitvelocity. Js and GSAP. But they all have one problem: JavaScript access to the DOM is single-threaded. CSS Animation does not have this problem.

The basics of Tweening

Take a look at a simple animation, such as pushing a box from left:100px to left:200px.

This means, over time, don’t stop between 100px and 200px.

When the animation is executed, I want the overlay to be reduced by 100px(from 100% to 0%) and increased by 200px(from 0% to 100%) at the same time.

There is a process to process the animation to 200px, which we call P for short. By using p, we can calculate the value of left at each time using the following formula:

? left: (1-p)(100px)+p(200px)?

Here’s an illustration of how it works:

To recap, if the animation is going from A to B and the motion progress is P, its property value will be:

? (1-p)A+pB?

Some of you might like to write it like this:

? A+p(B-A)?

Call this lERP or Linear interpolation.

Call this linear, but real world animation is not linear. For example, you might want the animation to start slow and end fast (equivalent to the object accelerating). You can use a easing function in animation playback, but the processing and timing are not linear.

The easing function is mainly used to create a relationship between time and animation development.

The easing function specifies the speed at which the animation effect is executed to make it look more realistic. Real objects move at a certain pace, not fast at first. When we open a drawer, we first speed it up, then slow it down. When something falls, it first falls faster and faster, hits the ground, bounces back, and eventually hits the floor again. – much the function

Note: The EASING function is described in great detail on the MJ.js website.

Physics

Here’s a spring block, suppose it’s in position x = 1 when it’s not moving:

Now you push the spring and its position is x = 0:

When you release your hand and stop pushing the spring, the spring will move back and forth until it reaches its equilibrium position x equals 1.

It’s like easing function. That is, it is a timing function that starts at 0% and ends at 100%. And the spring is one of the things in here.

The following content starts to be complicated. It feels like we are not talking about CSS Animation, but starting to learn physics, and some physical equations (mechanics, spring-related physical equations) will also be involved.

First, Spring Force pulls the Spring block back to the equilibrium position. Here X is the equilibrium position of the object’s displacement:

? F_{s}=-kX?

Damping force is also used to slow down movement resistance. Imagine if, without this resistance, the spring could swing back and forth and stop?

? F_{d}=-cv?

So you can calculate how much force is applied to the spring:

? F=F_{s}+F_{d}=-kX-cv?

You’ve probably heard of Newton’s second law:

? F=ma?

For simplicity, we assume that mass(m=1) has a value of 1, so we get:

? F=-kX-cv? ? ma=-kX-cv? ? a=-kX-cv?

Now, X represents the object moving from its equilibrium position. That means that if we want to go from x equals x to x equals 1, then we have to move x minus 1 every time to get to that position.

? X=x-1?

To calculate the value of left:

? a=-k(x-1)-cv?

This is our equation of motion. Now we’re done and we’ve got the equations of motion that we need from the equations of physics.

To calculate

If you remember a little bit about calculus, this should be easy for you. Then use some formulas of calculus to calculate the relationship between the position and time of the object’s motion.

? x=f(t)?

According to the position, calculate the speed:

? v=\frac{dx}{dt}=f'(t)?

According to the velocity, the acceleration is obtained:

? a=\frac{dv}{dt}=f”(t)?

Recall the equations of motion:

? a=-k(x-1)-cv?

Use the formula above to replace x, V, and A, and now you see the formula looks like this:

? f”(t)=-k(f(t)-1)-cf'(t)?

This is a differential equation. These are too complicated for me, if you like I don’t know how to use their own knowledge of calculus to solve, so you can use the Wolfram | Alpha to help you.

To make things easier, let’s make some restrictions and reduce the complexity.

Remember, before we move the block, the position of the block is let’s say at x equals 0. In other words, the initial position of the block is x=0, and the initial time is t=0, so that:

? f(0)=0?

We also know that the special body does not move until it lets go, which means that we have a formula like this:

? f'(0)=0?

Unfortunately, Wolfram | Alpha with a variable k and c can’t work out the equation, so we also need some other values.

For example, the Wobble animation in the React-Motion library sets k=180 and c=12. This will solve the formula:

? f(0)=0? ? f'(0)=0? ? f”(t)=-180(f(t)-1)-12f'(t)?

In the Wolfram | Alpha type:

f(0) = 0; f'(0) = 0; f''(t) = -180(f(t) - 1) - 12f'(t)
Copy the code

You can see the image below:

Wolfram | Alpha to our answer is:

? x=-\frac{1}{2}e^{-6t}(-2e^{6t}+sin(12t)+2cos(12t))?

Where do you get ½, 6, sine () and cosine ()? I don’t know. It’s too complicated, too hard, too weird for me.

But it appears to be legitimate (illegal, I also don’t understand, temporarily when Wolfram | Alpha computing won’t go wrong), because the sine and cosine an oscillating motion is doing, just like spring. Divide t=0 to t=1 by 0.01 and draw a picture like the following:

CSS Animation

We can’t apply such complex equations to CSS, but we can generate some approximation equations. We can specify @keyframes in the CSS Animation, but our equation is a continuous function.

As illustrated above, we apply this to @keyframes of CSS. For example, if the animation lasts 1s, the CSS code looks like this:

@keyframes keyframe-name {0% {/* CSS code for t=0.00s */} 1% {/* CSS code for t=0.01s */} 2% {/* CSS code for T = 0.02 s * / 3%} {/ * CSS code for t = 0.03 s * /} / *... {/* CSS code for t=0.99s */}Copy the code

Write like this, you must scold niang, also cut practical. However, it can be generated using some CSS preprocessors. Next we use Sass to do it.

Spring Animation in CSS by @Thai Pangsakulyanont uses Stylus. Since I’m not familiar with Stylus, I replace it with Sass.

The first to use Sass Wolfram | Alpha to give us the answer for a function:

@function spring-wobbly($t) {@return -0.5 * pow(2.71828, (-6 * $t)) * (-2 * pow(2.71828, (6 * $t)) + sin(12 * $t) + 2 * cos(12 * $t)) }Copy the code

Since Sass itself does not provide these mathematical functions, such as sines () and cosines (). If you have to write these functions yourself, it is very painful, here is a very good Sass library MathSass. This library covers common functions. Detailed use, you can read its use specifications.

For example, we introduce math before the function above:

@import "node_modules/mathsass/dist/math";
Copy the code

For actual projects, replace the above address with your own project address to be effective.

Remember when we overwrote the tweeing animation with interpolation functions, we could also write a function:

@function lerp($a, $b, $p) {
    @return $a + $p * ($b - $a);
}
Copy the code

Next generate @keyframes:

@keyframes move { @for $i from 0 through 100 { #{$i}% { left: lerp(100px, 200px, spring-wobbly($i / 100)); }}}Copy the code

The generated CSS:

Then you just need to reference the declared animation:

.box {
  animation: 1s move linear;
  animation-fill-mode: both;
}
Copy the code

The effect is as follows:

In fact, there are many mathematical principles used in animation. For example, @bboy90’s “CSS3 Animation Frame Number Scientific Calculation Method” introduces in detail how to reasonably calculate @keyframes through the formula. In addition, attached is PPT shared by @Yueying sister, which introduces some animation control in detail:

The mathematical formulas in the PPT above and some of the demos are worth thinking about. Also attached is a video:

custom

Going back to the main content of the article, in actual animation, you can completely customize the animation effect according to the material density and friction coefficient you need.

Of course, you can try to change f prime of 0. For example, setting a negative value causes the box to bounce back in the opposite direction.

You can also use different parameters to make him move faster or slower. All in all, you can use the above principles to create all the animation effects you need.

conclusion

Who said that programming does not need mathematics, today is not programming, just do an animation effect, are used in physics and mathematics calculus. So everything you learn is useful.

In my opinion, whether you know calculus or not, you just need to know how it works. Even if you don’t, you can use third-party tools (such as Wolfram Alpha mentioned above) to help you solve your lack of knowledge.

In short, what you learn is yours. If you want to make something perfect, your knowledge will be the cornerstone of it.

The idea for this article comes from Spring Animation in CSS by @Thai Pangsakulyanont. Some modifications have been made to the original text, so you can read it directly.

If you want to reprint, please indicate the source: www.w3cplus.com/animation/s…