問題タブ [html5-animation]

HTML5 とタグを使用したいのですが、canvasFlash のようなインターフェイスがないとアニメーションを提供するのは難しいです。HTML5 キャンバス用の WYSIWYG インターフェイスはありますか? Adobe が Flash をキャンバスに変換するソフトウェアを提供しているようですが、価格が高すぎます。

WebGL のプログラミングを開始するにはどうすればよいですか

最新の HTML5 ブラウザーでフレームレート (FPS など) を測定する最も正確な方法は何ですか? Canvas アニメーションの FPS に特に興味があります。

http://weblogs.mozillazine.org/roc/archives/2010/11/measuring_fps.htmlを見ると、 setTimeout の実行頻度を数えてフレームレートを測定しようとしても正確ではないことがわかります。ブラウザーは、スクリーン ペイントの間に Timeout コールバックを複数回実行できます。

Mozilla には window.mozPaintCount https://developer.mozilla.org/en/DOM/window.mozPaintCountがあり、正確な FPS を提供するはずです。ただし、これは Mozilla でのみ機能します。

似たような Chrome の未解決の問題があります: http://code.google.com/p/chromium/issues/detail?id=65348

Chrome でハードウェア アクセラレーション FPS を確認する手動の方法は、Chrome ベータ チャンネル (投稿日現在) を取得し、about:flags に移動して FPS カウンターをオンにすることです。ただし、Mac では、WebGL を使用している場合にのみアクセラレーションがオンになります。そのため、Chrome for Mac で Canvas の FPS を確認する方法はありません。

HTML5 FPS を正確に測定するための他の戦略は何ですか?

ありがとう！

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

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

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

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

ありがとう

しばらく前に粒子爆発以来、Googleがロゴをどのようにアニメーション化するかを理解しようとしてきましたが、今日、ロベルトブンゼンの200周年を祝うために化学が設定されています。

これはHTML5（Firefox 4、Chrome、Safari 5を使用しています）だと思いますが、誰かがそうするかどうか、そしてこれらのタイプのアニメーションを実行する方法についての良いチュートリアルがあるかどうかを確認できますか？

HTML5キャンバスでピクセルをスケーリングする方法がわかりません。これまでのところ、私はここにいます。

編集: ここでコードを更新しました。何が変わったのかわからない。

多分いくつかの画像が役立つでしょう。最初の画像のピクセル サイズは 1、2 番目のピクセル サイズは 2 です。

Edit2: 私が経験している奇妙な動作の少なくとも 1 つを示す Web ページを作成しました。

実際の例

非常に最適化された Web サイトを持っており、さらに最適化したいと考えています。具体的には、現在pngであるかなり大きなロゴがあります。ロゴはとてもシンプルな形です。

これが行われたことは今まで見たことがありませんが、HTML 内のベクター描画コードを使用して、このロゴの描画をコーディングする方法はありますか? おそらく HTML5 で可能だと思いますが、HTML4 と現在のブラウザーのサポートはどうでしょうか。

ありがとう、

ジェーン・イースタービー

HTML5 オーディオ コンテンツをプリロードしてから、再生しようとするたびにオーディオを再ダウンロードしようとするのではなく、キャッシュにあるものを使用するのに問題があります。

http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungFuPanda2_tj/

エクスペリエンスは、誰かがバナーをクリックすると、読み込みバー付きの広告がポップアップ表示されると想定されています。ローディング バーは、アニメーションに必要なすべての画像をロードしています。それまでの間、オーディオは DOM に既に存在するオーディオ タグを介してロードされます (これは問題ありません)。すべての画像が読み込まれると、読み込みバーが消え、ユーザーは続行できます。画面の下部には、クリックできる 4 つのボタンがあります。それらの 1 つをクリックするとオーディオ ファイルが再生され、画像はオーディオに同期するフリップブック スタイルのアニメーションを実行します。

音声タグ:

再生ボタン イベント リスナー:

問題は、javascript では、play() をクリックするたびに、オーディオ ファイルをリロードしてから再生することです。ボタンをクリックするたびにオーディオをリロードしようとするのではなく、最初に一度オーディオをロードして、メモリに保存されているものをオフにすることができないようです。

preload と autobuffer のプロパティを試してみましたが、モバイル サファリはこれらのプロパティを無視しているようです。それらを何に設定しても、動作は常に同じだからです。ソースタグとさまざまなファイル形式を試してみました...何もありません。

何か案は？

移動したときにスライドインおよびスライドアウトするセクションを持つページレイアウトを作成しようとしています。各セクションは画面全体に表示され（幅/高さ100％）、パーセンテージベースの値で絶対的に配置されます。

添付のサンプルには、次のように配置された4つのセクションがあります。

ここで、[a]は0 0、[b]は0 100％、[c]は100％100％、[d]は200％100％です。

ここで、ナビゲーションを実現するために、すべてのセクションを100％x 100％の絶対位置に配置され、オーバーフローした非表示のコンテナーに配置しました。セクションに移動すると、コンテナの「上」と「左」の値がセクションのオフセットの負の値にアニメーション化されます。たとえば、[d]が選択されている場合、コンテナは-200％-100％にアニメーション化されます。

奇妙な行動がたくさんあります！0％オフセットにナビゲートする場合（左に移動または上に移動）、遷移は正常に機能します。ただし、他の組み合わせ（つまり、負のオフセット）は、一見非論理的な（まだ一貫した）癖になります。

自分の目で確かめてください：http：//www.doronassayas.com/ypsite

要約は次のとおりです。

• [c]および[d]から[a]または[b]のいずれかが正常に機能します。
• [a]から[b]および[a]から[d]：最後にジャンプし、最初に戻ってアニメーションを開始します。
• [a]と[b]から[c]は最も奇妙です-遷移が始まる前に、ボディ全体（または他の高レベルの要素？）がCSSでは追跡できない視覚的なオフセットにポップします（Firebugや他の開発では見えません）ツール）。したがって、CSS値が[c]にあるはずであることを明確に示していても、[c]に到達するのではなく、（視覚的に）[d]に到達します。Firebug階層をクリックするなどのランダムな操作を行うと、ビューが正しい場所にリセットされます。WTF？

これをFirefox4、Chrome 10、Safari 5でテストしたところ、jQuery.animate（）を使用する場合でも、Louis Remiの非常にクールなjQuery.transitionプラグインを使用する場合でも、すべてのブラウザーで同じ動作が発生します。 animate（）が呼び出されたときに新しいオフセット値を使用します。

奇妙さの一貫性は私に興味をそそられます。何か案は？

どんな助けでも大歓迎です。

HTML5 キャンバス/ビデオ API または JavaScript ライブラリを使用してキャンバス画像 (canvas.toDataURL などを介してエクスポート) を取得し、それらをつなぎ合わせてブラウザーでビデオを作成する方法はありますか?