С непрерывным развитием Интернета страницы H5 становятся все более и более сложными в качестве слоя представления для прямого взаимодействия с пользователями, а формы представления становятся все более и более многочисленными, что также требует, чтобы страницы H5 имели больше шаблонов и анимационных эффектов. . Какими способами можно добиться анимационных эффектов во внешнем интерфейсе, примерно следующим образом:
1. GIF-изображения
Просто вставьте изображение прямо в изображение GIF, это очень просто в использовании, но иногда возникает проблема с изображением GIF, которую невозможно контролировать, например, обычное явление мерцания изображения GIF.
Во-вторых, кадр последовательности
По сути, последовательность кадров одного кадра представляет собой разворот GIF, представляющий собой реализацию CSS-анимации в сочетании.
Конкретная реализация выглядит следующим образом:
Основное использование - это пошаговая функция анимации, и совместимость по-прежнему очень хорошая.
При разработке H5 могут быть небольшие дрожания из-за разных разрешений мобильного телефона в кадре последовательности, которые можно решить, вложив DOM в SVG.
3. css анимация
Свойство анимации используется для указания одного или нескольких наборов анимаций, разделенных запятыми.
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
@keyframes slidein {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
timing-function
Свойство animation-timing-function определяет частоту, с которой анимации CSS выполняются во время каждого цикла анимации. Возможные значения — один или несколько.
Для анимации по ключевым кадрам функция синхронизации действует на цикл ключевых кадров, а не на весь цикл анимации, то есть от начала ключевого кадра до конца ключевого кадра.
Существуют следующие типы функций времени:
ease-in; //加速
ease-out;//减速
ease-in-out;//先加速后减速
linear;//匀速
step-start;//等同于steps(1,start)
step-end;//等同于steps(1, end)
cubic-bezier(0.1, 0.7, 1.0, 0.1);//贝塞尔曲线
steps(number, end);//从number位置开始，逐步执行
Функция шагов, которую мы использовали в приведенной выше анимации последовательности кадров, на самом деле является функцией анимации, которая разбита на n шагов и выполняется шаг за шагом.
4. Анимация Лотти
LottieЭто анимационная структура, разработанная Airbnb и поддерживаемая на различных платформах, таких как Window, Android, iOS, Web и т. д.
На стороне Интернета он в основном основан на SVG или Canvas и использует JS для разработки реализации анимации.Из-за сложного пути при ежедневной разработке обычно необходимо сотрудничать с дизайнером пользовательского интерфейса для вывода соответствующего файла пути анимации ( json или js) для рендеринга.
Конкретный метод вызова выглядит следующим образом, где data — это файл конфигурации анимации.
Описание параметра:
5. WebGL и холст
Когда сложность анимации страницы высока, использование dom для отрисовки может вызвать проблемы с производительностью, и экран зависнет.В настоящее время для рендеринга можно рассмотреть WebGL или Canvas.
WebGL (Written Web Graphics Library) — это стандарт 3D-рисования, который позволяет сочетать JavaScript и OpenGL ES 2.0.
Добавляя привязку JavaScript к OpenGL ES 2.0, WebGL может обеспечить аппаратно-ускоренный 3D-рендеринг для HTML5 Canvas, чтобы веб-разработчики могли использовать системную видеокарту для более плавного отображения 3D-сцен и моделей в браузере и создания сложной навигации и данных. визуализация.
Конечно, 3D можно визуализировать только с помощью WebGL.Здесь мы сравним ситуацию с WebGL2D и Canvas 2D.
1. Сравнение производительности
Из результатов видно, что когда нужно отрисовывать большое количество задач, производительность WebGL далеко превосходит Canvas 2D Api, которая достигала числа в 10 раз.
2. Совместимость
(1) вебGL
(2) холст
В обычных условиях, если браузер не поддерживает WebGL, для его обработки необходимо перейти на Canvas.
Как определить, поддерживается ли WebGL?
canvas.getContext("экспериментальный-webgl")
Если возвращаемый результат не определен, это означает, что он не поддерживается, в противном случае можно использовать WebGL.
3. Способ вызова
Нарисуйте простой прямоугольник с красной заливкой внутри.
Как писать с помощью Canvas API:
Написание с использованием webGL:
6. Движок игровой анимации
Когда наша анимационная функция более сложная, стоимость разработки при непосредственном использовании webGL или canvas API высока, поэтому мы можем выбрать для разработки игровой движок, подходящий для текущей сцены.
Анимации можно разделить по размерам. 3D-анимации обычно реализуются с использованием движков рендеринга, таких как Three.js или других игровых движков. 2D-анимации также имеют отличную поддержку движков.
Ниже приведено горизонтальное сравнение каждого движка игровой анимации:
1. Игровые движки, поддерживаемые 2D, 3D и VR.
(1)Egret
Движок egret — это игровой движок корпоративного уровня с поддержкой команды. Egret проделала хорошую работу по поддержке рабочего процесса, от написания кода Wing до интеграции ресурсов ResDepot и TextureMerger, до отладки Inspector и, наконец, до собственной упаковки (поддерживающей упаковку APP) для каждого процесса разработки игры. Ссылки в основном поддерживаются инструменты.
На официальном сайте есть много примеров и руководств. Движок egret поддерживает WebAssembly, что является еще одной важной вехой в улучшении производительности.
(Источник изображения:Официальный сайт двигателя цапли)
(2)LayaAir
Поддержка адаптивного режима Canvas и WebGL. Поддержка трех языков разработки ActionScript3, TypeScript, JavaScript, подходящих для разработки продуктов 2D, 3D, VR.
Производительность сравнима с родным приложением, а HTML5, приложение (Android и iOS), мини-игры WeChat и игры QQ play разрабатываются и выпускаются одновременно.
2. 2D, 3D игровой движок
(1)Three.js
(Источник изображения:Three.js Официальный сайт)
Официальное позиционирование Three.js — это не игровой движок, а JS 3D-библиотека. Three.js более склонен к визуальному представлению на дисплее, и некоторые пользователи напрямую используют Three.js для разработки игр H5.
(2)Pixi.js
Вообще говоря, скорость рендеринга WebGL будет выше, чем у Canvas, что определяется путями отрисовки обоих. Самая большая особенность Pixi заключается в том, что Pixi имеет полную поддержку WebGL, но не требует, чтобы разработчики овладевали знаниями, связанными с WebGL, и при необходимости легко возвращались к Canvas.
По сравнению со многими аналогичными продуктами, его способность рендеринга относительно мощная. Однако у Pixi есть и свои недостатки. Pixi относительно слабо поддерживает анимацию. В реальной разработке часто необходимо вводить дополнительные библиотеки анимации, такие как GSAP.
(3)Phaser
Phaser напрямую инкапсулирует Pixi с точки зрения рендеринга; с точки зрения архитектуры Phaser включает в себя 3 физических движка (Arcade Physics, Ninja, p2.js), предоставляя систему частиц, анимацию, решения для предварительной загрузки и адаптации устройства; с точки зрения совместимости Phaser Акцент делается на мобильные браузеры, с точки зрения API Phaser может реализовать богатые игровые функции и подходит для разработки игр высокой сложности.
(4)CreateJs
(Источник изображения:Официальный сайт CreateJs)
CreateJS официально предоставляет TweenJS для поддержки разработки анимации, а также обеспечивает поддержку звука и предварительной загрузки через SoundJS и PreLoadJS, чего достаточно для основных функций игр H5. Что касается совместимости, CreateJS поддерживает практически все браузеры на ПК и мобильных устройствах. Кроме того, CreateJS также поддерживает разработку и экспорт игр H5, созданных с помощью CreateJS с помощью flash CC.
(5)Hilo
Hilo — это проект с открытым исходным кодом, запущенный командой Alibaba. Он включает Hilo.js (2D) и Hilo3D, которые поддерживают модульную разработку и предоставляют упакованные версии различных модульных парадигм и кросс-терминальных решений. Hilo.js подходит для разработки небольших маркетинговых игры. . Его объем также относительно небольшой, всего около 70 КБ.
Основные характеристики:
- Несколько методов рендеринга, предоставляющих DOM, Canvas, Flash, WebGL и другие схемы рендеринга.
- Минималистское ядро: основные модули Hilo чрезвычайно оптимизированы, в них сохранены самые необходимые модули для движка 2D-игры, но используется модульное управление.
- Поддержка физического движка - Chipmunk, поддержка саморасширяющейся реализации физики, поддержка скелетной анимации - DragonBones.
- Богатые кейсы: поддержите Tmall, раздайте Taobao для многих масштабных и ежедневных мероприятий, таких как Double Eleven, промо-акции в середине года и т. д. Репрезентативные продукты, такие как Carnival City.
Случай:
(Источник изображения:Hilo Github)
Официальные примеры:
(Источник изображения:Hilo Github)
Игровой движок Hilo.js в основном отвечает потребностям разработки ежедневной 2D-анимации. Он имеет хорошую совместимость и поддерживает методы рендеринга 4. Как правило, выбирается холст.После практики рендеринг android4.4 не вызывает проблем, и операция немного застревает. Библиотека компонентов очень легкая, hilo-standalone.min.js весит всего 70 КБ, по сравнению с Phaser (946 КБ) hilo чрезвычайно удобен с точки зрения размера кода.
7. Ссылки
Автор: Луо Ран