@DivineDraft

Как сделать плавное перемещение блока?

Как можно сделать плавное перемещение блока.

Есть конструкция, где Блок двигается внутри дива, но проблема в том, что при движение на 1px слишком медленно происходит смещение, поэтому было установлено значение 5:
$(document).keydown(function(e){
        if(!$div) return;
        
        switch(e.which){
            case 65:
                $div.css('left', $div.offset().left + 5);
                break;
            case 87:
                $div.css('top', $div.offset().top + 5);
                break;
            case 68:
                $div.css('left', $div.offset().left - 5);
                break;
            case 83:
                $div.css('top', $div.offset().top - 5);
                break;
                
        }           
        
    });


Теперь двигается достаточно быстро, но возникла проблема, что есть рывки, можно ли их как-то сгладить? Пробовал добавлять к стилям блока translate, но тогда оно постоянно тормозит и не правильно выполняет действие.

Или можно ли как-то сначала сделать плавное по 1px перемещение, а затем его плавное ускорение до 5px?
  • Вопрос задан
  • 470 просмотров
Пригласить эксперта
Ответы на вопрос 2
ms-dred
@ms-dred
Вечно что то не то и что то не так...
На сколько я помню в jQuery есть animation, его и используй, тогда по идеи рывки должны исчезнуть. Если без jQuery то в цикле +1px надо делать. Или попробовать добавить в css transition, но я не знаю будет ли работать это в паре с js, надо смотреть.

А вобще судя по тому что нужно, лучше добавлять определенный класс блоку для сдвига, а в CSS уже определить transition и тогда будет счастье
Ответ написан
be_a_dancer
@be_a_dancer
Middle Backend/Fullstack Developer
Свойство, которое отвечает за плавность - transition. Translate отвечает за вид изменения, который происходит.
Рекомендую применять примерно следующую конструкцию. Элементу, который планируется анимировать добавлять свойство. transition: .3s all ease-in-out; .3s - идеальное время, которое кажется человеческому глазу наиболее плавным. all отвечает за виды анимации, на которое будет срабатывать это свойство. ease-in-out - наиболее плавный вид функции изменения. Она начинается медленно, ускоряется с пиком скорости в центре и замедляется к концу. Примерно так же действует человеческий организм и классическая физика, поэтому этот вид движения нам кажется наиболее приятным и понятным.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы