3

これらの落書きがどのようにアニメーション化されているのか、いつも疑問に思っています。これらがどのようにアニメーション化されるかについて、誰かが詳細に説明できますか。JSを使用して画像をアニメーション化していることは知っています。しかし、それがユーザーのクリックやタイミングとどのように相互作用するかを知りたいです。また、クロスブラウザー互換性があることにも驚かされます。

ここに画像の説明を入力

4

1 に答える 1

4

次のような単純なことを行うための JavaScript には、ブラウザ間で互換性のある多くの方法があります。

a.) 要素を移動する (スタイル位置属性を変更する)
b.) 別の方法で要素のサイズを変更/編集する (画像を切り替える、色を変更するなど)
c.) マウスのホバーとクリックを検出する (非常に一般的)

滑らかなアニメーションは通常、要素の CSS 属性を少しだけ移動 (または変更) する何らかの関数によって実現されます。位置を (1,1) から (1,2) に変更するなど。この 1 ピクセルの変化は非常に滑らかに見えます。この関数は、フレームのように 1 秒間に何度も呼び出されます (この関数を 1 秒間に 15 回呼び出すと、15 FPS (フレーム/秒) のアニメーションになります)。

JavaScript イベントとその CSS 属性を変更する機能を使用し、これを 1 秒間に何度も実行すると、優れたクロスブラウザー アニメーションが生成されます :)

于 2012-10-14T22:49:52.720 に答える