jquery在Firefox中使用缓动功能为背景位置设置动画答案

【问题标题】：jquery animate background position in firefox with easing functionjquery在Firefox中使用缓动功能为背景位置设置动画
【发布时间】：2012-05-30 15:57:54
【问题描述】：

我在使用 Firefox 时遇到动画问题。问题jquery animate background-position firefox 的第二个答案正在解决它，但仅适用于狭窄的动画。我想像这样在每个轴上应用缓动（在 IE 和 Chrome 中工作）：

$j("#labyrinth").animate({
    'background-position-x': [position.x - 350, 'sin'],
    'background-position-y': [position.y + 350, 'cos']
}, speed);

sin 和 cos 在这里定义：

$j.easing.sin = function(p, n, firstNum, diff) {
    return Math.sin(p * Math.PI / 2) * diff + firstNum;
};
$j.easing.cos = function(p, n, firstNum, diff) {
    return firstNum + diff - Math.cos(p * Math.PI / 2) * diff;
};

对于 Firefox，我需要调用

 $j("#labyrinth").animate({
    backgroundPosition: (position.x + 350) + ' ' + (position.y + 350)
}, speed);

但后来我失去了缓动功能。所以，我的问题是，我怎样才能让它在 FF 中工作，并为每个轴提供缓动功能？

【问题讨论】：

标签： jquery firefox jquery-animate background-position

【解决方案1】：

我已经破解了。它适用于 sin 和 cos 函数，但您也可以添加自己的函数。动画是这样调用的：

if ($.browser;.mozilla) {
    $("#labyrinth").animate({
        backgroundPosition: (position.x + 350) + ' ' + (position.y + 350) + ' sin cos'
    }, 3000);
}

同时考虑缓动的动画代码是：

(function($) {
var oldAnim = $.fn.animate;
$.fn.animate = function(prop){
    if('background-position' in prop){
        prop.backgroundPosition = prop['background-position'];
        delete prop['background-position'];
    }
    if('backgroundPosition' in prop){
        prop.backgroundPosition = '('+ prop.backgroundPosition + ')';
    }
    return oldAnim.apply(this, arguments);
};

function toArray(strg){
    var easingX = strg.split(' ')[2];
    var easingY = strg.split(' ')[3];

    strg = strg.replace(/left|top/g,'0px');
    strg = strg.replace(/right|bottom/g,'100%');
    strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
    var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);

    var result = [];
    if (easingX === undefined && easingY === undefined) {
        result = [parseFloat(res[1],10), res[2], parseFloat(res[3],10), res[4]];
        return result;
    }

    result = [parseFloat(res[1],10), res[2], parseFloat(res[3],10), res[4], easingX, easingY.replace(')', '')];
    return result;
}

// easing functions I need
function sin(p) {
    return Math.sin(p * Math.PI / 2);
}
function cos(p) {
    return 1 - Math.cos(p * Math.PI / 2);
}

$.fx.step.backgroundPosition = function(fx) {
    if (!fx.bgPosReady) {
        var start = $.curCSS(fx.elem,'backgroundPosition');

        start = toArray(start);
        fx.start = [start[0],start[2]];

        var end = toArray(fx.end);
        fx.end = [end[0],end[2]];

        // those easings are in fx.end
        fx.easingX = end[4];
        fx.easingY = end[5];

        fx.unit = [end[1],end[3]];
        fx.bgPosReady = true;
    }

    var posX = fx.pos;
    var posY = fx.pos;

    if (fx.easingX !== undefined && fx.easingY !== undefined) {
        if (fx.easingX === 'sin') {
            posX = sin(fx.pos);
        } else if (fx.easingX === 'cos') {
            posX = cos(fx.pos);
        }
        if (fx.easingY === 'sin') {
            posY = sin(fx.pos);
        } else if (fx.easingY === 'cos') {
            posY = cos(fx.pos);
        }
    }

    var x = ((fx.end[0] - fx.start[0]) * posX) + fx.start[0] + fx.unit[0];
    var y = ((fx.end[1] - fx.start[1]) * posY) + fx.start[1] + fx.unit[1];

    fx.elem.style.backgroundPosition = x +' '+ y;
};
})(jQuery);

我刚刚破解了一点，感谢用户https://stackoverflow.com/users/244749/magiconair

【讨论】：