Как создать анимированную интерактивную схему?
Есть вот такой сайт https://hlebozavod9.ru/
На нем есть вот такая схема
https://disk.yandex.ru/i/GP12c0mWKc9yUg
Она реализована таким образом:
1. Есть общая статичная картинка со зданиями и прочим
2. Есть SVG в котором прорисованы "белые" состояния зданий. Который отображаются при наведении
3. И есть картинка с анимацией где бегают человечки и так далее. В этой картинке быстро меняется src атрибут от 1 до 50 примерно. В итоге создается эффект анимации.
Вопрос: Можно ли сделать примерно тот же функционал, но по другому. Более оптимизированно и удобно, чем просто менять src у картинок.
Думали в сторонуу lottie , но дизайнеры говорят что у них 3d объекты и lottie для этого не очень подходит.
Самое главное чтобы можно было интерактивно взаимодействовать. Желательно чтобы была возможность ускорять/замедлять / останавливать / запускать анимацию в любой момент.
Дополнительно:
Если не ошибаюсь то в adobe illustator там толи плагин есть толи фича какая-то, благодаря которой специально под lottie можно экспортировать код, 3д модели любые
Ну то есть не просто экспорт svg, а именно под lottie, кароч загугли где-то эту тему
Как сейчас реализована анимация:
У вас есть 50 срендереных картинок анимации вроде этой и каждые n милисекунд меняется номер картинки
В таком виде реализации вы ограничены по плавности анимации именно количеством таких кадров и в целом больше ничем
Как можно сделать лучше:
Вариант 1.
Анимация станет плавнее, если просто будете вопроизводить ее в 60 fps.
То есть просто поменяете код для смены аттрибута src на что-то такое:
let i = 0; let a = setInterval(()=>{ document.querySelector("body > div.page > div.places > div > div > div > div.places-map-wrap > div > div > img").src= "/assets/images/home_sequence/" + i + ".webp"; i = (i + 1) % 49; }, 1000/60) // 1000 / 60 означает что вы хотите вопроизводить 60 кадров в секунду |
let i = 0; let a = setInterval(()=>{ document.querySelector("body > div.page > div.places > div > div > div > div.places-map-wrap > div > div > img").src= "/assets/images/home_sequence/" + i + ".webp"; i = (i + 1) % 49; }, 1000/60) // 1000 / 60 означает что вы хотите вопроизводить 60 кадров в секунду
Минусы: из-зи увеличения fps таким способом увеличится и скорости анимации
Вариант 2.
Cделать не 50 типовых картинок, а 100 и менять их способом из варианта 1 c фпс в два раза выше чем сейчас
Тогда удастся сохранить и скорость анимации и сделать плавнее
Минусы: много работы (придется переделывать раскадровку всей анимации) + упадет скорость сайта из-за того что придется загружать в два раза больше картинок
Вариант 3.
ВОЗМОЖНО самый удачный, но ТОЧНО самый сложный и требующий много сил. Используйте вместо картинок вида
canvas и библиотеку three.js (тут уже как-то самому придется разбираться, советов дать не могу, потому что сам недостаточно работал с этой библиотекой
Минусы: вполне вероятно, что из-за того что на сайт добавится +1 библиотека, а также 3д модельки скорость сайта будет не сильно отличаться от второго варианта.
Плюс по сравнению с вариантом № 2: Вы получите полную свободу в управлении этой анимацией. Сможете когда надо замедлить, когда надо ускорить без лишней работы
В целом скорость сайта не должна стать большой проблемой, потому что это не первый экран и даже не самое важное в карте. Соответственно можно что-то подгрузить попозже, что-то пораньше, что-то вообще не подгружать если слабый инет
Иными словами, загружать эту анимацию только после того как загрузили все остальное
В общем я постарался понятно расписать минусы и плюсы. Плюс многое зависит от того, как сделана эта штука у ваших дизайнеров
Если что-то непонятно объяснил - спрашивайте
- В целом все понятно, походу придется изучать tree.js . Наличие доп библиотеки на сайте не критично, так как все кэшируется.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания анимированной интерактивной схемы существует несколько способов, в зависимости от ваших потребностей и уровня опыта. Одним из популярных способов является использование библиотеки JavaScript, такой как D3.js, которая позволяет создавать красивые и динамичные визуализации данных.
Прежде всего, вам необходимо определить структуру вашей схемы и какие элементы вы хотите включить в нее. Затем вы можете использовать HTML и CSS для создания базовой структуры вашей схемы, а затем добавить интерактивность с помощью JavaScript.
Пример создания анимированной интерактивной схемы с использованием D3.js:
<title>Interactive Diagram</title> const svg = d3.select("svg"); // Создаем круг svg.append("circle") .attr("cx", 50) .attr("cy", 50) .attr("r", 20) .attr("fill", "blue") .on("mouseover", function() { d3.select(this).attr("fill", "red"); }) .on("mouseout", function() { d3.select(this).attr("fill", "blue"); });<title>Interactive Diagram</title> const svg = d3.select("svg"); // Создаем круг svg.append("circle") .attr("cx", 50) .attr("cy", 50) .attr("r", 20) .attr("fill", "blue") .on("mouseover", function() { d3.select(this).attr("fill", "red"); }) .on("mouseout", function() { d3.select(this).attr("fill", "blue"); });
В этом примере мы создаем круг на SVG-холсте и добавляем ему интерактивность: при наведении мыши круг меняет цвет с синего на красный.
Вы также можете использовать другие библиотеки, такие как GreenSock Animation Platform (GSAP) или Anime.js, для создания анимаций на вашей схеме. Кроме того, вы можете использовать CSS анимации для добавления дополнительных эффектов.
Надеюсь, эта информация поможет вам создать свою анимированную интерактивную схему!