Анимация градиентов с помощью jQuery - PullRequest
Новая
       12

Анимация градиентов с помощью jQuery

3 голосов
/ 23 сентября 2011

Это будет мой список вопросов сегодня. Можно ли анимировать радиальные градиенты в jQuery (используя .animate), если да, то как?

* ** 1003 тысяча два * Пример 
background: -webkit-gradient(
    radial, 50% 50% ,0, 50% 50%, 70, from(rgb(25,25,25)), to(rgb(50,50,50))
);

1 Ответ

2 голосов
/ 24 сентября 2011

Вы не можете сделать это по умолчанию в jQuery, вы даже не можете анимировать плоские цвета без соответствующего плагина.

Анимация градиентов сложна из-за различий в синтаксисе между браузерами.Я написал плагин для очень конкретного случая, который может быть полезен для вас.Это для линейного градиента, но вы можете настроить его для радиального. 

jQuery.fx.step.gradient = function(fx) {
    if (fx.state == 0) { //On the start iteration, convert the colors to arrays for calculation.
        fx.start = fx.elem.style.background.match(/\d+/g); //Parse original state for numbers.  Tougher because radial gradients have more of them
        fx.start[0] = parseInt(fx.start[0]);
        fx.start[1] = parseInt(fx.start[1]);
        fx.start[2] = parseInt(fx.start[2]);
        fx.end = fx.end.match(/\d+/g);
        fx.end[0] = parseInt(fx.end[0]);
        fx.end[1] = parseInt(fx.end[1]);
        fx.end[2] = parseInt(fx.end[2]);
    }

    fx.elem.style.background = "-webkit-linear-gradient(rgb(" + [
        Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
        Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
        Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
        ].join(",") + ")," + "rgb(0,0,0))";
}

$(this).animate({"gradient": "rgb(0, 255, 0)"});

DEMO.

Вы, вероятно, хотите создать две функции, одну для внутреннего цвета (jQuery.fx.step.innerColor) и один для внешнего (jQuery.fx.step.outerColor), который будет называться так: 

$(this).animate({"innerColor": "rgb(25,25,25)",
                 "outerColor": "rgb(50,50,50)"});
...