Плавная анимация JavaScript - PullRequest
Новая
       17

Плавная анимация JavaScript

4 голосов
/ 24 августа 2009

Вот код: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
body { margin:0; padding:0; }
#a {
    position:absolute;
    background:#0FF;
    left:0;
    height:300px;
    width:120px;
}
input, #a {
    margin:10px;
}
</style>
<script>
function foo() {
    box = document.getElementById('a');
    var computedStyle = box.currentStyle || window.getComputedStyle(box, null);
    box.style.left = parseInt(computedStyle.left) + 10 + 'px';
    setTimeout("foo()",20);
}
</script>
</head>

<body>
<input type="button" value="RUN, FORREST, RUN!" onClick="setTimeout('foo()',20)">
<div id="a"></div>
</body>
</html>

Как видите, он анимирует DIV на странице, но анимация не четкая и плавная - граница DIV фактически деформируется. Кто-нибудь знает, как я могу заставить его работать правильно?

Ответы [ 4 ]

8 голосов
/ 24 августа 2009

То же JustLoren: на моей машине работает нормально. Я не уверен, что вы имеете в виду под "деформированием" границы ... может быть, вы говорите о разрыве ? Если так, я боюсь, что вы ничего не можете с этим поделать.

Традиционное решение разрыва состоит в том, чтобы дождаться, пока vsync нарисует ваш следующий кадр, но эта возможность недоступна в JavaScript. Никакая структура не может это исправить. (Фанаты фреймворков: перестаньте предлагать «Использовать my_favourite_framework! Это решает все проблемы!» Для вопросов JavaScript, которые вы не понимаете.)

Как подсказывает mck89, вы, безусловно, можете сделать анимацию более плавной (что также может уменьшить влияние разрыва), рисуя больше кадров, за счет увеличения мощности процессора. Вы также можете предпочесть сохранить переменную для хранения значения x, а не анализировать ее каждый раз из currentStyle. Это будет проще и более широко поддерживается браузерами.

Комментарий ETA: в JS нет конкретного минимального тайм-аута (иногда я могу уменьшить его до 1 мс), но сколько кадров в секунду вы можете получить из анимации, сильно зависит от браузера и мощности машины, именно поэтому, как правило, рекомендуется основывать позицию / кадр на количестве времени, прошедшего с начала анимации (используя новую функцию Date (). getTime ()), а не перемещать / изменять фиксированную величину для каждого кадра.

В любом случае, самым быстрым, что вы можете сделать, является использование интервала 16 мс, что соответствует одному кадру на мониторе с частотой 60 Гц (обычное значение по умолчанию для плоского экрана).

0 голосов
/ 24 августа 2009

По моему опыту, mootools (http://mootools.net) обеспечивает самую плавную анимацию.

0 голосов
/ 24 августа 2009

Вы должны увеличить левую координату на 1 px и установить меньшее время для интервала. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
body { margin:0; padding:0; }
#a {
    position:absolute;
    background:#0FF;
    left:0;
    height:300px;
    width:120px;
}
input, #a {
    margin:10px;
}
</style>
<script>
function foo() {
    box = document.getElementById('a');
    var computedStyle = box.currentStyle || window.getComputedStyle(box, null);
    box.style.left = parseInt(computedStyle.left) + 1 + 'px';
    setTimeout("foo()",1);
}
</script>
</head>

<body>
<input type="button" value="RUN, FORREST, RUN!" onClick="setTimeout('foo()',20)">
<div id="a"></div>
</body>
</html>
0 голосов
/ 24 августа 2009

JQuery, YUI и почти любая другая библиотека js предоставляют утилиту анимации, возможно, вам стоит взглянуть на них.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...