Loading GIF & APNGLoading animations
Icons search & generatorFree icons
AJAX loaders in pure CSSLoading animations (CSS)
CSS objects generatorCSS objects generator
Free icons libraryFree icons library

Руководство пользователя - как создавать анимированные изображения GIF и APNG

Ниже представлен список уроков объясняющих как работать с анимированными и статичными изображениями используя инструменты Анимайзера:



Анимайзер - специальная форма для редактирования анимированных изображений

На главной странице Анимайзера вам предоставлена форма для загрузки изображений. Нажмите на кнопку "Выбрать" и выберите все изображения, которые хотите включить в ваше анимированное изображение. После выбора изображений, кнопка "Перейти к редактору" активируется если выбраны только изображения (в противном случае будет показана ошибка):

Выбор изображений для анимирования

Выбрав все файлы, нажмите на кнопку "Перейти к редактору" и дождитесь пока все картинки загрузятся. После этого вы увидите форму Анимайзера слева и предварительный просмотр анимации справа с разными опциями для скачивания. Форма Анимайзера содержит следующие средства для редактирования анимации:

Placing additional frames into animated image Чтобы добавить изображения к существующей анимации, нажмите на кнопку "Загрузить" в поле "Добавить кадры", выберите изображения и дождитесь пока они загрузятся.
Выбор типа изображения - GIF или PNG Предоставляет возможность выбрать тип изображения - анимированное GIF или APNG. Заметьте, что не все браузеры поддерживают формат анимированных PNG. Если же вам все таки нужна анимация в формате PNG и чтобы она правильно отображалась во всех браузерах, можете использовать дополнительные возможности при скачивании - "скачать в виде спрайтов" и "Анимировать JavaScript`ом" или "Анимировать Canvas`ом".

Изображение снизу позволяет вам определить поддерживает ли ваш браузер APNG:

Определяет поддерживает ли ваш браузер анимированные PNG

Заметка: Формат .GIF поддерживает или полную прозрачность или полную непрозрачность. Соответственно, когда вы выбираете формат GIF и устанавливаете прозрачный фон, вам все равно предоставляется функция установки цвета фона, который заполнит фон всех полупрозрачных пикселей изображения. Пример:

Разница между GIF и APNG
Сделать фон анимированного изображения прозрачным Делает фон анимации прозрачным.

Заметка: Учтите что при выборе формата GIF все полупрозрачные пиксели будут находиться над выбранным цветом фона.
Сохранять цвета Позволяет создавать подргузчики с цветами установленными по умолчанию.

Заметка: Опции "Отражать фон" и "Цвет переднего плана" становятся неактивными при использовании этой функции
Цвет переднего плана Цвет закрашивания анимации (работает по алгоритму раскраски - colorize)
Colorize the image Цвет фона анимированного изображения. Все прозрачные пиксели заполняются выбранным цветом.
Скорость анимации Интервал времени между переходами с кадра на кадр. Чем ближе синяя точка к плюсу, тем быстрее анимация и наоборот. Вы также можете устанавливать интервалы времени после каждого кадра по отдельности инструментом "Настройка кадров".
Размер анимированного изображения в пикселях Ширина и высота подгрузчика в пикселях. По умолчанию выбирается размер лучшего качества максимального размера каждого выбранного из списка изображения.
Чтобы размеры изменялись пропорционально, отметьте опцию "Соблюдать пропорции".
Если хотите вернуть исходные размеры изображения нажмите на ссылку "сбросить размеры"

Если вам надо чтобы все изображения внутри анимации соблюдали оригинальные пропорции или растянуто на все изображение используйте опцию "Соблюдать все пропорции" в "Дополнительных настройках"
Advanced settings Открывает опции дополнительных возможностей для анимаций
Настройка кадров Открывает специальный интерфейс для управления кадрами. Этот интерфейс можно также открыть нажав на темну линию с надписью "Кадры анимации" внизу страницы:

Настройка кадров анимации

В окне настроек кадров вы можете:
  • - Активировать и деактивировать кадр - отметьте флажок "Включить" чтобы включить соответственный кадр в анимацию
  • - Сменить позицию кадра - нажмите на кадр и переместите его влево или вправо в нужную позицию
  • - Установить промежуток времени между кадрами - в выпадающем списке вы можете выбрать нужный интервал или вписать свой выбрав "другой"
Соблюдать все пропорции Если вы загружаете изображения разных пропрорций и установите "Да" на инструменте "Соблюдать все пропорции", изображение будет растянуто внутри анимированного изображения, но будет соблюдать свои оригинальные пропорции. Если же установлено на "Нет", изображение будет полностью растянуто по всем краям анимации.
Инвертировать цвета Инвертирует цвета изображения по схеме RGB. Например белый превращается в черный, красный в голубой и т.п.. Пример:
Пример инвертирования цветов
Перевернуть изображение вертикально и/или горизонтально Переворачивает изображение вертикально и/или горизонтально.

Заметьте что некоторые подгрузчики не будут меняться при использовании этой функции, т.к. они могут быть абсолютно симметричны относительно центра изображения
Обратная анимация Расставляет последовательность кадров в обратном порядке
Количество проигрываний Количество раз проигрывания анимации. При вводе нуля (0) анимация будет прогрываться бесконечно

Область предварительного просмотра


В этой области отображается предварительный просмотр изображения

Предварительный просмотр анимированного изображения


Этот инструмент позволяет выбрать 3 типа скачивания:
  • - Скачать в виде спрайтов - Позволяет скачать анимированное изображение в виде спрайтов (одно неанимированное изображение, кадры которого вставлены одно за другим в ряд)
  • - Анимировать JavaScript`ом - Позволяет анимировать изображение в виде спрайтов при помощи скрипта JavaScript
  • - Анимировать Canvas`ом - Позволяет анимировать изображение при помощи скрипта JavaScript и технологии Canvas

Close