Однажды ко мне пришел наш UI-дизайнер и сказал, что я должен заменить анимации, которые я написал в программе, на анимации в формате json, которые они мне предоставили. Причина в том, что некоторые анимации очень сложны и не могут достичь ожидаемого эффекта, если я напишу их сам ( Когда я это писал, у меня вдруг возник вопрос, а почему бы не использовать gif для такой сложной анимации? Android-разработчик, сидящий напротив меня, ответил, что качество gif может быть не высоким при воспроизведении, окей, я верю)
Я:? ? ? ? Клиент может добавлять анимацию json. Я никогда не слышал, чтобы страницы H5 могли читать анимацию json.
Дизайнер посмотрел уверенно и сказал: да, веб-версия есть.
Когда я это пишу, мне очень хочется похвалить наших девочек-дизайнеров. Почти много хороших решений было найдено под их давлением (о, они тоже могут писать страницы H5... они хотят, чтобы я написал серию «Что толку»).
Итак, возникает вопрос: как использовать анимацию json на странице H5?
Как использовать анимацию json на странице H5В этот раз дизайнер прислал мне ссылку, посмотрите здесь, lottie-web; я нажал на нее, чтобы узнать больше о ней. Это библиотека анимации с открытым исходным кодом, созданная Airbnb. Эта библиотека может создавать множество интересных анимаций и очень проста в использовании. Дизайнеру нужно только экспортировать файл JSON через анимацию, созданную AE. программное обеспечение, а затем внешний интерфейс использует Lottie для прямой загрузки файла JSON для создания анимации. Это не требует от дизайнера вырезания большого количества изображений, а интерфейсный интерфейс не требует сложного рисования. Он убивает двух зайцев одним выстрелом. , а Lottie доступна на всех платформах, включая iOS, Android, Интернет и React. Нативную можно использовать, и памяти она занимает меньше, и загружается плавно. (Почему я обнаружил такую волшебную вещь только сейчас?
Сказав так много, как использовать это на страницах H5?
Все очень просто. Вам отправляется созданная дизайнером папка (дизайнеру нужно только добавить плагин лотти в AE и экспортировать ее. После открытия она должна выглядеть так. Откройте demo.html и все будет так). знаю, как это работает. Использовал его (поэтому я все еще пишу здесь технические статьи).
Если серьезно, я действительно столкнулся с множеством подводных камней во время использования. Вот несколько вещей, на которые следует обратить внимание при их использовании.
1. В demo.html есть много встроенных элементов, которые некрасивы при использовании.Присмотритесь. На самом деле, demo.html включает в себя как js, так и json. На данный момент мы можем разделить js и json отдельно. Для js мы можем использовать адрес, указанный в cdn.
<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script>
Необходимые для анимации json-данные помещаются в файл data.json, но формат данных в данном json-файле следующий (он слишком длинный и его нельзя обрезать)
Если вы хотите использовать скрипт для добавления файла JSON в отдельный HTML-код, будет сообщено об ошибке, поэтому вам необходимо изменить файл JSON, добавить переменные впереди и присвоить значения. Как показано ниже:
Таким образом, вы можете импортировать json так же, как и файл js.
<script type=text/javascript src=./data.json></script>
Таким образом, доступный файл demo.html сводится к следующему:
<html xmlns=http://www.w3.org/1999/xhtml><meta charset=UTF-8><head> <style> body {background-color:black; поля: 0px; высота: 100%; : скрыто } #lottie {background-color:#fff; высота: 100%; Translate3d(0,0,0); text-align: center; opacity: 1 } </style></head><body><div id=lottie></div><script type=text/javascript src= https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script><script type=text/javascript src=./data.json></script><script> var params = { контейнер: document.getElementById('lottie'), средство рендеринга: 'svg', цикл: true, автозапуск: true,animationData:animationData }; аним; аним = лотти.loadAnimation(params);</script></body></html>Конечно, если вы используете модульное программирование на js, вы можете просто импортировать его напрямую, не изменяя data.json, следующим образом:
импортировать данные анимации из «./data.json»2. Адаптируйте анимацию к мобильным устройствам.
Причина, по которой я считаю это ловушкой, заключается в том, что анимация, которую дал мне дизайнер, была полноэкранной и непрозрачной. Затем она попросила меня расположить анимацию с шириной 100% и вертикально центрированным перехватом, который я попробовал. браузер, под экраном 360*640 ширина 100%, выражение такое (выглядит так, что высота 100%, ширина адаптирована к центру, а черный цвет фона вытекает с обеих сторон. , см. часть в синей рамке на рисунке ниже)
Переключение на экран iPhone
Этот макет настолько знаком. Он ведет себя так же, как если бы для атрибута object-fit в img было установлено значение contains (object-fit тоже сокровище. Заинтересованные студенты могут его изучить, он очень прост в использовании).
Чтобы удовлетворить потребности дизайнера, я в основном добавляю следующий код:
часть js: setTimeout(function() { document.getElementsByTagName('svg')[0].style.height = 'auto';}, 50); часть css: (добавьте гибкий макет в лотцию) #lottie { width:100); %; высота: 100%; преобразование: Translate3d (0,0,0); выравнивание текста: центр; непрозрачность: 1; позиция: абсолютная; влево: 0; z-индекс: 3; отображение: гибкое направление: строка; выравнивание элементов: центр;}Конечный эффект:
Подвести итогВсе приведенные выше скриншоты статичны, но на самом деле они имеют динамический эффект. Я не знаю, как добавить анимацию, поэтому не стал этого делать. Если вам интересно, вы можете попробовать.
Область применения: я считаю, что обычно этот метод можно использовать для полноэкранной или частично сложной анимации. Он более плавный, чем GIF, и имеет хорошую совместимость. Некоторые продукты Android используют этот метод для удобного открытия экрана, например страницы H5. Если да, то простые анимации обычно можно реализовать в вашей собственной программе, и вы сможете избежать ошибок.
Справочные ссылки:
официальный сайт Лотти
адрес лотти-веб на github
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.