Kinderman
@Kinderman
Front-end Developer

Как правильно прикрутить анимацию в файле JSON на сайт?

Я могу вытащить анимацию (2 руки аплодируют) из Фигмы как Гифку но тогда у нее бесконечный цикл будет.
А я хочу, что 3 повтора было и все.
И если я ее даже корректирую и делаю 3 повтора то она просто отрабатывает при загрузке сайта и все.
Еще даже юзер не проскролить к ней (секция аж перед футером).
Есть у меня эта анимашка в формате json (файлом) но я никак не могу найти человеческое объяснение в Гугле как именно (и правильно) его прикрутить к странице (в общем файле js прописывать как-то или как-то отдельно подключать).
Насколько я понял, то должна еще прикручиваться библиотека js lottie. Хотелось бы максмально просто сделать не нагружая лендинг. Насколько это возможно.
  • Вопрос задан
  • 182 просмотра
Решения вопроса 1
Get-Web
@Get-Web Куратор тега JavaScript
Front-End Developer
Анимацию разбить на кадры и создать спрайт, после чего используя animation steps запустить в нужное время с нужным кол-вом повторений.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
sagrana
@sagrana
Вёрстка и немного кодинга)
Подключаете https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5...
Потом в js:
var animationData = /* содержимое json файла */;
var container = document.getElementById('elementID');
var params = {
    container: container,
    renderer: 'svg',
    loop: 3,
    autoplay: false,
    animationData: animationData
};

var anim;
anim = bodymovin.loadAnimation(params);


А потом вешаете отслеживание появления этого elementID во вьюпорте и просто anim.play(); и anim.stop();
Ответ написан
yupiter7575
@yupiter7575
Python программист
Если вам просто анимация нужна попробуйте написать это на canvas/webgl. или любую библиотеку для создания игр, тот же phaserjs
Ответ написан
Kinderman
@Kinderman Автор вопроса
Front-end Developer
Итак. Потрачено несколько дней ввиду моих "зелёных" знаний JS хоть и ответ Sagrana @sagrana оказался наиболее приемлемым в моём случае. Пишу пошагово как я реализовал отработку анимации при скролле к ней.
Как подключить библиотеку lottie, прописать саму анимацию и подключить её в свой проект я взял здесь - https://www.youtube.com/watch?v=Shd_Dms3P8I&t=349s

Подключение Lottie и анимации по пунктам:
1. Идем на оф. репозиторий lottie: https://github.com/airbnb/lottie-web
2. Далее по пути: build / player и выбираем нужную версию lottie
3. Жму на нужную версию и скачиваю этот файл себе в проект нажав на кнопку "Raw".
Откроется содержание файла. Нажимаю правой кнопкой на любом месте этого файла и выбираю "Сохранить как" и сохраняю себе в проект в папку lib.
4. В html создал div с ID "lottie-test".
5. Подключаю скачанный файл lottie перед своим главным файлом js в конце body
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы