2

私たちのウェブサイトでは、Mac OSXのTimeMachineと同様の方法で画像を表示する「コンポーネント」を開発しています。そのため、わずかに異なる位置に配置され、スクロールするとスムーズなアニメーションで多くの画像が重なります。前後。

CSS3アニメーションを使用したスパイク実装がありますが、Firefoxではあまりスムーズではなく、IE9はまったくサポートされていません（他のオプションがさらに悪い場合は、それを使用することもできます）。

SVGやCanvasでの実装を検討していますが、あまり経験がないので、まずはお願いしたいと思いました。それで：

要件：

  1. 速くなければなりません。アニメーションはスムーズでなければならず、それは難しい要件です。
  2. できるだけ多くのブラウザでサポートする必要があります。
    • 必要なブラウザは、Chrome 20以降、Firefox 14以降、IE10以降です。
    • IE9もサポートしてもらいたいのですが、どうしても必要な場合はサポートなしで生活できます。
    • Operaはあると便利ですが、必須ではありません。

オプションとそれらに関する私たちの現在の経験/意見：

  • CSS3-タスクに「適切な」テクノロジーのように見えますが、残念ながら、実装はあまりうまく機能しません。プロトタイプコードに非効率性があるかもしれませんが、現時点ではブラウザごとにサポートがかなり異なっているようです。
  • SVG-少なくともベクターグラフィックス/DOM要素ですが、経験はありません。
  • キャンバス-ゲームでも使用されるのでうまく機能することを願っていますが、すべてのピクセルの再描画がどのように機能するかを完全に想像することはできません。たぶん、processingjsのようないくつかのライブラリを使用する必要がありますか？
  • Flashまたは他のプラグイン-私はたまたまFlashをよく知っていて、Time Machineのような効果はそこでは非常に簡単な作業になることを知っていますが、現時点ではプラグインを避けたいと思います。

アドバイスをありがとう。

4

2 に答える 2

1

コンポーネントのサイズをそれほど大きくする必要はなく、800x600 ピクセル程度に制限できる場合は、Canvas で十分に機能するように思えます。

キャンバスに（スケーリングされた）ビットマップのみを描画する場合、私の経験では、iPad2 でもパフォーマンスは非常に良好です。パフォーマンスは、高解像度 (1920x1080 以上) でのみ低下し始めるため、フルスクリーン機能で使用する場合は注意が必要です! また、ドロップ シャドウなどの派手な機能もパフォーマンスを大幅に低下させる可能性があります。

Canvas にはブラウザー間の癖がほとんどないため、幅広いブラウザーで期待どおりに動作させるという点では、CSS3 や SVG を使用するよりもほとんど問題が少ないでしょう。

パフォーマンスに関する最初の要件を満たすかどうかを確認するために、Canvas を使用して手早く簡単なプロトタイプを作成することをお勧めします。

Canvas を使用する場合は、ライブラリを使用することを強くお勧めします。あなたは Flash をよく知っているので、EaselJSを見てみたいと思うかもしれません。Flash に触発された表示リストがあり、ほとんどの場合、それを使用するパフォーマンス コストは無視できます。インタラクティブな基本イベントも取得します。また、EaselJS を使用する場合、後でコードを Flash に移植することは非常に簡単です。

于 2012-07-31T14:45:34.993 に答える
0

このようなものをお探しですか？SMIL アニメーションを使用しているため、IE をサポートするには、 fakesmileなどを統合する必要があります。

于 2012-07-31T10:12:50.103 に答える