Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Хаотичное движение элементов (https://javascript.ru/forum/jquery/80146-khaotichnoe-dvizhenie-ehlementov.html)

Perepelenok 02.05.2020 14:03

Хаотичное движение элементов
 
https://codepen.io/kotya_ra/pen/VwvMNVm

Здравствуйте! Написал код, двигающий хаотично каждые 2 секунды элементы, подтормаживает у знакомого, сам тестировал на маке, а на винде вроде тормозит, есть ли возможность оптимизировать?Спасибо.

Nexus 02.05.2020 14:33

Я думаю подтормаживает у вашего знакомого из-за того, что у вас длительность анимации не зависит от дистанции, т.е. объект что 100 пикселей будет идти 1 секунду, что 10.

https://jsfiddle.net/NexusDeveloper/xy0nkue1/

Malleys 02.05.2020 16:54

Perepelenok, оно скорей там не подтормаживает, а когда движется медленно, то перескакивает по пикселям. Не стоит анимировать свойство margin, если вам нужна точная анимация. Для гладкой и субпиксельной анимации используйте transform. Также не стоит использовать старую библиотеку jQuery, в которой на самом деле не поддерживается анимация. (Они там на ЦП просчитывают промежуточные кадры)

Для вашей задачи нужна аппаратно-ускоренная CSS-анимация. CSS-анимация на то и анимация, чтобы её использовать для анимации. Вот ваш пример, я заменил «хак» с margin на анимацию. https://codepen.io/Malleys/pen/YzyrmwX?editors=0010

Цитата:

Сообщение от Nexus
Я думаю подтормаживает у вашего знакомого из-за того, что у вас длительность анимации не зависит от дистанции, т.е. объект что 100 пикселей будет идти 1 секунду, что 10.

А разве такой анимации не может быть? Конечно может! Просто надо анимировать субпиксельно... А то что вы сделали, оно тоже самое, только быстрей проскакивает по пикселям!


Часовой пояс GMT +3, время: 03:43.