Создание анимации из спрайта?

Question

Я видел Sublime Text website у них есть анимация, которая, кажется, использует кучу «спрайтов». Как изображение, как это:

стать анимация? Я сделал несколько поисков Google, и большинство из них (анимация) - это только flattened images, которые становятся анимированными изображениями like this.

Answer 1

Джон Скиннер (да, из Sublime Text), писал в блоге о том, как именно он оживил возвышенный текст домашнюю: http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html

Он говорит, что он сделал серию снимков экрана, сохраненных в формате .png.

Затем он закодировал png в delta-лист (лист спрайтов, который содержит только пиксельные различия между последним фреймом и текущим фреймом) - довольно приятно и эффективно!

Он даже дает вам код для кодера, который строит дельта-лист (питон основе): https://github.com/sublimehq/anim_encoder

Answer 2

Вы можете проверить исходный код второй ссылки, которую вы опубликовали. Код хорошо документирован. Вот общее объяснение:

1. У вас есть элемент холста, на котором изображена анимация, и изображение спрайта, содержащее все «кадры» анимации.
2. У вас есть функция «петля», который вызывается на заданный интервал времени (в нашем случае 1000/30, который равен 33ms)
3. Функции очищает холст элемент
4. Функция устанавливает область спрайта imgae. Это наш «кадр».
5. Функция рисует рассчитанную область спрайта на холсте элемента

Я бы идти об этом по-другому, хотя. По соображениям совместимости лучше реализовать такой вид анимации с помощью простого div. Просто установите образ спрайта в качестве фонового изображения. Затем создайте тот же цикл, который вычисляет значения «background-position», которые соответствуют новому кадру.