Geek Answers Handbook

Why is my custom pseudo animation not in sync with jQuery's animation function?

So, it turns out that although you can animate an background-colorelement through the jQuery UI, you cannot do the same for elements that use the function background: linear-gradient()because it is displayed as an image. However, you can set linear gradients using the jQuery method .css().

Therefore, a simple solution to this problem is to create a pseudo-animation that quickly sets a linear gradient through the css method for 10-30 milliseconds each for a certain duration. In doing so, you can create a linear gradient animation. Here is an example .

I did just that, but I ran into a problem. At the same time, when I animate my linear gradients, I also animate a different background color with the same start and end values ​​through my own jQuery method animate(), and these animations do not execute at the same time, despite indicating the duration as equal for both .

Linear gradient animation starts and ends noticeably after the native jQuery animation, despite the fact that it actually calls it a little earlier in my code (about 4 lines).

// Call to custom linear gradient animation
animateGradient(RGBstartColor, RGBstopColor, 300);

...

// Native jQuery animation
$('#stage').animate({ backgroundColor: RGBstopColor }, 300, 'linear');

I wondered if the relief problem was disguised as a time issue, but even when specifying the relaxation in the jQuery animator, it is still visible.

Here is my code for animateGradient():

    animateGradient = function(startString, stopString, duration) {
        // Convert an rgb() string to an array: [r, g, b]
        RGBStringToArray = function(string) {
            return string.substring(4, string.length-1).replace(/ /g, '').split(',')
        }

        // The looping function where the magic happens
        animationLoop = function() {

            diff = [parseInt(start[0]) + (diffStep[0] * i), parseInt(start[1]) + (diffStep[1] * i), parseInt(start[2]) + (diffStep[2] * i)];

            var diffString = 'rgb(' + Math.round(diff[0]) + ',' + Math.round(diff[1]) + ',' + Math.round(diff[2]) + ')';

            $('#serratedtop').css({ 
                background: 
                'linear-gradient(-45deg, ' + diffString + ' 12px, transparent 0), linear-gradient(45deg, ' + diffString + ' 12px, transparent 0)' 
            });

            setTimeout(function() {
                if (i <= iCount) {
                    animationLoop();
                }
                i++;
            }, 30);
        }

        var start = RGBStringToArray(startString);
        var stop = RGBStringToArray(stopString);

        var diff = [stop[0] - start[0], stop[1] - start[1], stop[2] - start[2]];

        var i = 0;
        var iCount = parseInt(duration / 30); // 30 milliseconds should be enough to render a high enough framerate (~ 33fps). 
        var diffStep = [diff[0] / iCount, diff[1] / iCount, diff[2] / iCount];

        // Call the magic 
        animationLoop();
    }

, , , jQuery-. , ?

JSFiddle

+4
1

, - ( ), , step , "" :

$('#stage').animate({
    backgroundColor: 'rgb(230,250,250)'
}, {
    duration: 1000,
    step: function () {
        var col = $('#stage').css('backgroundColor');
        $('#serratedtop').css({
            background:
            'linear-gradient(-45deg, ' + col + ' 12px, transparent 0), linear-gradient(45deg, ' + col + ' 12px, transparent 0)'
        });
    }
});

, , .

JSFiddle: http://jsfiddle.net/bjgzLkuf/5/

0

More articles:


All Articles