Pull to refresh

Сверхплавное передвижение объектов

Reading time 2 min
Views 7K
Иногда у веб-разработчиков возникает задача, которая требует плавного движения объекта по экрану. Это может быть строка загрузки, какой-то спрайт (например, машинки на клавогонках) или что-то ещё. Проблема возникает, когда сдвиг даже на одну точку кажется слишком резким и портит общее ощущение от происходящего. Как этого избежать? Использовать приёмы антиалиасинга.

Мы сделали небольшой пример (а затем и ещё один с зацикленным фоном), в котором можно посмотреть, как выглядит плавный сдвиг с субпиксельной точностью и антиалиасингом, и как выглядит тот же сдвиг без этого эффекта.

Как это сделано?

Это сделано при помощи спрайтов, а также «умного» уменьшения исходного изображения. Теперь, по порядку.

Во-первых, мы взяли большое изображение машинки:


Затем, подчистили его от ненужного фона:


Дальше мы расположили 4 одинаковых машинки с шагом в 600 точек в одном большом файле (2400х260 точек).

После этого, мы сдвинули каждую копию машинки на одну точку, относительно предыдущего кадра. То есть, вторую машинку — на точку, третью — на две, а четвёртую — на все три. Теперь на нашем спрайте есть машинка, которая преодолевает расстояние в 4 точки за 4 кадра.

Осталось последнее действие, заставить машинку проезжать за 4 кадра одну точку и сделать это максимально плавно. Для этого мы уменьшаем картинку в 4 раза, не забыв включить опцию антиалиасинга при уменьшении в вашем редакторе, и получаем картинку такого вида (которую, к слову, мы и используем в нашем примере):


Ниже — картинка, на которой в увеличении видно, как машинка проезжает сквозь одну точку:


Дальше дело за малым: как использовать этот спрайт? Самым простым способом: во время движения картинки, определять дробную часть и использовать её для выбора нужного кадра. Поскольку вебовские средства не позволяют использовать неточное позиционирование, мы распологаем спрайт ровно по нужной нам координате, например, при позиции X=15,25 мы размещаем картинку на 15 точке по оси X, а дробную часть переводим в номер спрайта, в нашем случае это будет второй спрайт.

В принципе, по аналогичной схеме можно сделать движение и по двум осям, а также использовать этот метод для плавной анимации фона, например для css анимации фонов у кастомных кнопок или других схожих js эффектов.
Tags:
Hubs:
+207
Comments 103
Comments Comments 103

Articles