Предыстория проекта
Компания является ведущей компанией в области моды, поэтому после получения проекта дизайна ей требуется немного моды и большая гибкость в работе с HTML5. Всего в нем 7 страниц, но более 40 из них, по оценкам, имеют меньший динамический эффект. Давайте поговорим о проекте и яме, с которой мы познакомились
Интерфейс HTML5
После сравнения нескольких схем мы также выбираем способ phase.js + zepto для текущей технической оценки. Phase.js в основном это игры на HTML5, но в зависимости от количества анимаций и общей сцены мы выбираем этот фреймворк
- Двойная предварительная загрузка
При загрузке в соответствии с запросом есть две точки анимации: одна-трофей для рекламы, другая-текст прокрутки (первая версия текста прокрутки более сложная), а вторая-фоновая музыка, воспроизводимая при входе в состояние загрузки
Вращающаяся чашка: это нерегулярное вращение, и самый простой способ осознать это, естественно, – это способ создания последовательных кадров. Других способов попробовать нет. Я надеюсь, что врата Бога скажут мне позже Прокручивающийся текст: эффект бегущей лампы, отображаемой каждые 1,5 секунды, очень прост без подробного описания
Фоновая музыка Это гигантская яма. Требование состоит в том, чтобы автоматически воспроизводить аудио и видео после загрузки. Chrome и safari протестировали, что пользователи не могут прикасаться к экрану. Единственное wechat, что вы можете сделать, это то, что wechat делает в браузере wechat. Wechat автоматически воспроизводит аудио и видео двумя способами
1: В Интернете есть много реализаций weixinjsbridgeready, которые не будут перечислены, но особо отмечается, что этот метод нельзя использовать на некоторых машинах Android, таких как некоторые модели vivo. Wechat js-sdk И, возможно, в будущем все это бесполезно 2: Способ wechat js-sdk основан на способе wechat js-sdk. Для получения дополнительной информации обратитесь к документам wechat, и вам нужна поддержка
Автоматическое воспроизведение видео Видео будет воспроизводиться автоматически после загрузки требований проекта. И chrome, и safari нужно нажать, чтобы начать ссылаться на несколько зрелых тем H5 1. После загрузки позвольте пользователю щелкнуть, чтобы решить проблему из процесса продукта В настоящее время способ преобразования 2 в последовательный кадр идеален. Недостатком является то, что если это связано со звуком, это более проблематично, а более 200 изображений видео за 8 секунд намного больше. Однако способ добавления последовательных кадров в анимацию зависит от технических возможностей.