Всем привет!👐 Снова показываем анимацию с сайта IZUM STUDY, который мы сделали на Таптопе. Сейчас хотим поговорить о
Lottie-анимации и как мы адаптируем её под разные платформы.
Чтобы вставить Lottie-анимацию в Таптоп, нужно:▫️Загрузить JSON-файл с Lottie-анимацией
▫️Скопировать относительную ссылку для открытия файла
▫️Вставить на страницу скрипт подключения библиотеки Lottie и скрипт анимации вместе с ссылкой для открытия файла
Вот, например, скрипт для нашей анимации движущегося человечка на одном из экранов:
<!-- Подключение библиотеки Lottie -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.2/lottie.min.js"></script>
<!-- Human -->
<script>
document.addEventListener('DOMContentLoaded', function () {
lottie.loadAnimation({
container: document.querySelector('.man'),
renderer: 'svg',
loop: true, // Включаем зацикливание
autoplay: true,
path: '/f/chelovek.json' // Укажи свой путь к JSON
});
});
</script>
А вот в анимации с чёрными сферами используются эффекты, которые
не поддерживаются Safari и платформой iOS. Кстати, таких довольно много — среди них Gaussian Blur, Levels, Drop Shadow, Glow, а также любые эффекты из вкладки Effects & Presets.
Если бы мы использовали предыдущий скрипт для нашей анимации с сцепляющимся сферами, на продуктах Apple она бы не прогрузилась. Чтобы исправить это, нужно
прописать в скрипте разделение на системы: если анимация проигрывается на платформе iOS, рендер будет ‘canvas’, a если на других, то ‘svg’:
<script>
document.addEventListener('DOMContentLoaded', function () {
const container = document.querySelector('.spheres');
if (!container) return;
// Проверка: Safari или iPhone/iPad
const ua = window.navigator.userAgent;
const isIOS = /iPhone|iPad|iPod/i.test(ua);
const isSafari = /^((?!chrome|android).)*safari/i.test(ua);
const useCanvas = isIOS || isSafari;
lottie.loadAnimation({
container: container,
renderer: useCanvas ? 'canvas' : 'svg',
loop: false,
autoplay: true,
path: '/f/data.json' // Укажи свой путь к JSON
});
});
</script>
Теперь Lottie-анимация на платформах Apple будет проигрываться упрощённом виде.
Как-то так! Сайт скоро релизнем, анимации добавили к посту 👋
