Realize front-end spring dynamic efficiency

Spring dynamic effect is a native effect of IOS system. For example, the display effect of a large picture on iPhone is a spring animation, as shown below:

It has a bouncing process, with large and small scales alternately acting like a spring, rather than a simple linear enlargement.

If the animation-timing-function of CSS is used, it only changes the speed of motion, but not the direction of motion.

Write your own CSS to simulate the effect of getting bigger and then smaller:

@keyframes spring-show {
    0% {
        transform: scale(0); 90%} {transform: scale(1);
    }
    /* Zoom in */
    95% {
        transform: scale(1.1);
    }
    /* then retract */
    100% {
        transform: scale(1); }}Copy the code

There is no such elasticity.

To achieve the vibration effect of a spring, two parameters are required, one is damping coefficient damping and the other is stiffness. The damping coefficient determines the speed of attenuation, and the stiffness determines the cycle length of round trip. Given these two parameters and the initial and final displacement of the spring, the displacement of the spring at any time can be derived from some physical formula. This displacement can be used as the value of the scale above, or as the value of translate, rotate, etc.

So how do we do that? Da Mo in “CSS how to achieve spring animation effect” also discussed this effect in detail, and write a SASS function to achieve, but this way to generate CSS is generally large, so I use JS implementation, the principle is to calculate a CSS keyframes animation in 1%, 2%, 3%… , 100% of the time what the attribute value should be, and then dynamically insert a style tag. Here we borrow a CSS Spring library, which is only 3KB after gzip, using the following methods:

import spring, { toString } from 'css-spring';
const keyframes = spring(
    { scale: 0 }, // from
    { scale: 1 }, // to
    // precision indicates that the precision is 2 bits
    { damping: 14.stiffness: 170.precision: 2});const keyframeString = toString(keyframes);
console.log(keyframeString);Copy the code

The generated CSS is shown below:

It will have a change of size: 0 -> 1 -> 1.1 -> 0.99 -> 1. It is more intuitive to draw these values as a graph:

It can be seen that it has a jitter and periodic decay process, the actual effect is shown below:

In addition to zooming in, this can also be done with zooming out, and it can also be done with rotation, as shown below:

This is generated with the following code:

const keyframes = spring(
    { rotateZ: 30 }, // from
    { rotateZ: 0 }, // to
    { damping: 14.stiffness: 170.precision: 3});Copy the code

When we need to use animation-delay to make the three stars appear one by one, we need to first undefined: hidden and then appear. At this time, we need to add the undefined attribute in keyframes, as shown in the following code:

let from = {rotateZ: '30'.visibility: 'hidden' },
    to = {rotateZ: '0'.visibility: 'visible' };
if (from.visibility) {
    keyframes['0%'].visibility = from.visibility;
    keyframes['1%'].visibility = to.visibility;
    // Finally finish animal-fill-mode: forward use
    keyframes['100%'].visibility = to.visibility;
}Copy the code

Finally, generate a keyFrames:

@keyframes spring-rotate {
    0% {transform:rotateZ(29.1 deg);visibility:hidden;}
    1% {transform:rotateZ(27.507 deg);visibility:visible; }/ *... * /
    100% {transform:rotateZ(0deg);visibility:visible;}
}Copy the code

Then let the animation-delay of each star increase successively:

.star {
    visibility: hidden;
    animation: spring-rotate .59s linear forwards;
}
.star:nth-of-type(2) {
    animation-delay:.15s;
}
.star:nth-of-type(3) {
    animation-delay:.3s;
}Copy the code

This can be done one by one, as shown below:

This spring effect enhances movement and makes it look more tactile than a normal one-way effect.

In the actual implementation I wrote an util that generated keyframes when the page was initialized and inserted a style tag inside the head. Because if the webkit prefix is added, a keyframes has 4KB, and 10 keyframes have 40KB. Using JS dynamic calculation directly will save more space and be more flexible.

【 Other articles 】 Implement WebRTC P2P connection