問題タブ [html5-animation]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
3 に答える
6098 参照

javascript - キャンバスアーククリアリング

HTML5キャンバスアークを上書きするにはどうすればよいですか?このコードは機能すると思いましたが、値がまったく同じで色が異なるにもかかわらず、境界線が残ります。欠落している境界線プロパティはありますか?

0 投票する
1 に答える
1230 参照

html - html5 回転するボール

円を描くように外側に回転するボールの HTML5 の例を見てみましょう。例としては、ルーレットの球が円の真ん中から始まり、ゆっくりと回転して止まるまで (数の範囲内で) のようなものです。

円を描くようにボールを回転させるための助けや指針をいただければ幸いです。

0 投票する
2 に答える
148 参照

html - たくさんの HTML キャンバスですか、それとも 1 つの大きなキャンバスですか?

私はたくさんの小さなウィジェット (上に描かれている<canvas>) を表示するためのインターフェースを計画しています. ウィジェットの数は、10 から 100 の間のどこかです。

1 つの大きなキャンバスでこれを行い、適切な場所に多数のウィジェットをペイントするだけです。または、s で多くの<canvas>sesを使用できます<li>。キャンバスはこの種のことに対して十分に軽量ですか? どちらかを選択する説得力のあるパフォーマンス上の理由はありますか?

0 投票する
1 に答える
2521 参照

html - フレームごとのcss3アニメーション

要素の背景位置をフレームごとに変更するアニメーションを実行する必要があります。背景の位置を変更するだけで、イージングや線形アニメーションなしでこれを行う必要があります。css3アニメーションで達成することは可能ですか?

0 投票する
1 に答える
33171 参照

html - キャンバスでズーム

テストアプリケーションでは、単純な長方形が描かれたキャンバスがあります。メソッドdrawは 100ms ごとに呼び出されます。

コードからわかるように、マウスホイールを使用してすべてをスケーリングしています。今起こっていることは、すべてがスケーリングされているということですが、つまり、長方形が10px、10pxで、マウスをその上に置くと、スケーリング後に長方形がマウスの下になくなります。(すべてのユニットがスケールアップされているため、これはもちろん正しいです。

しかし、私が望むのは、マウスの位置がGoogleマップのように「ズームアクションの中心」であるため、スケーリング前にマウスの下にあるコンテンツがその後もマウスの下にあることです。翻訳をいくつか試みましたが、翻訳の仕方がわかりません。

前もって感謝します。

これが私のコードです:

0 投票する
1 に答える
6184 参照

css - CSS3 webkitAnimationEnd イベントの順序

私は Stack Overflow が初めてで、HTML5 プログラミングも比較的初めてです。Webkit アニメーションの完了時に発生するイベントによってロジックが駆動される (主に Safari 用の) 何かを書いています。同じ長さの多数のアニメーションを同時に開始する場合、それらの完了イベントが発生すると予想される順序についてのアイデアが必要です。例:

そこで、JavaScript で赤い四角と青い四角を作成し、(Safari と Chrome で) アニメーションを開始して右に移動し、完了したらコンソールに出力します。青い四角は、アニメーションが終了したことを常に最初に示します。遊んでみると、アニメーションが開始された順序や正方形の位置とは関係がないように見えますが、それらが作成された順序です。「同時」イベント コールバックは、最も最近作成された要素で最初に発生し、その後に古い要素が続くようです。

私の質問は、この動作に頼ることができますか? 何かの規格で保証されているのですか、それともブラウザや月の満ち欠けによって変わる可能性はありますか? イベントの順序を保証できない場合、それに対処するためにどのような戦略をお勧めしますか?

0 投票する
2 に答える
871 参照

mobile-website - 携帯電話やハンドヘルドデバイスで3Gおよび2G接続速度を検出する方法はありますか?

携帯電話やハンドヘルドデバイスで3Gおよび2G接続を検出する方法はありますか?

たとえば、ユーザーが3Gを使用している場合はハイエンドのウェブサイトを配信し、ユーザーが2Gを使用している場合は高度に最適化されたバージョンを配信します。

0 投票する
1 に答える
1966 参照

javascript - HTML5 キャンバスによるスケッチ効果

手でスケッチした都市の輪郭からなる JPEG 画像があります。これらの輪郭を空の領域に左から右に描画する、ゆっくりとスケッチする効果を実現したいと考えています。HTML5 の canvas 要素に基づいてそれを行うにはどうすればよいですか? この JPEG をキャンバスにインポートしてアニメーション化されたマスクを適用するか、代わりに JPEG を一連の曲線にリファクタリングし (可能であれば、適切なツールのリストを取得したい)、これらの線をsimple-stupid ctx.lineTo(...) およびその他の曲線関数。

前もって感謝します。

0 投票する
1 に答える
309 参照

javascript - Prezi.com flash prezenation エディターのようなアプリケーションを実装するにはどうすればよいですか?

Prezi.com フラッシュ アプリのズーム プロセスがとても気に入っています。

prezi アプリの実装方法に関するドキュメントは見つかりませんでした。

アプリケーションで軌道による最終的なズームを設計または実装する方法を知っている人もいるでしょう。

最後に、それを Web サイトで使用して、会社の Web サイトのよりインタラクティブなコンテンツをユーザーに提示したいと考えています。

ありがとう。

0 投票する
2 に答える
2341 参照

css - HTML5 動画に CSS3 動作アニメーションを追加する

HTML5 ビデオに動きのアニメーションを追加しようとしていますが、結果は非常に不安定で、まったくスムーズではありません。

HTML は次のとおりです。

そしてCSS:

フィドルのリンクは次のとおりです: http://jsfiddle.net/LSAm5/

動きは非常に不安定で、ビデオの境界線とコントロールで非常に目立ちます。私は主にクロムとiPadでテストしています。

このようなアニメーションをより滑らかに見せる方法はありますか?

ありがとう。