10

HTML5 / JQueryのいずれか、または組み合わせで、フラッシュのようなアニメーションを作成することに興味があります。

浮かんでいるアイデアの1つは、飛んでいる鳥、キャラクターアニメーション、および「トゥイーン」のようなアニメーションシーケンスです。私はバックグラウンドでFlash開発者なので、これはすべてFlashのタイムラインベースのモーショントゥイーンシステムを介した第二の性質です。HTML5Canvas、CSS3、jQueryなどの新しいテクノロジーで何ができるのでしょうか。これらはアニメーションのようなトゥイーンでどれほど熟達していますか？読むための良い出発点は何ですか？

たとえば、http： //www.thewildernessdowntown.com/で飛んでいる鳥は驚くべきもので、3次元、可変方向、速度、回転、フラップ、速度のように見えます。Flashでは、これを比較的簡単に実現できます。セットピースのアニメーションをムービークリップとして作成し、ステージ上で生成して、さまざまな速度で、またはPV3Dでさえ、トゥイーンライトで移動しますが、キャンバス上でこれがどのように実現されるかはほとんどわかりません。 。

つまり、上記がどのように達成されたかについてのアイデア、フラッシュ以外のこのタイプのアニメーションに関する優れた読み物、および一般的なヒントをいただければ幸いです。

ありがとう

4

5 に答える 5

7

「HTML5」には、キャンバス、SVG、CSS アニメーション (および古き良き Javascript アニメーション) の 3 つのアニメーション オプションがあります。どちらを使用するかは、達成しようとしているものと、それらを実行するブラウザーによって異なります。

たとえば、モバイルをターゲットにしようとしている場合は、CSS アニメーションが唯一の選択肢です。Canvas は一般的に遅すぎるためです。また、ハニカムになるまで Android には SVG がありませんでした。また、多くの SVG 機能は iOS ではまだ有効になっていません (アニメーション化されたテキスト パスなど)。

これは、 CSS アニメーションの紹介と、アルファ版の Sencha Animator ツールの紹介です。

デスクトップの場合、Canvas は非常に優れています - 実際には Chrome 10 と IE9 でのみうまく動作しますが、特にアニメーション要素の数が増え、IE7/8 には存在しないため、Safari は少し遅くなる可能性があります (私はまだテストしていません) FF4はまだ）。

于 2011-03-28T23:36:36.467 に答える
1

html5 と javascript を使用してアニメーション化されたスターフィールドを作成するための小さなデモがあります。このページの JavaScript コードを確認してください。

于 2011-03-29T08:28:25.747 に答える
0

荒野のダウンタウンでは、svg といくつかの JavaScript を使用して鳥がマウスから逃げるようにアニメーション化されていると思います (マウスが鳥を食べることができることは誰もが知っているからです :))。

この「トランジションの瞬間」では、javascript/css3 は、何かが現れたり、別の方向に動いたりする単純なアニメーションに非常に役立つと思います。また、Mozilla と Opera は css3 トランジションのみをサポートし、しばらくの間アニメーションをサポートしないため、アニメーションを使用するのも少し複雑です。

待ってください、ハードなアニメーションを作成することはまだ可能ですが、トランジション トランスフォームと、場合によってはトランスフォーム オリジンでほとんど遊ぶ必要はありません。そこにいくつかの良い情報があります： http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/

svg の良い点は、これが「従来のフラッシュ アニメーション」のようにアニメーション化されるように構築されており、javascript と css3 で制御できることです。Javascript は、すべての「最新のブラウザ」が sunspider テストのようなテストで戦っているため、ますます強力になっています。wysiwyg エディターがきれいな css3 コードを出力するまで、それほど時間はかからないと思います (Adobe はその途上にあると思いますか?)。

一方、WebGL と呼ばれるこれらのテクノロジがあります。これにより、html5 キャンバスと本格的な JavaScript を使用して 2D および 3D アプリケーションを記述し、GPU のパワーを使用できる驚くべきことを行うことができます。

これらの新しいテクノロジーを理解するのに役立つことを願っています。

于 2011-03-28T23:16:49.320 に答える
0

2D および 3D の視覚化にキャンバスを使用するprocessingjsをチェックアウトできます。私は processingjs を使って小さな視覚化を行いましたが、かなり簡単に良い結果が得られました。

processingjs を使用する利点は、アニメーションがブラウザーだけでなくネイティブ処理ツールでも実行されることです。

于 2011-03-28T11:59:51.400 に答える