If you’ve used CSS’s animation or transition properties, you should be impressed by easing functions such as ease and ease-in, which change the speed of change during animation

Here, as an exercise, I implement a slow function that moves slowly (maybe a little less rigorously)

implementation

Through the slow function to achieve an absolute position of the square moving around the speed slowly down the slow effect

There are several built-in JS apis used here:

// Get the distance to the left of the element and to the left of the parent element with positioning, without units (px)
elem.offsetLeft;

// The key to speed change. The essence of achieving a change in speed is that the distance traveled becomes smaller after each same time interval
// Set the timer
window.setInterval(callback, interval);
// Clear the timer
// Every time you start using the buffer function, clear the previous timer to prevent confusion
// In the following implementation of the easing function is also used to stop the timer after reaching the target position
window.clearInterval(timerID);

// Use it to round the step size (see the code below)
Math.ceil();
Math.floor();
Copy the code

Firstly, the “rudiment” of the easing function is determined as follows:

function animateEase(obj, target, callback) {
    / / the method body
}
/* obj represents the element object to which the function is applied. Target represents the target to which the object is moved. Callback is the callback function to execute after the function has finished executing
Copy the code

The first thing to make clear is to use before easing a function

2. Stop the timer when the element object reaches the target position and execute the callback function

function animateEase(obj, target, callback) {
    // 1. Clear the timer that may have existed before this function was applied to this element
    // This is a custom attribute added to the element object. If the function was not initially applied to the object, obj.timer is undefined
    clearInterval(obj.timer);
    let interval = 30; // ms
    obj.timer = setInterval(() = > {
        // Make the distance moved gradually smaller after each same interval
        // 2. If you reach the target position, you need to stop the movement by clearing the timer
        // In this example, we want to move the element left or right, judging the left offset distance
        if(target == obj.offsetLeft) {
            clearInterval(obj.timer);
            // Execute the callback function -- it is possible to call the buffer function without passing the callback
            if(callback) {
                callback();
            }
        }
    }, interval);
}
Copy the code

Then you just need to implement the logic code that moves progressively smaller distances after each same interval:

function animateEase(obj, target, callback) {
    clearInterval(obj.timer);
    
    let interval = 30; // ms
    obj.timer = setInterval(() = > {
        // Make the distance moved gradually smaller after each same interval
        // 1. Calculate the current step size -- the step size will decrease as the distance from the target position decreases.
        let step = (target - obj.offsetLeft) / 10;
        // Since the decimal fraction is omitted when applying values to elements (usually less than 1px is ignored), this will result in the deviation between the final position and the target position, so it needs to be rounded
        // There are two cases where absolute value is less than 1:
        // Move to the right, step is positive, and round up
        // Move to the left, step is negative, round down
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        // 2. Apply to the element
        // The step size is applied to the left side shift because the goal of this example is to soften the movement of elements left and right
        // Since the calculated value does not have units, we need to add units by string concatenation and then apply them to the style
        obj.style.left = obj.offsetLeft + step + 'px';
        
        if(target == obj.offsetLeft) {
            clearInterval(obj.timer);
            if(callback) {
                callback();
            }
        }
    }, interval);
}
Copy the code

The final effect is as follows:

At this point a simple easing effect is achieved

Article source: gitee.com/thisismyadd…