Анимация и JavaScript - JavaScript, Ajax

Я спрошу? · 02.12.2011, 18:44

Здравствуйте!

Анимация объекта происходит путем вызова функции в которой, например, меняем угол объекта на 1 градус, тем самым вращаем наш объект. Вызываем функцию с интервалом - SetInterval(функция, интервал в миллисекундах).

Как-то так это выглядит:

Код:

function rotateObject()
{
	...
	
	angle = angle + 1;
	object.rotate(angle, X, Y)
	
	...
}

function startRotate()
{
	window.setInterval("rotateObject();", 20);
}

Проблема заключается в следующем:
Анимация (вращение) объекта происходит постоянно, и если таких объектов несколько, то приходится каждого объекта создавать еще одну функцию и также вызывать её с интервалом. В результате, естественно, процессору становится, мягко говоря - не комфортно.

Вопрос - есть ли способ оптимальной анимации такого рода случаев?

Объекты нарисованы в векторной графике при помощи библиотеки Raphael.js. (Если проблему можно решить используя альтернативный метод рисования - опишите пожалуйста).

P.S. Есть 6-ть объектов анимация которых происходит способом описанным выше. Анимация происходит так быстро что складывается впечатление что функции работают асинхронно (учитывая что у нас в распоряжении всего один поток, т.к. дело имеем с интерпретатором)

. Процессор загружен, и если необходимо добавить, к примеру, еще 30ть таких объектов - пиши пропало...

Ах да... интим и .GIF - не предлагать

nerv · 03.12.2011, 10:35

http://javascript.ru/blog/Andrej-Par...cii-JavaScript

Я спрошу? · 03.12.2011, 16:32

Здравствуйте, nerv.

Эту статью читал. Да, интересная и много полезного, но решение проблемы там не увидел. Анимация там осуществляется методом который который описан в первом посте.

Тема актуальна.

Naive · 03.12.2011, 22:28

я бы поступил следующим образом:
в функцию анимации передаем объект и конечный угол поворота.
собственно, поворачиваем на 1 угол, далее
если угол не достиг нужного, вызываем через сет тайм аут эту же функцию с этими же параметрами.

функция старт ротэйт для этого будет не нужна

Виталий Желтяков · 03.12.2011, 22:42

Здесь проблема в перерисовке страницы, которая происходит при изменении угла.
Я точно не помню, но по моему есть способ задержать перерисовку. Надо думать в этом направлении.

Я спрошу? · 04.12.2011, 06:49

Здравствуйте, Naive, Виталий Желтяков.
Спасибо за советы.

Цитата:

в функцию анимации передаем объект и конечный угол поворота.
собственно, поворачиваем на 1 угол, далее
если угол не достиг нужного, вызываем через сет тайм аут эту же функцию с этими же параметрами.

Есть вопрос - если мы в функции перерисовки будем вызывать SetTimeOut, не зависнет ли браузер на время, пока объект достигнет заданного угла (учитывая что пауза между вызовом будет 0.03 секунды). Получается подобие рекурсии только с паузой. Или интерпретатор будет успевать выполнять остальной код? Вообщем - поэкспериментирую в этом направлении. О результатах сообщу.

Цитата:

Здесь проблема в перерисовке страницы, которая происходит при изменении угла.
Я точно не помню, но по моему есть способ задержать перерисовку. Надо думать в этом направлении.

Подкинули пищу для размышления

Тема актуальна

nerv · 04.12.2011, 09:02

Цитата:

Есть вопрос - если мы в функции перерисовки будем вызывать SetTimeOut, не зависнет ли браузер на время, пока объект достигнет заданного угла

А проверить?) Насколько мне известно, браузер отображает содержимое по мере загрузки страницы и, как только он натыкается на js, переключается в режим его исполнения. Кто-то по этой причине рекомендует "пихать" код в низ...

Naive · 04.12.2011, 09:22

Зависит от сложности и скорости выполнения самой функции, ну и от браузера. 6ie и без джаваскрипта может зависнуть.
Как таковой рекурсии тут нет, так как:
1)вызывается сама функция
2)вызывается таймер для вызова функции
3)функция завершается
4) -> 1)

Я спрошу? · 04.12.2011, 09:26

Цитата:

переключается в режим его исполнения

Не слышал ничего от таких режимах... Слышал о событиях, которые можно обрабатывать

Код:

Кто-то по этой причине рекомендует "пихать" код в низ...

Ну просто этот кто-то не совсем знаком а таких плюшках как window.onload. Или к примеру исполнение функций JS после того как загрузится тело документа - <body onload="функция();">

Цитата:

А проверить?)

Само собой без экспериментов никуда.

Тема актуальна

Я спрошу? · 04.12.2011, 09:42

Naive
А возможно будет эту функцию использовать как подпрограмму для анимации группы объектов? К примеру вызывать её передавая ID объектов, как вы и сказали. Как себя поведет интерпретатор...

02.12.2011, 18:44	#1
Я спрошу? Регистрация: 02.12.2011 Сообщений: 7	Анимация и JavaScript Здравствуйте! Анимация объекта происходит путем вызова функции в которой, например, меняем угол объекта на 1 градус, тем самым вращаем наш объект. Вызываем функцию с интервалом - SetInterval(функция, интервал в миллисекундах). Как-то так это выглядит: Код: `function rotateObject() { ... angle = angle + 1; object.rotate(angle, X, Y) ... } function startRotate() { window.setInterval("rotateObject();", 20); }` Проблема заключается в следующем: Анимация (вращение) объекта происходит постоянно, и если таких объектов несколько, то приходится каждого объекта создавать еще одну функцию и также вызывать её с интервалом. В результате, естественно, процессору становится, мягко говоря - не комфортно. Вопрос - есть ли способ оптимальной анимации такого рода случаев? Объекты нарисованы в векторной графике при помощи библиотеки Raphael.js. (Если проблему можно решить используя альтернативный метод рисования - опишите пожалуйста). P.S. Есть 6-ть объектов анимация которых происходит способом описанным выше. Анимация происходит так быстро что складывается впечатление что функции работают асинхронно (учитывая что у нас в распоряжении всего один поток, т.к. дело имеем с интерпретатором) . Процессор загружен, и если необходимо добавить, к примеру, еще 30ть таких объектов - пиши пропало... Ах да... интим и .GIF - не предлагать Последний раз редактировалось Я спрошу?; 03.12.2011 в 16:39.

03.12.2011, 10:35	#2
nerv Форумчанин Регистрация: 26.04.2010 Сообщений: 450	http://javascript.ru/blog/Andrej-Par...cii-JavaScript Тишина – самый громкий звук

03.12.2011, 22:28	#4
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	я бы поступил следующим образом: в функцию анимации передаем объект и конечный угол поворота. собственно, поворачиваем на 1 угол, далее если угол не достиг нужного, вызываем через сет тайм аут эту же функцию с этими же параметрами. функция старт ротэйт для этого будет не нужна Alar, верни репу!

04.12.2011, 09:22	#8
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Зависит от сложности и скорости выполнения самой функции, ну и от браузера. 6ie и без джаваскрипта может зависнуть. Как таковой рекурсии тут нет, так как: 1)вызывается сама функция 2)вызывается таймер для вызова функции 3)функция завершается 4) -> 1) Alar, верни репу!

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

03.12.2011, 16:32	#3
Я спрошу? Регистрация: 02.12.2011 Сообщений: 7	Здравствуйте, nerv. Эту статью читал. Да, интересная и много полезного, но решение проблемы там не увидел. Анимация там осуществляется методом который который описан в первом посте. Тема актуальна.

03.12.2011, 22:42	#5
Виталий Желтяков Старожил Регистрация: 19.04.2010 Сообщений: 2,702	Здесь проблема в перерисовке страницы, которая происходит при изменении угла. Я точно не помню, но по моему есть способ задержать перерисовку. Надо думать в этом направлении.

04.12.2011, 09:42	#10
Я спрошу? Регистрация: 02.12.2011 Сообщений: 7	Naive А возможно будет эту функцию использовать как подпрограмму для анимации группы объектов? К примеру вызывать её передавая ID объектов, как вы и сказали. Как себя поведет интерпретатор...

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Javascript - классы, они есть или их нету в Javascript?	Kasper1	JavaScript, Ajax	3	05.03.2011 09:42
статья - Анимация вWEB на JavaScript	Pblog	Обсуждение статей	0	03.07.2010 02:20
Анимация	SanekIrk	Общие вопросы Delphi	2	15.08.2008 21:57
Анимация	SanekIrk	Общие вопросы Delphi	11	08.08.2008 15:24