Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.08.2009, 14:30
Новичок на форуме
Отправить личное сообщение для everm1nd Посмотреть профиль Найти все сообщения от everm1nd
 
Регистрация: 24.08.2009
Сообщений: 3

Сглаживание при анимации
Имеем код следующего вида:
<!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'а искажается граница.
Никто не знает рецепт лекарства?
Ответить с цитированием
  #2 (permalink)  
Старый 24.08.2009, 15:00
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Браузер использует те ресурсы, которые ему выделяет ОС, а уж как он ими распоряжается - на его совести. Вобщем всё зависит от железа и браузера. Тут мы мало что можем контролировать.
Ответить с цитированием
  #3 (permalink)  
Старый 24.08.2009, 16:45
Новичок на форуме
Отправить личное сообщение для everm1nd Посмотреть профиль Найти все сообщения от everm1nd
 
Регистрация: 24.08.2009
Сообщений: 3

Я тестировал код в Опере, ИЕ и ФФ. Ни один из браузеров не дал нормальных результатов.
Ответить с цитированием
  #4 (permalink)  
Старый 24.08.2009, 16:51
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Попробуйте оптимизировать функцию, убрав из повторяющейся части getElementById и используя саму функцию, в качестве параметра setTimeout, а не строку. Еще уменьшите время повторения и расстояние сдвига, будет перемещаться плавнее.
Ответить с цитированием
  #5 (permalink)  
Старый 24.08.2009, 19:01
Новичок на форуме
Отправить личное сообщение для everm1nd Посмотреть профиль Найти все сообщения от everm1nd
 
Регистрация: 24.08.2009
Сообщений: 3

В одной статье на js.ru (http://javascript.ru/blog/Andrej-Par...cii-JavaScript) уже была похожая тема. Там функция таймера не так нагружена, но тем не менее анимация «шумит» при большой скорости объекта.
Если уменьшить сдвиг да 1px, то все анимируется плавно, но скорость движения при таком раскладе максимум 100px/сек, т.к. таймеры в браузерах интервал меньше 10ms не поддерживают
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Снятие затемнения с экрана при получении ответа от php срипта с помощью setInterval roma86 jQuery 0 16.08.2009 12:39
Проверка статуса checkbox при xmlhttprequest vvsh AJAX и COMET 3 06.08.2009 15:51
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05
Вывод данных единожды, при открытии окна? Ggorsh Events/DOM/Window 1 28.04.2009 01:04
Не отрабатывает событие onmouseout при внедрении нового слоя ilshat Элементы интерфейса 3 28.07.2008 06:27