Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Плавно переместить DOM-элемнты (https://javascript.ru/forum/events/79521-plavno-peremestit-dom-ehlemnty.html)

gunner17 19.02.2020 00:12

Плавно переместить DOM-элемнты
 
Подскажите, как правильно по событию (а именно по keydown/keyup) плавно и без задержек перемещать элементы (div) по странице? Необходим ли requestanimationframe? Изменяю style.top/left по нажатию клавиши или нужно использовать свойство transform?
Подскажите пример если есть?)

рони 19.02.2020 00:57

gunner17,
https://javascript.ru/forum/jquery/5...tml#post358252

Aetae 19.02.2020 02:12

рони, ну прям классический случай, где скорость перемещения зависит от частоты обновления экрана.)

рони 19.02.2020 02:31

вариант от Malleys
https://javascript.ru/forum/events/7...tml#post511091

рони 19.02.2020 02:41

нажатие нескольких клавиш
 
Aetae,
попытка уйти от зависимости ))) скорость 120 пикселей в секунду.
<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    body,html{background:#FC9;height:100%}
    div{height:100px;width:100px;background:#006400;position:relative;left:200px;top:200px}
    </style>
    <script>
window.onload = function() {
        function move(t) {
                for (var a in c)
                        if (c[a]) {
                                var d = b[a][0];
                                b[d] += (t - c[a])/1000 * b[a][1];
                                c[a] = t;
                                div.style[d] = (b[d]|0) + "px"
                        }
                window.requestAnimationFrame(move)
        }
        var b = {
                        39: ["left", 120],
                        37: ["left", -120],
                        40: ["top", 120],
                        38: ["top", -120],
                        left: 200,
                        top: 200
                },
                c = {};
        window.requestAnimationFrame(move);
        var div = document.getElementById("show");
        document.body.onkeydown = function(a) {
                a = a || window.event;
                a = a.keyCode;
                a in b && (c[a] = performance.now());
        };
        document.body.onkeyup = function(a) {
                a = a || window.event;
                a = a.keyCode;
                a in b && (c[a] = false);
        }
};
</script>
</head>

<body>
<div id="show" ></div>
</body>
</html>

Vlasenko Fedor 19.02.2020 13:27

рони,
a,b,c ??? :nono: несколько лет одно и то-же
сборщик или скрипт минификации всегда сможет это сделать
когда уже привычка выроботается

рони 19.02.2020 13:31

Poznakomlus,
:-? в старом коде изменено пара строк, каким образом код должен был поменяться?

Vlasenko Fedor 19.02.2020 13:35

document.body.onkeydown = function(a)
document.body.onkeydown = function(event)

рони 19.02.2020 13:50

Poznakomlus,
я бы предпочёл сейчас addEventListener и event.code, код выше рассматривайте, как вариант проверки алгоритма на скорую руку.

Toban 30.04.2020 02:20

Ребят, подскажите. Можно ли сделать перемещение объекта (картинки например) в заданном направлении. То есть возможность двигаться вперед или назад, и есть возможность вращать объект тем самым указывая направление.

Есть пробный код. Но проблема заключается в том что после перемещения объект уже не вращается а крутится вокруг начальной точки.

<div>
<img src="https://inkscape.paint-net.ru/img/img02/1020037.png" id="Image" style="height: 50px;
width: 50px;">
</div>
<script>
window.onload = function() {
let body = document.getElementById('Image');
let angle=0;
let move=0;

function runOnKeys(func, ...codes) {
let pressed = new Set();
document.addEventListener('keydown', function(event) {
pressed.add(event.code);
for (let code of codes) { // все ли клавиши из набора нажаты?
if (!pressed.has(code)) {return;}
}
pressed.clear();
func();
});
document.addEventListener('keyup', function(event) {
pressed.delete(event.code);
});
}

function RotateRight()
{
angle++;
body.style.transform= "rotate(" + angle + "deg) translateY(" + move + "px)";  
}
function RotateLeft()
{
angle--;
body.style.transform= "rotate(" + angle + "deg) translateY(" + move + "px)";  
}
function Move(){
move--;
body.style.transform= "rotate(" + angle + "deg) translateY(" + move + "px)"; }

runOnKeys(RotateRight,"KeyE");
runOnKeys(RotateLeft,"KeyQ");
runOnKeys(Move,"KeyW");

}</script>


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