Using an animation function written in native JavaScript on Alibaba Cloud

**gits** · Apr 20 '18, 02:52 PM

well - i just reused the code that you posted to come up with a refactored version that would simply use the duration to determine and control the simultaneous animation of some properties - which i was thinking was what you were looking for. you can have a look at it and see if it fits to what you want it to behave. It has a linear animation speed and combines the properties all at once. I am sure i didn't code it for all cases that might happen - but its not intended - its just as an example how i would think that the duration would determine the animation. was hard enough to write it that 'function-like-way' anyway - since i usually would build classes for that. but that might have been confusing here - so i kept it same style as your posted code came.

Code:

<!doctype html>
<html lang="en">
<head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <script>

    function $id(id){
        return document.getElementById(id);
    }

    function getEleStyle(ele, prop) {
        return window.getComputedStyle(ele, null).getPropertyValue(prop);
    }

    /**
     * function animate
     *
     * @param ele dom-node
     * @param duration duration in ms
     * @param props js-obj with css props to set the values to
     * @param cb optional callback that is called when the animation is over
     */
    function animate(ele, duration, props, cb) {
        
        // calculate how many frames we need to process for this animation
        // note: i consider a frame as ONE interval cycle
        var fps = 60;
        var intervalStep = 1000/fps;
        var framesToRenderAtAll = duration/1000 * fps;
        var currFrame = 0;
        
        // scale the passed props according to the frames we have to 
        // process
        var propSteps = {};
        
        for (var prop in props) {
            propSteps[prop] = {};
            
            var propStart = getEleStyle(ele, prop);
            var pxTest = /px$/.test(propStart);
            
            propSteps[prop].unit = pxTest ? 'px' : '';
            propSteps[prop].curr = pxTest ? parseInt(propStart, 10) : parseFloat(propStart);
            
            var step = (props[prop] - propSteps[prop].curr)/framesToRenderAtAll;
            
            propSteps[prop].step = parseFloat(step.toFixed(2));
        }
        
        // function to set the props per animation-frame    
        var setProps = function() {
            currFrame++;
        
            for (var i in propSteps) {
                propSteps[i].curr += propSteps[i].step;
                ele.style[i] = propSteps[i].curr + propSteps[i].unit;
            }
        
            if (currFrame >= framesToRenderAtAll) {
                window.clearInterval(t);
          
                if (typeof cb != 'undefined') {
                    cb();
                }
            }
        };
        
        // instantly call first step
        setProps();
        
        // setting the interval to start the animation
        var t = window.setInterval(setProps, intervalStep);
    }
    
    </script>
</head>
<body>
    <style>
        #animate{width:200px;height:200px;background-color:blue;}
    </style>
    <div id='animate'></div>
    <button id='pos'>Start the multi-attribute interaction animation</button>
    <script>
    
    $id('pos').onclick = function() {
        animate($id('animate'), 1000, {width:1000, opacity:0, height:100}, function() {
            animate($id('animate'), 1000, {width:200, opacity:1, height:200});
        });
    }
    
    </script>
</body>
</html>

PS: it is not as exact as it could be in determining exact steps and such - but you can improve it by more rounding floats and such where necessary.

**TimoHa** · Apr 23 '18, 03:01 AM

You set the default FPS value to 60. Speed indicates the rate at which each frame will change.
However, the number of frames in a browser is not certain because of a variety of factors, and the time intervals between frames are also undefined.
The actual animation process should be calculated by the time difference between the start time and the current time.
When the animate function runs, it retrieves the start time from Date.now(). In the setInterval method, it retrieves the current time from Date.now() every time.
Calculate the proportion of the time gap “elapsed” between the two values to the animation time variable “time”, and you can get the variation proportion of the style.
I will post the code later today if I have the time.
Here is the code.
Multi-attribute animation

Code:

var interval = 1000 / 60;
var animate = function animate(ele, time, json, fn) {
    if (ele.timer) return;
    var startTime = Date.now(),
        vals = [];
    for (var key in json) {
        var curVal = key.search('opacity') !== -1 ? parseFloat($gs(ele, key)) : parseInt($gs(ele, key)),
            unit = key.search('opacity') !== -1 ? '' : 'px';

        vals.push({ style: key, startVal: curVal, endVal: json[key], unit: unit });
    }

    ele.timer = setInterval(function () {
        var elapsed = Date.now() - startTime;
        if (elapsed >= time) {
            clearInterval(ele.timer);
            ele.timer = null;
            for (var i = 0; i < vals.length; i++) {
                ele.style[vals[i].style] = vals[i].endVal + vals[i].unit;
            }
            
            fn && fn();
        } else {
            for (var i = 0; i < vals.length; i++) {
                ele.style[vals[i].style] = vals[i].startVal + (vals[i].endVal - vals[i].startVal) * (elapsed / time) + vals[i].unit;
            }
        }
    }, interval);
};

**gits** · Apr 23 '18, 07:58 AM

well - seems viable solution as well - while i work with a constant number of frames TimoHa's solution assumes that the elapsed time isn't exactly the time of the interval - which is correct - so it can end up drawing a bit more or less calculated frames. Basically TimoHa's solution is better since it can smooth out some processing delays and such - it can be easily simulated by just placing a longer loop into the prop-setter-function - with my solution it will lead to a longer animation (constant number of frames) while the other solution determines the remaining time and adapts - so its a more constant duration.

**gits** · May 22 '18, 12:19 PM

here is something that can be very useful for such tasks since it explains in more detail what happens exactly and how things can be optimized especially with animations:

THE EVENT LOOP

cheers,
gits

Using an animation function written in native JavaScript on Alibaba Cloud

Using an animation function written in native JavaScript on Alibaba Cloud

Comment

Comment

Comment

Comment