Сглаживание при анимации
Имеем код следующего вида:
<!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'а искажается граница. Никто не знает рецепт лекарства? |
Браузер использует те ресурсы, которые ему выделяет ОС, а уж как он ими распоряжается - на его совести. Вобщем всё зависит от железа и браузера. Тут мы мало что можем контролировать.
|
Я тестировал код в Опере, ИЕ и ФФ. Ни один из браузеров не дал нормальных результатов.
|
Попробуйте оптимизировать функцию, убрав из повторяющейся части getElementById и используя саму функцию, в качестве параметра setTimeout, а не строку. Еще уменьшите время повторения и расстояние сдвига, будет перемещаться плавнее.
|
В одной статье на js.ru (http://javascript.ru/blog/Andrej-Par...cii-JavaScript) уже была похожая тема. Там функция таймера не так нагружена, но тем не менее анимация «шумит» при большой скорости объекта.
Если уменьшить сдвиг да 1px, то все анимируется плавно, но скорость движения при таком раскладе максимум 100px/сек, т.к. таймеры в браузерах интервал меньше 10ms не поддерживают |
| Часовой пояс GMT +3, время: 08:29. |