Как сделать подобную анимацию?

Question

[Антон Вебсайтовский]

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

Анимация я так понял на: threejs



Как выдернуть или сделать такую простую?

Comments

[szQocks]

такую простую анимацию - проще не выдёргивать а самому написать, вали на фриланс, точнее выдернуть её не сложно, вот толку 0 - переписывать её всё равно придётся

[Антон Вебсайтовский]

szQocks, а как сделать такую, я зашел на сайт, пытался понять, там фаил threejs весит под 300 мегов

[szQocks]

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

изучить html,css,js ( canvas ) и сделать

Answer 1

[Ivan Bogachev]

Никакой Three.js тут не нужен. Ну то есть, конечно, никто не мешает сделать все это на WebGL и прикрутить здоровенный фреймворк сверху, но все же это будет слегка избыточным решением в большинстве случаев. Такое можно аргументировать только если весь сайт изначально так и делается на WebGL и это просто "один из" эффектов, которые туда нужно интегрировать.

В 99% остальных случаев подобные штуки делаются одной svg-картинкой, одним path, который рисуется в зависимости от положения мышки и размеров контейнера. Немного школьной геометрии, ограничение диапазона возможных смещений всего этого - и дальше можно до посинения играть с алгоритмом расчета смещения, до тех пор, пока реакция на мышку не начнет нравится. Там уже нет универсального рецепта, все от дизайна зависит. Можно линейно привязать к положению мыши. Это обычно выглядит скучно. Можно использовать какую-то функцию от расстояния до центра, чтобы сделать движения менее равномерными. В каких-то случаях делают полноценный эффект инерции, как верно подмечено в соседнем ответе. Там получаются более естественные движения (обычно все это является развитием гравитационных моделей). Есть совсем замороченный подход, когда используется моделирование системы пружин (для общего развития можно загуглить силовые алгоритмы визуализации графов). Там можно получить целый ряд занятных эффектов, которые часто оказываются в тему как раз в таких фонах, где какие-то штуки связаны между собой прямыми линиями. Ну и можно просто вдохновиться какими-то физическими явлениями и сделать что-то "по мотивам".

Comments

[Антон Вебсайтовский]

Ох ты, спасибо большое, а когда мышку убираешь, как сделать, чтобы данная анимация на дефолтное место становилось.

[szQocks]

Антон Вебсайтовский, отмечай решением если помогло, автор ответа явно потратил больше 10 минут писав этот код)

[Антон Вебсайтовский]

szQocks, логично

[Сергей Соколов]

Здорово сделали.
Жаль, что всё, чему при этом «научился» автор вопроса — на Тостере можно клянчить готовые решения для копипасты.

[Ivan Bogachev]

как сделать, чтобы данная анимация на дефолтное место становилось

Антон Вебсайтовский, Вам нужна физическая система, которая будет в равновесии в центре. Тут либо уже упомянутые пружины, либо гравитация, как при создании инерционных эффектов. Без точного запроса не угадать, что у вас в голове, но скорее второе. Одна точка притяжения в центре, вторая, более сильная - в мышке. Пока есть обе - картинка будет приягиваться сильнее к мышке, если эту точку убираем - будет притягиваться к центру. Можно вообще иметь только одну, либо в мышке, либо в центре. Это же закроет вопрос с тем, как плавно прийти к новому положению мыши, когда она появляется где-то не там, где изчезла.

[Антон Вебсайтовский]

Сергей Соколов, я ни разу с этим не сталкивался

[Антон Вебсайтовский]

Ivan Bogachev, спасибо, уже видел чуть поправил.

[Антон Вебсайтовский]

Ivan Bogachev, Добавил я картинку под svg анимацию, картинка растягивается норм и адаптируется, а вот svg, непонятно, не полностью растягивает как-то ! не замещает нормально картинку и при адаптации тож глюки, пытался сделать, пока не вышло, https://codepen.io/AXOT/pen/RwEEjeb

Есть еще такой параметр, пытался с ним сделать, this.#path.setAttribute('preserveAspectRatio', 'none'); но не помогло.

[Ivan Bogachev]

Антон Вебсайтовский, Разберитесь с тем, что в расчетах происходит и откуда берутся те или иные значения. В моем примере все происходит "на весь экран", все размеры относительно окна браузера. Вы делаете контейнер меньшего размера. Может быть тогда уж и значения брать относительно него? Не нужно копипастить или методом тыка перебирать решения. Нужно разобраться с логикой происходящего, благо ее там совсем немного, и все ваши вопросы отпадут сами собой.

[Антон Вебсайтовский]

Ivan Bogachev, я пытаюсь растягивать на весь контейнер.
И пока у меня это не вышло.

[Антон Вебсайтовский]

Ivan Bogachev, Я уже заметил что svg, игнорирует параметры div блока, вот пытаюсь понять, что надо вписать, чтобы он не игнорировал. а растягивался не в весь экран, а только в данном блоке во всю ширину и высоту.

[szQocks]

Антон Вебсайтовский, у тебя проблема там в том, что картинка выходит за пределы блока, разберись с этим и станет наверное легче ?

[Антон Вебсайтовский]

szQocks, да это я сидел менял, по этому там обновилось щас и криво.

[Антон Вебсайтовский]

Задрал изначально треугольник вверх, так пусть будет.
Вот что у меня вышло, вроде ок, ну почти https://codepen.io/AXOT/pen/RwEEjeb

При адаптации, все уходит куда-то вниз, треугольник не прижат к верху.

[Антон Вебсайтовский]

Вообщем я бессилен ), просто решил другу помочь, не знаю, зачем такие дебри делать поверх картинки ), тему позже удалю, поигрались и хватит. Спасибо, кто помогал и умничал )

[szQocks]

Антон Вебсайтовский, если ты имеешь ввиду что пост/вопрос удалишь , то это как-то не правильно

пост может кому-то в будущем поможет, плюс люди тратили время тут сидели, а ты думаешь только о себе

[Антон Вебсайтовский]

szQocks, а смысл, задачу не получилось довести до ума.

[szQocks]

Антон Вебсайтовский, тебе мужик написал анимацию, то что ты не смог как-то её там подшаманить под свои хотелки - это ни как не касается данного вопроса/поста

мне кажется ты просто шантажируешь автора ответа - на то что бы он подогнал анимацию под твои хотелки, вставил там твою картинку и сделал так как ты хочешь - это не правильно, имей совесть

[Антон Вебсайтовский]

Еще немного удалось доработать, теперь более адаптивное.
https://codepen.io/AXOT/pen/RwEEjeb

Пытался сделать как на том примере, чтобы центр этой анимации сильно по бокам не ходил, ну до краев, чтоб ходило ну на 20% процентов от центра, а не плавало как щас.

[Антон Вебсайтовский]

szQocks, человек соображает, а я его спрашиваю, зачем ты тут пишешь не по теме, не можешь помочь ! смысл писать. Я кстати готов вознаградить его деньгой. За его знания.

[Антон Вебсайтовский]

Я уже доделываю дальше то как мне надо, оплатил человеку, не проблема.

[szQocks]

Антон Вебсайтовский, Что ты спрашивал в вопросе ? как сделать анимацию - тебе показали пример - как её сделать, всё свободен.

с херали ты решил что тебе должны помочь настроить её там или ещё что-то ? с какого перепуга ? твои просьбы о помощи - ни как не относятся к вопросу/посту я тебе уже сказал об этом.

И когда я тебе сказал об этом ( о том что твои просьбы решить твои хотелки не относятся к вопрос ) что ты сделал после этого ? так же выпрашивал помощь + шантажировал удалением вопрос, а щас меня ещё на понт ставишь, делаешь меня виноватым что я пишу не по теме, а ты по теме нет ? Если ты готов платить - шёл бы на фриланс.

Answer 2

[Сергей Соколов]

Анимацию линий от положения курсора можно сделать гораздо «легче» без библиотек.

Поверх картинки абсолютно позиционируется SVG с этими всеми линиями. Координаты линий динамически меняются.

Сделал примитивный пример, линия летает поверх фотки:

Разберитесь, как анимируется одна линия. В вашей задаче линий чуть больше, у них общие вершины.
И анимируются они не по таймеру, а от курсора.

Pro tip: сделайте минимальную инерционность: чтобы к курсору постоянно стремилась невидимая точка с небольшой задержкой, как на резинке, а уже от координат этой невидимой точки анимируйте линии — так будет плавнее и загадочнее. Координаты невидимой точки в любой момент приближаются к текущему положению курсора на 80%, скажем.
X_точки = предыдущий_X_точки + (X_мышки - предыдущий_X_точки) * 0.8
В этом ответе подробнее раскрыл тему.

Comments

[Антон Вебсайтовский]

спасибо