0

私のウェブサイトでグラフィック要素をアニメーション化する最良の方法は何かを考えようとしています。

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

物事がどのように機能するかを説明します。皆さんの意見をお聞かせください。

このページでは、ユーザーが矢印を選択したときに製品がスライドインおよびスライドアウトし、一度に 1 つの製品だけが中央に表示されるようにしたいと考えています。画像がスライドインおよびスライドアウトするとき、ある種のイージングが必要です。SVG には伸縮性などのさまざまなアニメーション スタイルがありますか? または、jquery を使用してアニメーション化する必要がありますか?

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

svg が他の Web テクノロジとどのように統合されるかについて、私は本当に混乱しています。

編集：

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)" />

4

3 に答える 3

0

次のようなものが必要なようですね: http://svg-wow.org/photoAlbum/album.svgマウスを下の画像の上に置くと、ゆっくりと拡大します。

于 2012-05-07T08:14:04.133 に答える
0

JavaScript を使用することもできますが、JavaScript に加えて、DOM で何かを操作する必要があります: 直接 HTML、SVG、または 2 つのうちの 1 つにラップされたものです。

キャンバス ベース ( paper.js、processing.js ) または SVG ベース ( d3、raphael )の人気のあるライブラリがいくつかあります。私の理解では、最終製品をできるだけ多くのプラットフォームで利用できるようにしたい場合 (上位ブラウザーの現在のすべてのバージョン、上位ブラウザーの最後の 3 つのバージョン、および主要なモバイル) に固執する必要があります。キャンバスベースのライブラリ。すべてのブラウザーが SVG を同等にサポートしているわけではありません (もちろん、ウィキペディアにはこれに関する良い情報があります:))。

パスを使用してSVG をレンダリングする場合(パスを使用してポリゴンを実行できます)、アニメーションは間違いなく可能です... SVG ポリゴンを使用して実行できると確信していますが、すぐに使用できる例が見つかりませんでした。

個人的には、私はd3.js が大好きですが、キャンバスにレンダリング/アニメーション化されないことは理解しています。心配、あなたはその道を行きたいかもしれません。

このSVGのブラウザー サポートの表は、決定を下す際に役立つ/参考になる場合があります。

于 2012-05-07T01:09:16.150 に答える
0

Raphael.js ライブラリを試しましたか。これにより、SVG を自由に操作できます。

http://raphaeljs.com/

于 2012-05-06T22:53:52.053 に答える