Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.03.2022, 17:01
Профессор
Отправить личное сообщение для torsar Посмотреть профиль Найти все сообщения от torsar
 
Регистрация: 06.01.2012
Сообщений: 409

js, css - анимация
Нужны руководства/книги/учебники/статьи по теме.
Ответить с цитированием
  #2 (permalink)  
Старый 17.03.2022, 17:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,051

torsar,
в учебнике всё есть
Ответить с цитированием
  #3 (permalink)  
Старый 19.03.2022, 16:44
Профессор
Отправить личное сообщение для torsar Посмотреть профиль Найти все сообщения от torsar
 
Регистрация: 06.01.2012
Сообщений: 409

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

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

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

Нужны руководства/книги/учебники/статьи по теме.
Как делать анимашки на canvas?
Ответить с цитированием
  #4 (permalink)  
Старый 19.03.2022, 17:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,051

Сообщение от torsar
Как делать анимашки на canvas?

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

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


http://www.html5canvastutorials.com/...ouncing-balls/
Ответить с цитированием
  #5 (permalink)  
Старый 19.03.2022, 19:58
Профессор
Отправить личное сообщение для torsar Посмотреть профиль Найти все сообщения от torsar
 
Регистрация: 06.01.2012
Сообщений: 409

Как задавать траекторию движения шариков?
Математическая функция?
Кривые Безье подойдут?
Ответить с цитированием
  #6 (permalink)  
Старый 19.03.2022, 20:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,051

torsar,
https://developer.mozilla.org/ru/doc...ced_animations
Ответить с цитированием
  #7 (permalink)  
Старый 20.03.2022, 19:06
Профессор
Отправить личное сообщение для torsar Посмотреть профиль Найти все сообщения от torsar
 
Регистрация: 06.01.2012
Сообщений: 409

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

Последний раз редактировалось torsar, 20.03.2022 в 19:13.
Ответить с цитированием
  #8 (permalink)  
Старый 20.03.2022, 21:55
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,126

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

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

При раскрытии меню просто одна точка разбивается на несколько и этот же алгоритм заново равномерно распределяет все фигуры на плоскости.
Ответить с цитированием
  #9 (permalink)  
Старый 20.03.2022, 22:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,051

MallSerg,
эх, как лихо, ни фига в этом не понимаю)))
Ответить с цитированием
  #10 (permalink)  
Старый 21.03.2022, 20:07
Профессор
Отправить личное сообщение для torsar Посмотреть профиль Найти все сообщения от torsar
 
Регистрация: 06.01.2012
Сообщений: 409

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему не срабатывает анимация для transform если её добавить с помощью js Mixeyka Элементы интерфейса 4 11.07.2016 12:16
css анимация, плавный вовзрат к начальному значению FanAizu (X)HTML/CSS 4 16.01.2014 16:49
Ищу jquery, js, html, css спеца. AlexBell Работа 41 23.11.2012 07:20
JS + CSS Под загрузка фонового изображения XboxPro Элементы интерфейса 0 14.11.2012 10:16
С помощью JS добавить к ссылкам картинку в CSS wlad2 Элементы интерфейса 7 16.10.2010 23:44