анимация объекта
Задача весьма тривиальна: сделать простейшую трёхмерную анимацию в виде вращающегося по оси X плоского логотипа. Логотип не симметричен.
GIF не подходит - объект должен быть интерактивным. Самый простой вариант Flash - но заказчик не хочет принципиально, мотивирует тем что swf не отображается на iPad. Пытался сделать средствами JavaScript в лоб через анимацию значений height и top плоского изображения лого, - выглядит не очень качественно. рассматриваю как вариант Silverlight. Какие еще варианты решения посоветуете? |
canvas
svg гугл закрылся? |
Цитата:
Цитата:
UPD: наводим мышкой на логотип: http://www.modernizr.com/. |
Разработка, увы, не только под мобильники, а под все браузеры, включая 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 сейчас курю. |
но так или иначе, это снова двумерная графика.
|
| Часовой пояс GMT +3, время: 05:24. |