Kadence Blocks , популярный плагин для сбора блоков, сегодня добавил новый блок Lottie Animations в версии 2.2.4. Большинство блоков в плагине предлагают часто используемые функции построения страниц, такие как строки, кнопки, галереи и отзывы. Блок Lottie Animations представляет нечто более веселое и причудливое.
Lottie — это облегченный формат файла анимации с открытым исходным кодом, разработанный командой дизайнеров Airbnb , который популярен как среди разработчиков, так и среди дизайнеров. Он легче, чем старые форматы анимированной графики, и им быстрее манипулировать. Векторный формат позволяет увеличивать или уменьшать масштаб анимации без потери качества. Платформа LottieFiles — это сообщество, в котором дизайнеры и разработчики делятся своими творениями для использования другими.
Новый блок Lottie от Kadence Blocks позволяет пользователям WordPress легко использовать и настраивать анимацию Lottie. Это не первый плагин, предлагающий их. Анимации Lottie доступны пользователям Elementor Pro и включены в несколько других коллекций, таких как блоки и библиотека шаблонов Gutenberg от Otter и Ultimate Addons для Gutenberg, а также плагин Lottie Player.
Анимации Lottie можно добавить в контент WordPress, вставив ссылку oembed в редактор или используя блок для встраивания, как вы видите на этой странице. Недостатком их использования таким образом является то, что вы не получите никаких элементов управления для редактирования их внешнего вида и движения.
Реализация Kadence Block находится в бесплатной версии плагина и включает элементы управления блоками для дальнейшей настройки анимации. Пользователи могут настраивать параметры воспроизведения, такие как автовоспроизведение, включать и выключать элементы управления, а также изменять скорость воспроизведения и параметры цикла. Размер анимации, отступы и поля можно настроить.
При первом использовании блока он по умолчанию отображает анимированный заполнитель логотипа WordPress, но вы можете заменить URL-адрес в настройках блока на один из LottieFiles, если найдете тот, который хотите использовать.
На анимации можно ссылаться в блоке с помощью удаленного URL-адреса (вероятно, наиболее распространенного) или с помощью локального файла. У этой функции также есть собственный экран администратора, где вы можете управлять всеми своими анимациями.
Элементы управления демонстрируют, насколько масштабируемы анимации — независимо от того, установлены ли они на полную ширину или уменьшены до маленького значка. Они хорошо реагируют на элементы управления выравниванием блоков и могут использоваться в любом контенте, где разрешены блоки, или даже в шаблонах.
Блок требует, чтобы Lottie Player JS загружал и анализировал анимацию на основе JSON, но представитель Kadence WP Кэти Зант сказала, что снижение производительности является скромным по сравнению с предыдущими технологиями анимации.
Анимации LottieFiles можно редактировать на веб-сайте, чтобы изменить цвет фона или отредактировать цвета слоя анимации. Пользователи могут экспортировать обновленный файл как Lottie JSON для импорта в блоки. В качестве альтернативы созданию собственных анимаций Lottie с нуля это может быть один из способов перекрасить существующие анимации в соответствии с вашим брендом. Эти файлы можно загрузить и импортировать в блок Kadence Lottie, чтобы добавить привлекательные анимации, которые будут работать на любом устройстве.
