Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
7 / 7 / 1
Регистрация: 03.09.2021
Сообщений: 271

Анимация на JS

17.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
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
17.09.2024, 18:56
Ответы с готовыми решениями:

Анимация в OpenGL, а где собсно, анимация?
// Bounce.cpp // Demonstrates a simple animated rectangle program with GLUT // OpenGL SuperBible, 3rd Edition // Richard S. Wright...

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

Анимация.
Я сделала анимацию барашка, он движется ,но, когда он двигается дальше, предыдущие не стираются. Пробовала txClear(), но не работает, а...

10
 Аватар для voraa
1249 / 1165 / 178
Регистрация: 21.01.2024
Сообщений: 5,420
17.09.2024, 19:11
Цитата Сообщение от targon_kp Посмотреть сообщение
Наверное это можно решить при помощи requestAnimationFrame, но как и как в этом случае добиться плавности
requestAnimationFrame и существует, что бы обеспечить плавность. В функцию обратного вызова передается временная метка вызова. Если запоминать временную метку предыдущего вызова, можно по разности этих меток получить время между вызовами. По времени можно вычислить на сколько нужно сдвинуть элемент (зная его скорость).
Ну а как делать - зависит от обстоятельств. Можно к каждому объекту по клику привязывать свою последовательность вызовов requestAnimationFrame. Можно помещать объекты в список (массив) и двигать их все одним вызовом requestAnimationFrame.
0
7 / 7 / 1
Регистрация: 03.09.2021
Сообщений: 271
18.09.2024, 12:03  [ТС]
Цитата Сообщение от voraa Посмотреть сообщение
По времени можно вычислить на сколько нужно сдвинуть элемент (зная его скорость)
А как регулировать время работы анимации в данном случае? Вычислять когда она стартует (start = Date.now()) и делать условие if (Date.now() - start >=3000) ... - то есть 3 сек в данном примере.
И ещё такой вопрос - частота вызова анимации в данном случае? к примеру, через setinterval можно вызывать ее раз в определенное время и двигать элемент на столько то пикселей/процентов. А в случае requestAnimationFrame как это контролируется, с какой периодичностью вызывается анимация?
0
 Аватар для voraa
1249 / 1165 / 178
Регистрация: 21.01.2024
Сообщений: 5,420
18.09.2024, 13:34
Цитата Сообщение от targon_kp Посмотреть сообщение
А как регулировать время работы анимации в данном случае?
Можно и так, если важно именно время анимации. Но вы же пишете, что надо перемещать до какой то позиции (bottom: 5%) - тогда надо проверять позицию и решать надо делать следующий этап анимации или нет.
Цитата Сообщение от targon_kp Посмотреть сообщение
А в случае requestAnimationFrame как это контролируется, с какой периодичностью вызывается анимация?
Следующий шаг анимации вызывается перед следующим обновлением экрана, когда система сочтет нужным это сделать. Обычно это 16.7 мс при частоте обновления у монитора 60Гц. В другое время это делать бесполезно. Задавая через setInterval все равно будет обновляться тогда когда обновляется экран, не раньше. Но точно - это решает система. Именно поэтому там в функцию callback передается время, что бы можно было проследить сколько прошло от предыдущей анимации и вычислить на сколько нужно двигать
1
7 / 7 / 1
Регистрация: 03.09.2021
Сообщений: 271
18.09.2024, 15:43  [ТС]
Цитата Сообщение от voraa Посмотреть сообщение
Можно и так, если важно именно время анимации.
Да нужно до определенной позиции и в течение определенного времени, чтобы не было так, чтобы один элемент двигался очень быстро, другой в два раза медленнее.

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function animate(){
    let start = performance.now();  
    step(start);
    console.log('animation');       
    function step(start) {
        let value = (performance.now() - start)/1000;
        if (value < 10){
            requestAnimationFrame(step);
        }
    }
}
Добавлено через 26 минут
Цитата Сообщение от voraa Посмотреть сообщение
Следующий шаг анимации вызывается перед следующим обновлением экрана, когда система сочтет нужным это сделать.
И почему-то сама анимация (без тайминга) не срабатывает при клике. Код - объявляю стартовую позицию вне основной функции:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
button.addEventListener(
    'click',
    () => {
        let start = 2;
        console.log(start);
        function steps() {
            start++;
            button.style.top = start + "%";
            if (starts < 90){
                requestAnimationFrame(steps);
            }
        }
    }
)
0
 Аватар для voraa
1249 / 1165 / 178
Регистрация: 21.01.2024
Сообщений: 5,420
18.09.2024, 15:59
Цитата Сообщение от targon_kp Посмотреть сообщение
Да нужно до определенной позиции и в течение определенного времени, чтобы не было так, чтобы один элемент двигался очень быстро, другой в два раза медленнее.
Не очень понятно. Ну задайте какую то скорость, скажем 100px/c (или какую вам надо)
Цитата Сообщение от targon_kp Посмотреть сообщение
но на самом деле работает не так, как хотелось бы.
Вы в стр 6 какой start собираетесь использовать? Который в стр 2 определен, или который параметр функции из стр 5?

Просто время анимации использовать не очень удобно. Тогда все равно нужно как то знать какой путь должен пройти элемент. По мне проще скорость задавать

Я бы примерно так сделал
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function animate(){
    let start = performance.now();  
    let prevtime = start;
    let v = 100/1000; // скорость - пикселей в мс. (100px/с)
    
    console.log('animation'); 
          
    function step(curenttime) {
        const dt = curenttime - prevtime; // время между текущим и предыдущим вызовом
        let done = false;
        
        // тут в зависимости от dt и требуемой скорости 
        const dx = v * dt;
        // делаем смещение элемента на dx пикселей
 
        
        // Как то в зависимости от положения элемента, времени или еще чего то
        // вычисляем done = true - если больше не надо ничего двигать
        
        if (! done){
            requestAnimationFrame(step);
        }
    }
    
    requestAnimationFrame(step);
 
}
0
7 / 7 / 1
Регистрация: 03.09.2021
Сообщений: 271
18.09.2024, 16:42  [ТС]
Цитата Сообщение от voraa Посмотреть сообщение
ы в стр 6 какой start собираетесь использовать? Который в стр 2 определен, или который параметр функции из стр 5?
Да я задал его до начала функции и перебросил внутрь функции.

Цитата Сообщение от voraa Посмотреть сообщение
curenttime
А насчет текущего времени, он задается так же через performance.now() и внутри функции?

И почему используется для смещения const dx = v * dt; - скорость умноженную на разницу между двумя временными метками?

Добавлено через 35 секунд
Насчет этого примера без времени - почему он не работает, не можете ответить? Хотя вроде на первый взгляд все правильно.

Цитата Сообщение от targon_kp Посмотреть сообщение
button.addEventListener(
    'click',
    () => {
        let start = 2;
        console.log(start);
        function steps() {
            start++;
            button.style.top = start + "%";
            if (starts < 90){
                requestAnimationFrame(steps);
            }
        }
    }
)
0
Молодой техлид)
Эксперт JSЭксперт HTML/CSS
 Аватар для mr_dramm
1818 / 1056 / 329
Регистрация: 17.07.2021
Сообщений: 2,147
Записей в блоге: 14
18.09.2024, 17:09
Анимации лучше делать с помощью transform: translate() так как они обрабатываются на уровне GPU читай Анализ производительности CSS-анимаций

Если можно ли сразу просчитать всю траекторию движения элемента, то рекомендую это сделать с помощью функции animate в моем блоге есть очень простой пример
0
 Аватар для voraa
1249 / 1165 / 178
Регистрация: 21.01.2024
Сообщений: 5,420
18.09.2024, 17:10
Цитата Сообщение от targon_kp Посмотреть сообщение
Насчет этого примера без времени - почему он не работает, не можете ответить? Хотя вроде на первый взгляд все правильно.
Так у вас нет начального вызова функции steps. Есть только описание функции.

Добавлено через 15 секунд
Цитата Сообщение от targon_kp Посмотреть сообщение
Насчет этого примера без времени - почему он не работает, не можете ответить? Хотя вроде на первый взгляд все правильно.
Так у вас нет начального вызова функции steps. Есть только описание функции.
1
7 / 7 / 1
Регистрация: 03.09.2021
Сообщений: 271
19.09.2024, 00:32  [ТС]
Цитата Сообщение от mr_dramm Посмотреть сообщение
Анимации лучше делать с помощью transform: translate()
Это да, но в таком случае получается нужно вычислять общую высоту блока, в котором находится элемент, чтобы задавать в пикселях конкретное значение (чтобы было равно bottom 10% к примеру), т.к. если задавать в процентах, то элемент будет сдвигаться относительно своего расположения и высоты.

Добавлено через 9 минут
Цитата Сообщение от voraa Посмотреть сообщение
Так у вас нет начального вызова функции steps. Есть только описание функции.
Да точно) спасибо)
0
 Аватар для voraa
1249 / 1165 / 178
Регистрация: 21.01.2024
Сообщений: 5,420
19.09.2024, 07:27
Цитата Сообщение от targon_kp Посмотреть сообщение
А насчет текущего времени, он задается так же через performance.now() и внутри функции?
Ну да. В доках же все написано
https://developer.mozilla.org/... ationFrame
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
19.09.2024, 07:27
Помогаю со студенческими работами здесь

Анимация
Здравствуйте. Помогите пожалуйста. Мне нужно создать страницу с картинкой, которая, при наведении на неё курсора будет меняться на...

JS анимация
Прошу помочь советом! Задача реализовать анимацию. Имеем квадрат,при нажатии на него должен появляться круг в любом месте внутри...

Анимация
Здравствуйте народ! Скинь те пожалуйста мне готовые анимации по биологии тема &quot;Растение&quot;! Или же ссылку! Помогите пожалуйста!...

Анимация
Здравствуйте! Не получается зделать анимацию(по нажатию на кнопку происходит простой поворот картинки, которая сначала быстро вращается,...

Анимация
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Page Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;container&quot;&gt; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
Загрузка 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 , при. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru