|
7 / 7 / 1
Регистрация: 03.09.2021
Сообщений: 271
|
|
Анимация на JS17.09.2024, 18:56. Показов 566. Ответов 10
Метки нет (Все метки)
Всем привет,
Есть летающие по определенной траектории элементы (они все position absolute). При клике на них - я получаю его текущее местоположение через offsetLeft и offsetTop. Вопрос, как сделать плавное перемещение элемента, на который был совершен клик, к нижней части экрана, т.е. нужно сделать bottom:5% (к примеру). Можно конечно сделать к примеру 50 шагов, разделив offsetTop на 50 и каждые 0,1 миллисекунду прибавлять к свойству top - offsetTop/50 + 'px'. Но это наверное не совсем верное решение, учитывая что можно раз за разом кликнуть на несколько элементов и тогда перерисовка будет затрагивать уже не один элемент. Наверное это можно решить при помощи requestAnimationFrame, но как и как в этом случае добиться плавности (как на обычных keyframes в css)?
0
|
|
| 17.09.2024, 18:56 | |
|
Ответы с готовыми решениями:
10
Анимация в OpenGL, а где собсно, анимация? Анимация / мини-анимация в консоли Анимация. |
|
1249 / 1165 / 178
Регистрация: 21.01.2024
Сообщений: 5,420
|
||
| 17.09.2024, 19:11 | ||
|
Ну а как делать - зависит от обстоятельств. Можно к каждому объекту по клику привязывать свою последовательность вызовов requestAnimationFrame. Можно помещать объекты в список (массив) и двигать их все одним вызовом requestAnimationFrame.
0
|
||
|
7 / 7 / 1
Регистрация: 03.09.2021
Сообщений: 271
|
||
| 18.09.2024, 12:03 [ТС] | ||
|
И ещё такой вопрос - частота вызова анимации в данном случае? к примеру, через setinterval можно вызывать ее раз в определенное время и двигать элемент на столько то пикселей/процентов. А в случае requestAnimationFrame как это контролируется, с какой периодичностью вызывается анимация?
0
|
||
|
1249 / 1165 / 178
Регистрация: 21.01.2024
Сообщений: 5,420
|
|||
| 18.09.2024, 13:34 | |||
|
1
|
|||
|
7 / 7 / 1
Регистрация: 03.09.2021
Сообщений: 271
|
|||||||||||||
| 18.09.2024, 15:43 [ТС] | |||||||||||||
|
Подскажите пожалуйста - как правильно задать время, к примеру, я отнимаю от текущего - стартовое и делю на 1000, чтобы получить секунды. Дальше подставляю в условие - по идее через 10 секунд анимация должна завершиться, но на самом деле работает не так, как хотелось бы.
0
|
|||||||||||||
|
1249 / 1165 / 178
Регистрация: 21.01.2024
Сообщений: 5,420
|
||||||||
| 18.09.2024, 15:59 | ||||||||
|
Просто время анимации использовать не очень удобно. Тогда все равно нужно как то знать какой путь должен пройти элемент. По мне проще скорость задавать Я бы примерно так сделал
0
|
||||||||
|
7 / 7 / 1
Регистрация: 03.09.2021
Сообщений: 271
|
||||
| 18.09.2024, 16:42 [ТС] | ||||
|
И почему используется для смещения const dx = v * dt; - скорость умноженную на разницу между двумя временными метками? Добавлено через 35 секунд Насчет этого примера без времени - почему он не работает, не можете ответить? Хотя вроде на первый взгляд все правильно.
0
|
||||
|
Молодой техлид)
|
|
| 18.09.2024, 17:09 | |
|
Анимации лучше делать с помощью transform: translate() так как они обрабатываются на уровне GPU читай Анализ производительности CSS-анимаций
Если можно ли сразу просчитать всю траекторию движения элемента, то рекомендую это сделать с помощью функции animate в моем блоге есть очень простой пример
0
|
|
|
1249 / 1165 / 178
Регистрация: 21.01.2024
Сообщений: 5,420
|
|||
| 18.09.2024, 17:10 | |||
|
Добавлено через 15 секунд
1
|
|||
|
7 / 7 / 1
Регистрация: 03.09.2021
Сообщений: 271
|
|||
| 19.09.2024, 00:32 [ТС] | |||
|
Добавлено через 9 минут
0
|
|||
|
1249 / 1165 / 178
Регистрация: 21.01.2024
Сообщений: 5,420
|
|
| 19.09.2024, 07:27 | |
|
1
|
|
| 19.09.2024, 07:27 | |
|
Помогаю со студенческими работами здесь
11
Анимация JS анимация Анимация Анимация
Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |
|
Новые блоги и статьи
|
|||
|
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога
SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
|
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога
SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
|
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
|
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога
SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
|
|
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога
Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip"
Извлеките архив и вы увидите. . .
|
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога
Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д.
Сборка примера
Скачайте. . .
|
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога
Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
|
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net
REST сервисы временно не работают, только через Web.
Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
|