Svgを使用して図形を描き、イージー/弾性などでアニメーションします

Question

私のウェブサイトでグラフィック要素をアニメーション化するのが最善の方法です。

私はhtml5キャンバスを調べましたが、SVGが最も適しているようです。

私は何がうまくいかなければならないか説明し、皆さんはあなたの意見を述べることができます。

このページでは、ユーザーが矢印を選択したときに、一度に中央の1つの製品のみで、製品をスライドさせて入れたいと思います。画像が前後にスライドするとき、私はある種のイージングをしたい。 SVGには弾力性などの異なるアニメーションスタイルがありますか？ jqueryを使ってアニメーションを作成するだけでいいですか？

次に、各製品には形状に含まれる説明があります。多分、図形がランダムに描画されるので、描画APIが必要になります。私はまた、このコンテナのスライドインと同様のイージングが必要です。

svgが他のウェブテクノロジーとどのように統合されているのか本当に混乱しています。

編集：

それは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)" /> 

Answer 1

あなたはRaphaël.jsのライブラリを試してみました。 SVGを自由に操作することができます。

http://raphaeljs.com/

Answer 2

あなたはjavascriptで行くが、あなたはDOMで何かを操作する必要がありますジャバスクリプトの上にすることができます：まっすぐHTML、またはSVG、または2のいずれかに包まれた何かのいずれか。

（d3、raphael）ベースのいずれかのキャンバスベース（paper.js、processing.js）やSVGあるいくつかの一般的なライブラリがあります。私の理解は、最終製品ができるだけ多くのプラットフォーム（トップブラウザの最新版、トップブラウザの最後の3つのバージョン、そして支配的なモバイルすべて）で利用できるようにするには、キャンバスベースのライブラリ。すべてのブラウザがSVGを同等にうまくサポートしているわけではありません。（もちろんこれはwikipedia has some good infoです）。

SVG with pathsをレンダリングすると、間違いなくアニメーションが可能になります（ポリゴンにパスを設定できます）。SVGポリゴンを使っても可能ですが、準備ができていません。

個人的に、私愛 d3.jsを私はそれがキャンバスにアニメーション/レンダリングしていないことを理解する - しかし、paper.liとprocessing.jsはVMLにキャンバスやラファエルにレンダリングしない...ので、もし幅広い聴衆に届くことが懸念されています。あなたはそのように行きたいかもしれません。

SVGのtable of browser supportは、あなたの意思決定に役立つ/参考になる場合があります。

Answer 3

あなたはこのようなものが欲しいのですか？http://svg-wow.org/photoAlbum/album.svg画像の上にマウスを置くと、画像がゆっくりと広がります。