Всем привет!👐 Снова показываем анимацию с сайта 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 будет проигрываться упрощённом виде.

Как-то так! Сайт скоро релизнем, анимации добавили к посту 👋