Автор статьи: IMWeb Команда IMWeb Источник исходного текста:Сообщество IMWebВоспроизведение запрещено без согласия
На странице бренда Penguin Coaching нам нужно реализовать анимацию следующим образом:
Страница прокручивается до области анимации, и анимация воспроизводится. Соответствующая часть анимации выглядит следующим образом:
Покадровая анимация в настоящее время реализована следующими способами:
-
анимированный gif
Известные форматы изображений
-
Airbnb — это проект с открытым исходным кодом, который поддерживает кросс-платформенные решения для создания анимационных эффектов путем преобразования анимации AE в данные json; lottie уже применялась в обучении, и студенты, которые использовали ее, все хвалят и рекомендуют ее за эффект и скорость разработки. я еще не знаю Лотти, рекомендую серию обучающих статей Лотти,пожалуйста, ткните меня
-
APNG (Animated Portable Network Graphics)
Анимационный формат, основанный на расширении формата PNG, который добавляет поддержку анимированных изображений. Он был создан для замены старого формата GIF, но некоторые браузеры не поддерживают его, поэтому необходимо учитывать совместимость;
-
Видео элемент HTML
GIF-анимация подходит для обработки анимаций с простыми цветами и простыми эффектами движения, таких как анимация небольших изображений, таких как логотипы и диаграммы значков.В анимациях, которые необходимо реализовать выше, очевидно, больше деталей и больших областей.Учитывая качество, GIF исключен.
О том, какой метод использовать для реализации анимации, в сочетании с выводами исследования моего коллеги @ajaxchen:
- Лотти После того как дизайнер создал анимацию через AE, через плагин AEbodymovinЭкспортируйте анимацию в json и передайте ее нашей внешней разработке.Используя эти данные json, мы представили сценарий lottie-web для анализа этих данных json и визуализации их в анимацию SVG/canvas.Эффект показан ниже. картина показывает эффект нашей цели
Видно, что отличия в реализации все же есть.Цвет, цифровой наклон и перспектива пунктирной линии не оправдали ожиданий, поэтому от использования лотоса отказались, но это не отрицает прекрасного эффекта лотоса при реализации другие анимации.
-
APNG
После сжатия изображений сегментированных анимационных кадров, предоставленных дизайнером, результирующий размер apng достигает 29M, а формат webp - 17M, такой огромный объем, и четкость реализации не соответствует ожиданиям, поэтому этот метод может быть только заброшен; APNG не поддерживается в некоторых браузерах и должен быть введен при реализацииapng-canvasпреобразовать png в холст;
-
createJS
Статьи по моему ISUX«Всего одна статья отделяет вас от эффективного производства анимации»Отправить нашему дизайнеру
После этого он ответил мне так
-
HTML video
После безрезультатных попыток сделать все вышеперечисленное мой коллега @zzbozheng показал мнелол страница, Магия, на самом деле достигается с помощью видео! Я так не думал!
Проверьте совместимость тега видео, будь то версия страницы нашего бренда для ПК или мобильная веб-страница, совместимость может удовлетворить наши потребности.
Размер анимационного MP4 ролика, который дал брат-дизайнер, 350к.По сравнению с десятками мегабайт, 350к-это просто легко.Проверил реализацию автоматического воспроизведения видео,есть подводные камни.Также общался с братом-дизайнером для всестороннего рассмотрения.Потом решительно наступил на яму видео
Тег видео имеет соответствующий метод события, который может бытьОбратитесь к документации
Ниже приводится краткое изложение ям майнинга в процессе использования видео в мобильном Интернете:
-
видео может не воспроизводиться автоматически в сафари и настольном хроме
Автовоспроизведение здесь, будь то атрибут autoplay тега видео или метод воспроизведения, который автоматически вызывает видео через js, является автовоспроизведением.
Автозапуск Chrome на рабочем столе в основном ограничен autoplay policy, в нее можно играть автоматически, следуя соответствующей стратегии, которая в основном основана на опыте пользователя;mutedАтрибут (muted) может разрешить автоматическое воспроизведение. Наша анимация не имеет звука, поэтому добавьте атрибут muted в тег видео.
<video muted />
-
Скрыть панель управления видео
В теге видео, пока не добавлен атрибут управления, панель управления обычно не отображается, поэтому ее нельзя рассматривать как видео.Конечно, некоторые браузеры Android действительно находятся в состоянии потери контроля, о чем будет сказано позже ○| ￣|_
-
Видео IOS автоматически воспроизводится в полноэкранном режиме
Для информации добавьте два атрибута в тег видео для воспроизведения на маленьком экране.
<video
muted
playsInline
webkit-playsinline="true"
/>
-
WeChat не позволяет автоматически воспроизводить видео и должно воспроизводиться при взаимодействии с пользователем.
В начале коллега одного из пришедших напомнил мне обратить внимание на автоматическое воспроизведение видео WeChat.После отзывов других, это не только не разрешено WeChat, но и не разрешено некоторыми браузерами машин.Что мне делать делать в это время? Реализовано совместно с событием касания. Воспроизведение видео заключается в прослушивании события прокрутки и ожидании вызова video.play() в пределах видимого диапазона для автоматического воспроизведения. Поскольку некоторые браузеры требуют взаимодействия с пользователем, вы можете выбрать событие касания. Когда пользователь касается этого дисплея, воспроизведение область, событие касания запускается для вызова воспроизведения. Здесь наша область анимации достаточно велика, чтобы не беспокоиться о прикосновении пользователя. Здесь используется переменная, чтобы указать, было ли воспроизведено видео.Если оно было воспроизведено, событие касания не будет выполняться, чтобы избежать частого вызова воспроизведения.
-
Некоторые браузеры Android не могут воспроизводиться автоматически, а сенсорные события не могут запускать воспроизведение.
Метод воспроизведения тега видео возвращает обещание, которое можно использовать для определения возможности автоматического воспроизведения видео.
video.play()
.then(() => {
// play success
})
.catch( err => {
// auto play fail
})
Когда улов приходит к ошибке, можно включить только совместимое решение.Дизайнер дал мне несколько изображений кадров и позволил мне постепенно исчезать и исчезать, чтобы реализовать воспроизведение изображения.
В отчаянии, на стороне Wechat Android все видео включены в режиме совместимости (несколько картинок исчезают и исчезают)
- О странной работе браузера Android
- Автоматическая подвеска для воспроизведения видео на машине Oppo
Я: «Брат дизайнер, я ничего не могу с этим поделать.
Дизайн: «Найдите все соответствующие модели и браузеры, используйте режим совместимости для воспроизведения анимации для этих неподдерживаемых браузеров.
Я: «Очень сложно контролировать все модели и охватить их всех...
Дизайн: «Затем сначала используйте режим совместимости для всех Android, а потом оптимизируйте его».
于是就这样干掉了所有的安卓 video
- Видео браузера ios QQ завершено, и отображается рекомендуемое видео
mtt-playsinline=”true“
- Цвет фона видео, экспортированного дизайнером, отличается от предоставленного цвета. Существуют различия в различных устройствах ПК, таких как MAC и Windows, которые еще не обнаружены на мобильном терминале, но можно обнаружить, что разница в цвете между видео, отображаемым на мобильном терминале, и на ПК
Пока прилагаются некоторые блоки кода реализации, а в проекте используется стек технологии react
<video
muted
src="***"
preload="auto"
playsInline
webkit-playsinline="true"
mtt-playsinline="true"
loop
ref={this.videoRef}
/>
playVideo = () => {
const { isVideoCanAutoPlay, isPlayedVideo } = this.state;
// 播放视频
const videoDom = this.videoRef.current;
if (videoDom && !isPlayedVideo && isVideoCanAutoPlay) {
const playPromise = videoDom.play();
if (playPromise) {
playPromise
.then(() => {
this.setState({
isPlayedVideo: true,
});
})
.catch((err) => {
badjs.info(`[品牌页][AI VIDEO 动画]: 自动播放出错 ${err}`);
++this.catchVideoErrorCount;
// 通过点击和scroll后都无法播放视屏，使用兼容性方案
if (this.catchVideoErrorCount >= 2) {
this.setState({
isVideoCanAutoPlay: false,
});
}
});
}
}
};
Окончательное резюме:
-
Совместимость мобильного веба для автоматического воспроизведения видео слишком плохая, особенно Android, некоторые браузеры перехватывают тег видео и реализуют его по-своему, или всплывают и прилипают к началу, или два конфликта воспроизведения видео экрана, или Панель управления не может быть скрыто или воспроизводится полноэкранный режим по умолчанию.Если вы можете использовать другие методы для достижения анимации, попробуйте использовать другие методы.
-
Для автоматического воспроизведения видео учитывайте некоторые ограничения браузера, которые можно использовать только при взаимодействии с пользователем. Если видеоэкран находится на первом экране, это немного сложно или пользователю нужно щелкнуть, чтобы воспроизвести его. Если это не так первый экран, он может быть вызван событиями касания.В конце концов, пользователь, прокручивающий вниз, все равно вызовет событие касания
-
Обещание, возвращаемое методом воспроизведения видео, существует в WeChat Huawei Honor 8. Воспроизведение успешно возвращается, но видео не воспроизводится.
Справочные документы и веб-сайты:
Спасибо моим коллегам, которые помогали в процессе майнинга~