2012-05-06 2 views
0

Я пытаюсь понять, что лучший способ для анимации графических элементов на моем сайте.Использование Svg для рисования фигур, анимированных с ослаблением/эластичностью и т. Д.

Я просмотрел холст html5, но, похоже, SVG является наиболее подходящим.

Я объясню, как все должно работать, и, может быть, вы, ребята, могли бы высказать свое мнение.

На странице я хочу, чтобы мои продукты включались и выключались, когда пользователь выбирает стрелки, причем только один продукт в центре за раз. Когда изображения вставляются и выходят, я хочу какое-то облегчение. Есть ли у SVG разные стили анимации, такие как эластичность и т. Д.?? Или я должен просто использовать jquery для анимации?

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

Я действительно смущен тем, как svg интегрируется с другими веб-технологиями.

редактировать:

Можно анимировать точек в векторном многоугольник?

<svg id="svgelem2" height="190" xmlns="http://www.w3.org/2000/svg"> 
<polygon points="0,0 800,0, 800,180 0,180 " fill="white" filter="url(#dropshadow)" /> 

ответ

0

ли вы попробовать библиотеку Raphaël.js. Это позволяет вам манипулировать SVG по своему усмотрению.

http://raphaeljs.com/

+0

спасибо, что проверил это. Мне просто интересно, должен ли я использовать SVG. Возможно, я могу все это использовать с помощью javascript? – Adam

+0

Да, загрузка анимаций может быть выполнена путем манипулирования куполом или даже с помощью правил CSS (в современных браузерах). Проверьте эффекты jquery и css-транзисторы. – demee

0

Вы можете пойти с JavaScript, но на вершине Javascript вы должны манипулировать что-то в DOM: либо прямо вверх HTML или SVG, или что-то завернутое в одном из двух.

Есть несколько популярных библиотек, которые являются либо холст на основе (paper.js, processing.js) или SVG на основе (d3, raphael). Я понимаю, что если вы хотите, чтобы ваш конечный продукт был доступен как можно большему числу платформ (все текущие версии лучших браузеров, последние три версии лучших браузеров и доминирующий мобильный телефон), вам нужно придерживаться библиотека, основанная на холсте. Не все браузеры поддерживают SVG одинаково хорошо или вообще (wikipedia has some good info на этом, конечно :)).

Анимация, безусловно, возможна, если вы визуализируете SVG with paths (что вы можете делать многоугольники с путями) ... Я уверен, что вы могли бы сделать это с помощью полигона SVG, но я не смог найти готовый пример.

Лично я любовь d3.js, но я понимаю, что он не оказывает/анимировать на холст - однако, paper.li и Processing.js действительно оказывают на холст или Рафаила к VML ... так что если достижение самой широкой аудитории вызывает беспокойство, вы можете пойти таким путем.

Этот table of browser support для SVG может быть полезным/информативным в принятии вашего решения.

+0

нет, Рафаэль делает SVG не холстом HTML5. Но он поддерживает более старые IE, потому что он также может выводить VML –

+0

@OwenMasback Спасибо за уточнение - обновлено. – dsummersl

0

Похоже, вы хотите что-то вроде этого: http://svg-wow.org/photoAlbum/album.svg Наведите указатель мыши на изображения внизу, и они облегчат и расширяют.

Смежные вопросы