Что такое кадр последовательности класса H5
Один тип H5, с которым мы столкнулись, включает эффект «сильной анимации».Когда дизайн пользовательского интерфейса предоставляет серию материалов кадра последовательности, внешний интерфейс восстанавливает материал кадра последовательности до анимации H5 для отображения.
Несколько способов реализации
gif
При использовании изображений в формате gif для отображения анимации кадра последовательности будут большие файлы изображений, искажения на мобильном терминале и заикание на стороне Android, а иногда они будут воспроизводиться только один раз в случае циклического воспроизведения. Можно использовать только как фрагментарный декоративный материал, не рекомендуется использовать gif для сложных анимаций.
Базовая реализация холста
Изображение кадра последовательности динамически изменяется с помощью метода drawImage на холсте, и холст многократно очищается и перерисовывается в соответствии с временным интервалом, содержимое предыдущего кадра очищается и создается следующий кадр.
Модифицированный метод применим только к простым элементам анимации, и страница не должна быть связана с действиями и анимациями, такими как нажатие для переключения анимаций.В это время из-за частой перерисовки другая обработка js, например таймеры, будет заблокирован.
Похожий случай Новогодний пробег H5.
Метод решения проблемы блокировки: для вычислительных операций, таких как таймеры, вычисления могут выполняться рабочим веб-потоком, а основной поток может быть уведомлен.
vFramePlayer — плагин для воспроизведения изображений в последовательности кадров.
Этот подключаемый модуль представляет собой подключаемый модуль воспроизведения изображений с последовательностью кадров, который поддерживает воспроизведение через canvas\img, может управлять скоростью воспроизведения, циклическим воспроизведением, обратным воспроизведением, задавать циклическое воспроизведение и отслеживать события и другие функции. В случае обработки холста была проведена обработка оптимизации.
При использовании этого плагина следует учитывать, что все изображения кадра последовательности предварительно загружаются заранее и передаются плагину в качестве параметра массива.
CreateJs
CreateJS — это набор модульных библиотек и инструментов, разработанных на основе HTML5. Комбинируя некоторые часто используемые библиотеки, такие как EaselJs, TweenJs и т. д., можно очень быстро разрабатывать анимацию и интерактивные приложения на основе HTML5.
Используйте возможности элементов тегов HTML5 в Adobe Animate для создания интерфейсов, анимаций и библиотек ресурсов, а также напрямую экспортируйте читаемый и эффективный код CreateJS.
ZOë — это приложение AIR, которое экспортирует анимацию SWF в виде таблиц спрайтов EaselJS для холста и CSS. Сохраняйте метки кадров, повторно используйте похожие кадры и многое другое!
Эта библиотека распространена при разработке мини-игр WeChat.
PixiJS
Pixi.js — это механизм 2D-рендеринга HTML5 с открытым исходным кодом, реализованный с использованием WebGL, и неподдерживаемые браузеры будут автоматически сокращены до реализации Canvas. Может помочь отображать интерактивную графику, управлять ею и управлять ею, а также создавать игры. Используя JavaScript и другие технологии HTML5 в сочетании с движком PixiJS, вы можете создавать насыщенную интерактивную графику, кроссплатформенные приложения и игры. Цель PixiJS — предоставить быструю и легкую 2D-библиотеку, совместимую со всеми устройствами. Кроме того, разработчики могут ощутить всю мощь аппаратного ускорения, даже не зная WebGL.
PixiJS может самостоятельно устанавливать и управлять всеми элементами анимации на странице, а также добавлять события, чтобы мы могли реализовать соответствующее отображение и взаимодействие в соответствии с нашими потребностями.
Основное использование:
создать сцену;
Создайте сцену и рендерер в сцене;
Элементы на экране реализованы путем создания спрайтов;
После этого дисплей и воспроизведение анимации;
Для материала кадра последовательности мы можем создать изображение спрайта (CSS Sprite, который представляет собой технологию слияния изображений CSS. Этот метод заключается в объединении небольших значков и фоновых изображений в одно изображение, а затем с помощью позиционирования фона CSS для отображения того, что необходимо отобразить. . Раздел изображения), чтобы уменьшить запросы на загрузку ресурсов, рекомендуемые здесь.TexturepackerИнструмент является вспомогательным артефактом, разработанным PixiJS.
На карту спрайтов можно поместить не только кадр последовательности, но и другие материалы в соответствии с реальной ситуацией, что может эффективно уменьшить количество запросов ресурсов страницы.
Texturepacker может генерировать материал спрайтов и связанные файлы json, необходимые для PixiJS, в соответствии с выбранной соответствующей структурой, что удобно для разработки PixiJ. Загрузите материал с помощью функции загрузчика, чтобы получить информацию о ресурсах.
Случай:
Кредитная лотерея Wechat H5(Рисунок и световой эффект в нем)
Небольшая анимационная реализация сцены H5 реального боя PixiJs
Преимущества: для дизайна пользовательского интерфейса удобно напрямую выводить материал кадра последовательности в соответствии с проектной ситуацией, а эффект анимации можно полностью восстановить с помощью разработки интерфейса.
Phaser
Phaser – это быстрая, бесплатная игровая среда HTML5 с открытым исходным кодом. Она поддерживает режимы рендеринга WebGL и Canvas и может работать в любой среде веб-браузера. Игры можно конвертировать в нативные приложения, поддерживаемые iOS и Android, с помощью сторонних инструментов, что позволяет разрабатывать с помощью JavaScript и TypeScript. Подобно PixiJS, упомянутому выше. Пожалуйста, обратитесь к конкретному методу использования самостоятельно, это только для ознакомления.
Egret
Egret — это набор решений для разработки игр HTML5, продукты включают Egret Engine, Egret Wing, EgretVS, Res Depot, Texture Merger, TS Conversion, Egret Feather, Egret Inspector и т. д.
Что такое зеркало
Один выстрел до конца означает, что в съемке нет склейки, и используются определенные навыки для выполнения работы одним кадром.
Проявления
- Картинка в картинке (Пример: NetEase — «Биография развлечений»,Панорамирование при масштабировании)
- Путешествие во времени (например: Tmall — «Приглашение к путешествию во времени и пространстве»,увеличить в центре)
- Анимации прокрутки (например: NetEase — «Форма любви»,Перевод в основном во время игры в другие анимации)
- Видео (вроде бы ни о чем... не относящееся к этой статье)
Реализация
Технические требования
- Рисование картинок: Здесь мы обычно используем библиотеки на основе холста, которые имеют лучшую производительность и более удобны для достижения эффектов. (как указано вышеCreateJs, PixiJs, ЦапляЖдать)
- Добавьте анимацию: к ним относятся переходы, анимация кадров, поэтому требуется библиотека анимации. (Такие какTweenMaxЖдать)
- Контроль прогресса: чтобы управлять перемоткой вперед, назад, паузой и т. д. всего H5 с помощью пользовательских операций, нам понадобится библиотека, связанная с контролем прогресса. (Такие какTimelineMax)
- Операция пользователя: H5 с одним зеркалом до конца обычно требует от пользователя операции «воспроизведения», нажатия или скольжения, нажатие и удержание относительно просто, просто используйте собственные события для достижения, скольжение относительно сложное, включая демпфирующее движение, поэтому скольжение- требуется связанное движение библиотека. (Такие какAlloyTouchЖдать)
Реализовать основной процесс
- Создайте сцену с помощью Pixi и добавьте ее в контейнер DOM, который вы хотите добавить.
- Загрузите спрайты с помощью Pixi.loader.
- Рисуйте такие элементы, как спрайты, фон и текст.
- Используйте TimelineMax для создания общей временной шкалы, изначально для параметра paused установлено значение true, вы можете установить длину всей временной шкалы на 1.
- Создайте анимацию перехода с помощью TweenMax, а затем добавьте TweenMax на временную шкалу. Например, если продолжительность составляет 10 %, установите для нее значение 0,1. Если анимация начинается с прокрутки до 30 %, установите задержку на 0,3.
- Создайте монитор прокрутки с помощью AlloyTouch и установите высоту прокрутки, например 1000.
- Слушайте событие изменения AlloyTouch и используйте текущее значение прокрутки/высоту прокрутки, чтобы получить ход текущей страницы.
- Вызовите метод seek общей временной шкалы, чтобы найти место, где находится ход текущей страницы, что можно просто понять как переключение ползунка индикатора выполнения видеоплеера.
- На этом этапе вы можете скользить по операциям пользователя, управлять элементами страницы воспроизведения анимации, отступили.
Суммировать
Благодаря описанному выше простому объединению кадров последовательности и одного кадра до конца он может не только восстановить процесс анимации, заданный внешним дизайном, но и помочь в разработке связанных типов H5 и удовлетворить разработку дополнительных требований к сцене.
Справочные ресурсы:
От нуля к единице: реализация универсального одного зеркала до конца H5