В JS с такой анимацией дела обстоят очень плачевно. Во-первых, движение происходит целочисленно, где минимальной величиной является 1px. Во-вторых, движение от пикселя к пикселю происходит резко, что особенно заметно при движении по диагонали, когда объект движется ступеньками.
До прихода CSS3 это было реальной проблемой, сейчас же для этих целей больше всего подходит transform.
Анимация через transform или через тот же «left, top» имеет два координально отличающихся алгоритма. При «top, left» происходит замещение значения на новое, а при transform значения складываются, что создает более плавный эффект. Подробнее об алгоритме можно прочитать здесь.
Итак, после скучной теории перейдем к практике. Имеется мячик, который крутится вокруг своей оси и вокруг большей окружности.
Итак, пишем функцию:
$(document).ready(function() {
var i = 0;
setInterval(function () {
realAnim(i);
i = i+0.1;
}, 10);
})
function realAnim(n) {
var coefficient=n/40,
length = 20,
distance=length*(Math.sin(coefficient)+Math.cos(coefficient)),
posX=distance*Math.cos(coefficient),
posY=distance*Math.sin(coefficient),
value="translate("+posX+"%, "+posY+"%) rotate("+coefficient*-length+"deg)";
$(".ball").css({
"-webkit-transform":value,
"-moz-transform":value,
"-ms-transform":value,
"-o-transform":value,
transform:value
});
value="rotate("+coefficient*-length+"deg)";
$(".ball1").css({
"-webkit-transform":value,
"-moz-transform":value,
"-ms-transform":value,
"-o-transform":value,
transform:value,
"left":posX+"%",
"top":posY+"%"
});
}
В ready мы запустили интервал, который раз в 10ms будет увеличивать значение движения i на 0.1 и передавать её функцию realAnim.
Главный параметр — coefficient — нужен для калибровки движения. Изменяя его, можно добиться необходимой скорости поворота вокруг своей оси и вокруг окружности.
Переметр length — расстояние, на которое будет смещаться объект.
Параметры distance, posX и posY описывают движение по окружности.
В value собирает все наши выходные параметр и в.css() передаем в объект.
Для примера в.ball движение происходит через transform, а в.ball1 по старинке, через «top, left». Как говорится, почувствуйте разницу.
Пример работы скрипта можно посмотреть здесь.
Теперь об обратной стороне медали. CSS3 не поддерживается старыми браузерами, так что в ie7-8 будет работать только ball1 без вращения. В IE9, Chrome, Safari работает сверхгладко. А вот Opera подкачала. Скачкообразная анимация присутствет в двух примерах.
Как бы послесловие
CSS3 пришёл и довольно плотно обосновался среди нас. Как по мне, то им можно смело пользоваться, но только подставляя костыли, как в этом примере.
На этом всё, кода вам без багов!
Автор записи: Евгений Булгаков
