Мы сделали небольшой пример,
в котором можно посмотреть, как выглядит плавный сдвиг с субпиксельной
точностью и антиалиасингом, и как выглядит тот же сдвиг без этого
эффекта.
Как это сделано?
Это сделано при помощи спрайтов, а также «умного» уменьшения исходного изображения. Теперь, по порядку.
Во-первых, мы взяли большое изображение машинки:
Затем, подчистили его от ненужного фона:
Дальше мы расположили 4 одинаковых машинки с шагом в 600 точек в одном большом файле (2400х260 точек).
После этого, мы сдвинули каждую копию машинки на одну точку,
относительно предыдущего кадра. То есть, вторую машинку — на точку,
третью — на две, а четвёртую — на все три. Теперь на нашем спрайте есть
машинка, которая преодолевает расстояние в 4 точки за 4 кадра.
Осталось последнее действие, заставить машинку проезжать за 4 кадра
одну точку и делать сделать это максимально плавно. Для этого мы
уменьшаем картинку в 4 раза, не забыв включить опцию антиалиасинга при
уменьшении в вашем редакторе, и получаем картинку такого вида (которую,
к слову, мы и используем в нашем примере):
Ниже — картинка, на которой в увеличении видно, как машинка проезжает сквозь одну точку:
Дальше дело за малым: как использовать этот спрайт? Самым простым
способом: во время движения картинки, определять дробную часть и
использовать её для выбора нужного кадра. Поскольку вебовские средства
не позволяют использовать неточное позиционирование, мы распологаем
спрайт ровно по нужной нам координате, например, при позиции X=15,25 мы
размещаем картинку на 15 точке по оси X, а дробную часть переводим в
номер спрайта, в нашем случае это будет второй спрайт.
В принципе, по аналогичной схеме можно сделать движение и по двум осям,
а также использовать этот метод для плавной анимации фона, например для
css анимации фонов у кастомных кнопок или других схожих js эффектов.
Каталог статей
