使用jQuery Animate分步对图像精灵进行动画处理？

Question

我正在尝试使用jQuery编写图像精灵，并且想知道是否可以逐步而不是线性地进行动画处理。 基本上，我尝试使用CSS3动画，但是IE9是必需的，并且我无法使CSS3动画在IE中正常运行。

我有一个精灵，它有12个帧，每个帧为280px X 280px。 我想使用jQuery在mouseover和mouseout上分步设置精灵动画，而不是以线性方式滑动背景图像。

这是我当前的代码：

<div class="window"></div>

CSS：

.window {
    width: 280px;
    height: 280px;
    background: url("http://s27.postimg.org/neu6mvztf/single_hung_door.png");
}

JS：

$(".window").hover(
    function () {
        $(this).animate({
            'background-position-x': '0',
            'background-position-y': '-3080px'
        }, 1500, 'linear');
    },
    function () {
        $(this).animate({
            'background-position-x': '0',
            'background-position-y': '0'
        }, 1500, 'linear');
    }
);

JSFiddle具有所需效果的样本

这样可以做到吗？ 谢谢！

Answer 1

您可以使用名为velocity.js的库进行此操作。您可以在此处查看操作方法： http ：//css-tricks.com/clever-uses-step-easing/

Answer 2

它不是最优雅的代码，但基本上，我认为您需要一个连续运行的动画循环，该动画循环仅每x毫秒将帧动画移动一帧。 您演奏过的小提琴不断以线性方式对整个条带进行动画处理。 下面的分叉jsFiddle链接。

var currentY = 0;
var isAnimating = false;
var $window = $('.window');
var windowWidth = 280;
var frameRateMs = 60;

function updateWindow() {
    if (isAnimating) {
        $window.css({'background-position-y': currentY + 'px'});
        currentY -= windowWidth;
        if (currentY == -3080) {
            windowWidth = -280;
        } else if (currentY == 0) {
            windowWidth = 280;
        }
    }
    setTimeout(updateWindow, frameRateMs);
}

$window.hover(function() {
    isAnimating = true;
}, function() {
    isAnimating = false;
});

updateWindow();

http://jsfiddle.net/64nu4h4w/10/

Answer 3

保持您的代码结构，我创建了一个.animateSteps()函数：

$(".window").hover(
    function () {
        $(".window").animateSteps(280,-280,20);
    },
    function () {
        $(".window").animateSteps(3080,280,20);
    }
);


$.fn.animateSteps = function(final,step,duration) {
    if(typeof t != "undefined") clearTimeout(t);
    var self = $(this);
    if(parseInt(self.css('background-position-y'))==final) return;
    self.css('background-position-y', '+='+step+'px');
    t=setTimeout(function(){self.animateSteps(final,step,duration);},duration);
}

它包含3个参数：

• final ：最终位置（以像素为单位）

• step ：每步要增加的像素数

• duration ：2次迭代之间的持续时间

JS小提琴演示