問題タブ [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 投票する
2 に答える
718 参照

javascript - js または css で画像の位置を固定するにはどうすればよいですか? 観覧車を持っているのですが、すべての画像が回転している立ち位置である必要があります

js または css で画像の位置を固定するにはどうすればよいですか? 私は観覧車を持っていますが、すべての画像が回転しながら立っている位置であることを望みます。こんな風になりたい : http://jsdo.it/proppy/plUk/fullscreenピンクの三角形を参照 回転中は位置が固定されます。

これが私のものです: http://letmespeakenglish.net/wheel/index.html

何か助けはありますか?どんな提案でも大歓迎です。ご協力ありがとうございました。

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

javascript - requestAnimationFrame 関数が要素を引数として受け入れるのはなぜですか?

なぜ地獄window.requestAnimationFrameが 2 番目のパラメーターを要素として受け入れているのかを理解しようとしていますが、その背後にある理由は何ですか?

この関数の根底にある実行を知りたい....

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

javascript - HTML5 のスピン ホイールの画像 (例: ルーレット ホイール)?

HTML5 で回転するルーレットをエミュレートする最良の方法は何ですか?

車輪の回転は、何らかの入力 (つまり、ユーザー入力に基づく回転速度) によって制御できる必要があります。ホイールが速く回転すると、ホイールのラベルはぼやけますが、回転が遅くなるにつれて、ホイールのラベルが読みやすくなります。

これをサポートする HTML5 ライブラリはありますか、それともアニメーションを手動でプログラムする必要がありますか?

これは、iOS デバイスでもサポートされる必要があります。

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

html - WebKitとMozillaが続く本物のCSS3アニメーションの仕様はどこにありますか?

さて、私は完全な決定的なCSS3アニメーション仕様を探しているので、ダミーのチュートリアルで言及されているものによって制限されます。インターネットを検索するときはいつでも、さまざまなチュートリアルやガイドに出くわすだけです。

WebKitとMozillaがブラウザのすべての可能性をカバーする実装に使用する本物のCSS3アニメーション仕様書を探しています。

私が理解しているのは、MozillaとWebKitには独自のタグがあり、標準はまだ受け入れられていないため、おそらく独自のドキュメントを持っているということです。本物のドキュメントへのポインタはありますか?

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

html - HTML5 : 角丸四角形をアニメーションとして描画する

次のコードで角の丸い長方形を描くことができます。私が探しているのは、これをアニメーションとして形成したいということです-ある点から始めて、始点で終わる線を描きます。(鉛筆で描くような)何かアイデアはありますか?

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

javascript - CSS3 同じ要素の複数のトランジション

背景画像の 1 つにドロップダウン効果を作成しようとしています。css3 を使用してそれを行うことができましたが、完全ではありません。

この効果は、カーテンが下がってから少し跳ね返るようなものになるはずです。css3 の問題は、最後のトランジションが前のトランジションをオーバーライドするため、同じプロパティでトランジションを行う方法がわからないことです。

これが私のコードです:

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

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

html - WebGL3Dシェイプを2Dキャンバス画像として使用する

キューブがプレイヤーに降り注ぐ2Dキャンバスゲームを作成しています。彼らの目標は、彼らを撃つかかわすことです。現在、キューブは単なる2DJavaScriptOOPエンティティです。私がやりたいのは、2DキューブグラフィックスをWebGL3Dキューブに置き換えることです。

私の質問は、2DゲームでWebGLの3Dグラフィックスを使用するための最良のアプローチは何ですか?OperaのHTML5Emberwindに似たものを探しています。画像スプライトを使用する代わりに、2D空間で3Dグラフィックスを使用してキャラクターアニメーションを作成します。

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

javascript - IMPACTJSでアニメーションを反転する方法

ImpactJSを使用してHTML5とJSでゲームを作成していますが、アニメーションが実行されている場合、どのフレームでもアニメーションのフレームフローを逆にすることができますか(反転しない)?rewind()を使用しましたが、最初のフレームに戻るだけですが、reverse()はありますか?

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

html - SVG 要素が動的に追加されるとアニメーション化されない

jQueryを使用してアニメーションに動的DOMを追加しながら、SVG要素のアニメーションを実現しようとしています。JS で DOM を生成するので、HTML ページにはこのアニメーションの要素はありません。動的に追加すると、Chrome(16) ではアニメーションが開始されませんが、FF(8) では動作します

JS で生成された動的な DOM を削除し、HTML ページに静的に配置することで、アニメーションは完璧になります。

私はそれのためにフィドルを作成しました: http://jsfiddle.net/cjP6K/7/

ここで、1 つの svg dom static を HTML ページに配置し、ドキュメントの準備が整った状態で jQuery を使用してその要素を複製しました。このシーンでは、後で JS で追加されたものはまったくアニメーション化されません!!(これは FF で動作します)

助けてください...

ありがとう、チェタン。

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

javascript - JavaScript:HTML5とボールをページ上にスライドさせる

HTML5と悪名高いCanvas要素に関しては、私は初心者です。現在、Webページに青いボールが描画されており、canvas要素をクリックすると、ボールは、drawCircle関数に渡す位置(Y)までスライドします。ボールをYの位置にジャンプさせるのではなく、ボールをYの位置にスライドアップさせたいのです。

これまでの私のコードは次のとおりです。

JSFiddle: http: //jsfiddle.net/Uam8z/1/