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

Question

[Kostiantyn Kondratiuk]

Я могу вытащить анимацию (2 руки аплодируют) из Фигмы как Гифку но тогда у нее бесконечный цикл будет.
А я хочу, что 3 повтора было и все.
И если я ее даже корректирую и делаю 3 повтора то она просто отрабатывает при загрузке сайта и все.
Еще даже юзер не проскролить к ней (секция аж перед футером).
Есть у меня эта анимашка в формате json (файлом) но я никак не могу найти человеческое объяснение в Гугле как именно (и правильно) его прикрутить к странице (в общем файле js прописывать как-то или как-то отдельно подключать).
Насколько я понял, то должна еще прикручиваться библиотека js lottie. Хотелось бы максмально просто сделать не нагружая лендинг. Насколько это возможно.

Answer 1

[Виталий Першин]

Анимацию разбить на кадры и создать спрайт, после чего используя animation steps запустить в нужное время с нужным кол-вом повторений.

Answer 2

[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();

Comments

[Kostiantyn Kondratiuk]

Супер! Начал внедрять и все понятно до последних двух строк кода - что присваивается переменной anim?
Можно детальнее, пожалуйста.
И как именно применить эти 2 метода для анимации anim.play(); и anim.stop(); ?
В доке до lottie нет примеров применения. Можно тоже детальнее? Как для Трейни-).
Спс.

[Sagrana]

В переменную anim вы как раз и записываете свою анимацию. Вот самый базовый пример.

Потом вы создаете функцию, которая проверяет, находится ли элемент во viewport (то есть в пределах видимой части экрана)

function elementInViewport(element, offsetTop, offsetBottom){
	var bounds = element.getBoundingClientRect();
	return (
		(bounds.top + bounds.height - bounds.height * offsetBottom > 0) && // Элемент ниже верхней границы на offsetBottom %
		(window.innerHeight - bounds.top - bounds.height * offsetTop > 0) // Элемент выше нижней границы на offsetTop %
	);
}

Потом вы отслеживаете scroll документа и проверяете, не появился ли контейнер с вашей анимацией на экране. Я делаю это со смещением в половину высоты контейнера. То есть анимация запускается только тогда, когда блок с ней уже на 50% на экране. И останавливается, когда он на 50% выше верхней границы экрана.

document.addEventListener('scroll', function() {
	var inViewport = elementInViewport(container, .5, .5);
	if(inViewport) {
		// элемент во пределах видимой части экрана
		anim.play();
	} else {
		// элемент за пределами видимой части экрана
		anim.stop();
	}
});

[Kostiantyn Kondratiuk]

Sagrana, хорошо, спасибо.
Но не могли бы вы ещё подсказать как именно этот дополн. код (касательно функции elementInViewport и отслеживания скролла) применить у себя? Я имею ввиду, что не понятно мне как привязать его к моему диву с анимацией. Наверное по id но как его прописать тут в коде правильно?
П.С. Мне до совершенства в js ещё далеко поэтому и задаю такие вопросы (наверное очевидные для профи).
П.С.П.С. С анимацией я уже разобрался (вроде) и набросал инструкцию по пунктам, которую тут тоже выложу как до конца разберусь).

[grafit_off]

Kostiantyn Kondratiuk, в слушателе скролла, а именно в

var inViewport =   elementInViewport(container, .5, .5);

вместо container пишите елемент, который вам нужно, его можно заранее вынести в константу

const твое название = document.querySelector(“.твойклассдива”);

название константы вписать вместо container. Будет что-то вида

document.addEventListener('scroll', function() {
  var inViewport =   elementInViewport(твое название, .5, .5); 
  if(inViewport) {
    // элемент во пределах видимой части экрана
    anim.play();
  } else {
    // элемент за пределами видимой части экрана
    anim.stop();
  }
});

[Kostiantyn Kondratiuk]

grafit_off, Спасибо за детали! Работает!)

Answer 3

[Yupiter7575]

Если вам просто анимация нужна попробуйте написать это на canvas/webgl. или любую библиотеку для создания игр, тот же phaserjs

Comments

[Kostiantyn Kondratiuk]

Мне желательно максимально упрощ. вариант нужен).
Например, из практики фронт-эндщика.
По-любому кто-то уже прикручивал анимации к сайтам - вот и я хочу для себя этот момент отработать и пометить как инструкцию).

[Yupiter7575]

Kostiantyn Kondratiuk, ну canvas это ваш случай.

[Kostiantyn Kondratiuk]

Yupiter7575, Почитаю, спс.

Answer 4

[Kostiantyn Kondratiuk]

Итак. Потрачено несколько дней ввиду моих "зелёных" знаний 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