Question

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中使用每个轴的缓动功能？

Answer 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

jquery在firefox中使用缓动函数动画背景位置

1 个答案: