Question

我正在尝试使用jQuery对图像精灵进行编码，并且想知道是否可以按步骤而不是线性进行动画处理。基本上，我尝试使用CSS3动画，但IE9是一个要求，我无法让CSS3动画在IE中正常运行。

我有一个有12帧的精灵，每帧是280px X 280px。我想使用jQuery在鼠标悬停和鼠标输出上为精灵设置动画，而不是以线性方式滑动背景图像。

这是我目前的代码：

<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 with sample of desired effect

以这种方式实现这一目标是否可行？谢谢！

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：两次迭代之间的持续时间

在步骤中使用jQuery Animate动画图像精灵？

3 个答案:

JS Fiddle Demo