js, css - анимация

[torsar]

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

[рони]

torsar,
в учебнике всё есть

[torsar]

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

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

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

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

[рони]

Как делать анимашки на canvas?

https://developer.mozilla.org/ru/doc...sic_animations

https://medium.com/dailyjs/how-to-ge...t-cb2ccf37515c


http://www.html5canvastutorials.com/...ouncing-balls/

[torsar]

Как задавать траекторию движения шариков?
Математическая функция?
Кривые Безье подойдут?

[рони]

torsar,
https://developer.mozilla.org/ru/doc...ced_animations

[torsar]

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

[MallSerg]

>> Как реализовать эффект мыльных пузырей?
Триангуляция центров фигур затем простое суммирование всех векторов (прилежащих граней).
Получившийся вектор умноженный на скаляр -0.1 и будет направлением для перемещения фигуры.

Такой простой алгоритм приводит длинны всех прилежащих граней и как следствие всех граней к одному и тому же значению. Что в свою очередь приводит к равноудаленному распределению фигур.

При раскрытии меню просто одна точка разбивается на несколько и этот же алгоритм заново равномерно распределяет все фигуры на плоскости.

[рони]

MallSerg,
эх, как лихо, ни фига в этом не понимаю)))

[torsar]

MallSerg,
Спасибо за дельный совет.
Может в нете есть примеры, как сделать?