Войти
ПрограммированиеФорум2D графика и изометрия

HTML5 Canvas interactive animations of menu with bubbles

#0
(Правка: 13:05) 12:53, 22 мар 2022

Нужно сделать анимированное меню с шариками.
Как здесь:
http://79.110.52.43/

На ванилла js. Сторонние либы и фреймворки использовать нельзя.
Только базовый jquery.

Я посмотрел, там сделано на canvas.

Нужны руководства/книги/учебники/статьи по теме.
Как делать анимашки на canvas?

Как рассчитывать траекторию движения шариков сразу после
загрузки web-странички?
Как рассчитывать траекторию и поведение шариков при их перетаскивании мышкой?
Как рассчитывать траекторию и поведение шариков при клике на шарике и раскрытии подменю?
Как реализовать эффект мыльных пузырей?

#1
13:35, 22 мар 2022

очень похоже что это d3.js библиотека(рисует в канвас), там такое в коробке есть

#2
14:16, 22 мар 2022

Нужно ручками, без сторонних либ.

#3
14:52, 22 мар 2022

torsar
> Нужно ручками, без сторонних либ.
Если у вас нет опыта работы с canvas и не очень с физикой, то без либ и движков вы потратите месяцы на такую прогу.

#4
14:55, 22 мар 2022

torsar
> Только базовый jquery.
https://api.jquery.com/animate/
Кнопки можно css'ом рисовать:
https://stackoverflow.com/questions/39278076/centering-text-on-circle-button

#5
(Правка: 15:13) 15:12, 22 мар 2022

torsar
> Нужно ручками, без сторонних либ.
удачи и хорошего настроения
(увидимся через год)

чел ты тему создал в надежде что ктото за тебя напишет с нуля? лол кек

#6
15:20, 22 мар 2022

У меня 10 рабочих дней!!! :(
2-й день подходит к концу!!!

Мне не надо писать за меня.
Мне надо алгоритм(ы).
Хотя бы их название(я).
И краткое пояснение.
Dimich
> Кнопки можно css'ом рисовать:


Алгоритм движения мыльных пузырей никто не отменял. :(

#7
(Правка: 16:27) 16:21, 22 мар 2022

torsar
> У меня 10 рабочих дней!!!
ааа тот самый фриланс "сделай или умри" с неадекватными заказчиками и сроками
(у меня много такого опыта)

torsar
> Мне не надо писать за меня.
> Мне надо алгоритм(ы).
это не алгоритм, это "шаблон" который "должен у тебя быть до того как ты начал это задание"

torsar
> Хотя бы их название(я).
> И краткое пояснение.
такой "шаблон" слишком ситуативный (говоря про код с нуля) и просто не нужно браться за незнакомые задания на фрилансе, а делать только то для чего у тебя уже наработаны шаблоны (и нарабатывать шаблоны чтоб использовать в будущем)

В этом случае - "слишком много надо кодить" и кодить очень конкретно под эту задачу .(круглые кнопки движущиеся еще и пересекающиеся в CSS описывать это адище полное)
Это не общий случай с которым можно "просто помочь" .(ну или я не знаю готовых аналогов, может они и есть)

Как я раньше поступал на таких задачах когда еще брал такие задачи - гуглил в надежде найти чтото готовое или похожее, очевидно в твоем случае если готового ничего не найдешь то достаточно скомбинировать двигающиеся кнопки (гугл) и кнопки произвольной формы... както так. (гуглил на инглише очевидно)

torsar
> У меня 10 рабочих дней!!! :(
скажу честно, я уже 4 года не работаю на фрилансе с web-ом, но даже сегодня без любых шаблонов и наработок яб смог сделать это за несколько дней (скорее всего меньше 5 дней ушлобы)
просто следуя простейшим примерам из https://www.w3schools.com/css/
(тоесть да для решения этой задачи мне былобы достаточно ссылки выше, и это единственный конкретный совет этого моего поста(очевидно что у меня есть опыт работы с веб поэтому я знаю куда смотреть там, но пояснять это - фактически решать задачу, я не буду))

#8
19:48, 22 мар 2022

я не хочу негативить, но мне кажется можно в браузере нажать правой кнопкой мыши зайти во вкладку Sources увидеть в списке объектов amChart5, и присмотреться что библиотека, зайти в неё и в исходниках будут все алгоритмы, названия,  и тд  открыть демку на оФФ сайте ТУц
и там есть отдельный код проекта и библиотеки в целом, или там я не знаю на Ассемблере какая то магия происходит, да и какой смысл вообще велосипед изобретать, нобелевскую вряд ли получишь, если только новый алгоритм напишешь, очень странная просьба мне кажется в итоге.
даже в Д3 я думаю всё тоже самое будет, и ещё где нибудь


melvy
Постоялец
(скорее всего меньше 5 дней ушлобы) -> Красавчик за 5 дней расковырять 27к(и только JS) строк и понять что там происходит, похвалу тебе в руки

#9
(Правка: 22:24) 22:24, 22 мар 2022

nordron01
веб дизайн делается по "картинке" а не по готовому примеру
сделай скриншот сайта и повтори смотря на скриншот и базовые туториалы как я выше описал
что что ты описал - какойто подход через задницу к разработке

#10
10:05, 23 мар 2022

Если это тестовое задание, то на очень серьёзную позицию и для очень серьёзного соискателя.

ПрограммированиеФорум2D графика и изометрия