jQuery background-position 动画运行更流畅

Question

我在 jQuery 中有一个这样的图案背景动画。

        banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px');

        window.setInterval(function() {
            banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');
            y--;
        }, 150);

现场示例http://codepen.io/anon/pen/emMxXa

但它相当“紧张”。 我怎样才能让这样的东西运行得更顺畅、更慢。

Answer 1

看看这个jsFiddle。

您会看到，将区间值从 150 减少到 30 会更加平滑：

             window.setInterval(function() {
                banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');
                y--;
                //x--;

                //if you need to scroll image horizontally -
                // uncomment x and comment y

            }, 30);

你可以降低它甚至更多，但你降低它越多，它也变得越快。

Answer 2

看看https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

(function($) {

        var x = 0;
        var y = 0;
        //cache a reference to the banner
        var banner = $("#banner");

        // set initial banner background position
        banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px');

        // scroll up background position every 90 milliseconds
        function step() {
            banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');
            y--;
            //x--;

            //if you need to scroll image horizontally -
            // uncomment x and comment y
                    window.requestAnimationFrame(step)
        }

    window.requestAnimationFrame(step);

})(jQuery);

Answer 3

您想使用并查看 CSS 过渡 和 CSS 动画 以获得真正的平滑度。

-webkit-animation: move 30s linear 0s infinite alternate;
-moz-animation: move 30s linear 0s infinite alternate;

@-webkit-keyframes move { 
  from { background-position: 0px 0px } to { background-position: 0px 400px }  
}

@-moz-keyframes move { 
  from { background-position: 0px 0px } to { background-position: 0px 400px }  
}

演示：http://codepen.io/anon/pen/EaEMvy