Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.10.2011, 17:46
Интересующийся
Отправить личное сообщение для Роман Валерьевич Посмотреть профиль Найти все сообщения от Роман Валерьевич
 
Регистрация: 19.09.2011
Сообщений: 23

анимация объекта
Задача весьма тривиальна: сделать простейшую трёхмерную анимацию в виде вращающегося по оси X плоского логотипа. Логотип не симметричен.

GIF не подходит - объект должен быть интерактивным.
Самый простой вариант Flash - но заказчик не хочет принципиально, мотивирует тем что swf не отображается на iPad. Пытался сделать средствами JavaScript в лоб через анимацию значений height и top плоского изображения лого, - выглядит не очень качественно.

рассматриваю как вариант Silverlight.
Какие еще варианты решения посоветуете?
Ответить с цитированием
  #2 (permalink)  
Старый 24.10.2011, 17:48
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

canvas
svg
гугл закрылся?
Ответить с цитированием
  #3 (permalink)  
Старый 24.10.2011, 17:50
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

Сообщение от Роман Валерьевич
Какие еще варианты решения посоветуете?
Сообщение от Роман Валерьевич
мотивирует тем что swf не отображается на iPad
если разработка только под мобильники, то там полноценный css3: http://habrahabr.ru/blogs/css/64982/.

UPD: наводим мышкой на логотип: http://www.modernizr.com/.

Последний раз редактировалось Riim, 24.10.2011 в 17:55.
Ответить с цитированием
  #4 (permalink)  
Старый 25.10.2011, 11:06
Интересующийся
Отправить личное сообщение для Роман Валерьевич Посмотреть профиль Найти все сообщения от Роман Валерьевич
 
Регистрация: 19.09.2011
Сообщений: 23

Разработка, увы, не только под мобильники, а под все браузеры, включая Safari для Apple iPad. В этом и загвоздка, иначе бы молча использовал flash.

Вот пример того что сделал я (для примера взял лого Mercedes ). Использовал библиотеку "Raphaël".
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>test</title>
<script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<script type="text/javascript">	
	var paper;
	var logo;

	function init()
	{
		paper = Raphael(document.getElementById("cnt"), 300, 298);
		logo = paper.image("http://www.mobus.com/modules/news/images/articles/changing/1214202134387587_200_200.jpg", 0, 0, 300, 298);
	}

	function rotate()
	{
		logo.animate({height:0, y:149},500, function()
			{
				logo.transform("s1,-1");
				logo.animate({height:298, y:0},500, function()
				{
					logo.animate({height:0, y:149},500, function()
					{
						logo.transform("s1,1");
						logo.animate({height:298, y:0},500);
					});
				});
			});
		
	}
</script>
</head>
<body onLoad="init();">
    <div id='cnt' onClick="rotate();" style="cursor:pointer;"></div>
</body>
</html>


Иными словами, лого должен делать полный оборот и возвращатся в исходное положение. Псевдо 3D выглядит не очень.
Canvas даст тот же результат, только реализация другая.
Вот SVG сейчас курю.

Последний раз редактировалось Riim, 25.10.2011 в 16:36.
Ответить с цитированием
  #5 (permalink)  
Старый 25.10.2011, 11:34
Интересующийся
Отправить личное сообщение для Роман Валерьевич Посмотреть профиль Найти все сообщения от Роман Валерьевич
 
Регистрация: 19.09.2011
Сообщений: 23

но так или иначе, это снова двумерная графика.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт вычисления координат объекта banderasantonio197555 Events/DOM/Window 4 16.08.2011 17:37
прямая от первого объекта до второго ntro123 Events/DOM/Window 5 09.05.2011 08:41
анимация движения объекта по прямой YISHIMITSY Элементы интерфейса 6 04.03.2010 15:47
Как по событию вызвать метод определенного экземпляра объекта jvs jQuery 3 24.12.2009 16:04
Можно ли получить имя экземпляра объекта внутри самого объекта? Ichigeki Общие вопросы Javascript 9 14.11.2008 19:00