Создайте анимацию целевой страницы H5 с помощью Create.js и Adobe Animate CC

1. Предпосылки

На мобильном терминале использование технологии H5 может реализовать разработку таких приложений, как микрожурналы, приглашения WeChat, мини-игры H5 и др. В этой статье будет представлен метод объединения Create.js и Adobe Animate CC для создавать целевые страницы H5.

CreateJS — это модульная библиотека и инструмент, разработанный на основе H5, с помощью которого можно быстро разрабатывать игры, анимацию и интерактивные приложения на основе HTML5.

ADOBE ANIMATE Инструменты для создания интерактивной векторной и растровой анимации для игр, приложений и Интернета

Благодаря сочетанию этих двух факторов он не только в полной мере использует удобную логику управления и общую структуру платформы Create.js, но также в полной мере применяет гибкость производства анимации Animate, так что дизайнеры и инженеры по интерфейсу могут быть разделены, но можно работать параллельно.
Прежде чем начать, предварительно просмотрите эффект:

Примечание. В примерах кода, упомянутых в этой статье, используетсяes5развивать.

Во-вторых, рамка страницы

1. Структура страницы

После анализа спроса с точки зрения многоуровневой структуры страницы структура страницы должна быть многоуровневой, сверху вниз, что является слоями ЗАГРУЗКИ, которые используются для отображения процента загрузки каждой анимации. , слой управления включает в себя кнопки, музыкальные переключатели, управление жестами вверх и вниз и т. д. Слой сцены используется для загрузки анимаций, используемых в каждой сцене.Благодаря этой структуре основной основной момент заключается в том, что это требование имеет 8 сцен анимации, каждая анимация Сцена, занимаемая соотношением байтов, относительно велика, поэтому ее нужно подгружать по требованию.

2. Структура каталогов

С точки зрения разделения структуры каталогов, с точки зрения повторного использования повторно используемый контент, такой как CORE, класс загрузки анимации управления и класс взаимодействия, размещается в каталоге движка сверху вниз:

configs: хранить базовую конфигурацию анимации
двигатель: сохранить двигатель рамы
изображения: ресурсы анимации, созданные Animate CC.
звуки: звуковые ресурсы

3. ЗАГРУЗКА слоя

Слой Loading предназначен чисто для отображения, получения внешнего прогресса, сцена начинает загружаться и отображаться, и исчезает при загрузке сцены. Плавающий в верхней части страницы, отображаемый с использованием технологии, отличной от CANVAS.

Плюс центральное вращение CSS3-анимация

body {
            overflow:hidden;
        }
        #_preload_div_{
            position:absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
        }
        #animation_container, #_preload_div_ .mask {
            position:absolute;
            margin:auto;
            display: inline-block; 
            height:150px; 
            width: 120px; 
            vertical-align:middle;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            text-align: center;
        }
        #_preload_div_ .img{
            vertical-align: middle; 
            max-height: 100%
        }
    
        #_preload_div_ .img img{
            animation: rotates 2s linear infinite;
            -webkit-animation: rotates 2s linear infinite;
        }
    
        #_preload_div_ span{
            display: inline-block; 
            margin-top: -5px;
            vertical-align: middle;
            color: #fff;
            font-size: 18px;
        }
        
        #LXB_CONTAINER_SHOW {
            display: none !important;
        }

        @keyframes rotates {
            0%{
                transform: rotate(0);
                -webkit-transform: rotate(0);
            }
    
            100%{
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            }
        }

4. Уровень управления

Начиная с уровня управления, эффект анимации управляется движком Create.js.

привязать контейнер
вызов инициализации
сцена загрузки
Запуск и окончание обработки сцены
Внедрить анимацию и логику управления для каждой сцены

5. Слой сцены

Слой сцены используется для управления всей комбинацией логики взаимодействия анимации H5, которая реализует:

Регистрация события сцены субанимации

Здесь реализовано событие завершения воспроизведения анимации, отправленное каждой вспомогательной сценой анимации.После получения события основная сцена может выполнять связанные операции, такие как загрузка следующей сцены, удаление текущей сцены и т.д.
Логика сцены загрузки вверх и вниз
Повторное использование и уничтожение ресурсов сцены

Основная логика мультиплексирования заключается в том, чтобы добавить загруженные ресурсы в основную сцену и сохранить копию на карту, а затем использовать идентификатор сцены для получения следующего повторного использования, которое передается в Create.jsremoveChild()Выход за пределы сцены не потребляет ресурсов процессора.

6. Поддержка анимации жестов

Необходимо ввести анимацию жестовcreatejs.Tweenи правильноpressup pressmove mousedownКомплексное суждение о трех событиях. Основная идея: вmousedownКогда точка координат записана, определите направление оси YpressupНезависимо от того, больше ли записанная координатная точка, чем исходная точка, большее значение означает скольжение вверх, в противном случае — скольжение вниз.

7. Звуковое управление

Create.js разработан с учетом внешних ресурсов, таких как музыка и видео, которые могут иметь большую емкость, поэтому существует соответствующий API для асинхронной загрузки. Цель состоит в том, чтобы уменьшить количество байтов основной программы.Управление звуком здесь в основном включает:

Фоновая музыка, воспроизведение петли необходимо рассмотреть возможность добавления параметров петли{interrupt: createjs.Sound.INTERRUPT_ANY, loop: -1, volume: 0.5}
Звуковые эффекты, возможность мультиплексирования, загрузка по запросу и повторное использование исходного загруженного контента для вторичного использования.

8. Обмен в WeChat

Обычные запросы XHR используютnew createjs.LoadQueue(true)Следует отметить, что асинхронный метод вызываетnew createjs.LoadItem().setПосле загрузки страницы необходимо сначала получить подпись, а затем установить метод, используемый для использования JSDK. В Интернете есть соответствующие руководства. Если вы хотите реализовать подпись на стороне сервера самостоятельно, вы можете обратиться к эта статья:
[На основе пакета API обмена WeChat egg.js]

В то же время общий адрес должен иметь соответствующийencodeURIComponent

3. Производство анимации

Как упоминалось ранее, использование этого метода позволяет дизайнерам и фронтенд-инженерам работать параллельно, например, предварительно можно определить структуру шаблона FLA-файла для каждой анимации, а именно:

начать действие кадра
действие в конце кадра
Остальное передается дизайнеру для творческого творчества, поэтому готовый эскиз может выглядеть так:
Такие сложные анимации, как правило, трудно реализовать с помощью CSS3, а эффективность несопоставима с эффективностью таких творческих инструментов, как Animate.Ключевым моментом упомянутого выше начала и конца является то, что FLA-анимация может взаимодействовать с ним после загрузки с помощью Create. .js Получать события начала и окончания трансляции.

3. Отпустите

1. Объединить с egg.js в качестве статического ресурса

Созданную анимацию необходимо использовать в каталоге статических ресурсов на сервере.Здесь указана конфигурация по умолчанию для egg.js.publicСправочник, чтобы внедрить обмен WeChat, вам нужен сервер, с развитием технологии node.js общие услуги миниатюризации могут быть полностью обработаны внешним интерфейсом.

2. Расширяемая конфигурация

Из-за введения сервера будет ситуация с относительным путем, поэтому в программу добавляется конфигурация префикса, и эти конфигурации извлекаются и помещаются в отдельные файлы. Например:

Каталог ресурсов статического изображения
каталог музыкальных ресурсов
Избегайте кэшированных номеров версий
Затем вы можете использовать его следующим образом:

4. Резюме

Из приведенного выше введения мы можем обнаружить, что это комбинация комплексных инструментов.Может быть, у вас возникнет вопрос, разве анимация H5 и CSS3 не являются стандартом?
Я думаю, что это верно в большинстве случаев, но в сложных анимационных сценах работа по созданию анимации, такая как Animate, пригодится, когда спрос смещен в сторону эффективности производства и сцен с высоким уменьшением. Конечно, он использует анимацию Canvas, мы можем сделать скриншот его готового исходного кода и немного узнать:

Анимация слоя
векторная обработка
Загрузка используемых статических ресурсов
Ключевым моментом является использование самовыполняющейся функции для получения параметров движка, переданных извне, и экспорта lib1, который будет выставлен во внешний мир, и вы сможете в полной мере воспользоваться этим для контроля.

Весь исходный код и фреймворк, упомянутые в этой статье, выложены на github, и заинтересованные читатели могут скачать и изучить их самостоятельно.
CreateJS-And-Adobe-Animate-CC