最近、CSS3 のsteps() アニメーション プロパティを使用して PNG 背景アニメーションを生成する素晴らしいテクニックを学びました。この技術の主な機能は、PNGの背景画像を敷き詰めることでGIF画像のアニメーション効果を「再現」することです。
私の友人は皆、私が若い頃ストリートファイター ゲームに夢中だったことを知っています。そしてこの資料を見たとき...私の心に何が起こったか知っていますか?
デモを見る
まず、ストレート パンチ (以下のパターンのアクションです) を実装する必要があります。三番目）。最初のステップは、Photoshop を開き、これらの写真を幅 70 ピクセル、高さ 80 ピクセルに保つことです。これらの画像の作成に役立つ Texture Packer という素晴らしい Web サイトがあります。最後に、画像は次のようになります:
次に DIV が必要です。アクションはこの DIV に表示されます:
/* html */<div class="ken"></div>/* css */.ken { width:70px; height:80px; /* exactly the size of an image in our sprite */ background-image:url('../images/sprite.png'); }は省略しましたここに必要になる可能性があるブラウザーの CSS プレフィックス。次に、パンチ用の CSS コードは次のようになります。
/* css */.punch { animation: punch steps(4) 0.15s infinite; }@keyframes punch { from { background-position:0px -160px; } to { background-position:-280px -160px; }}ここで行うことは、アニメーション CSS クラス (.punch) を定義することです。基本的なアクションは、背景の位置を 0px から移動させることです。から - 280 ピクセル (X 軸に沿って)。このアクションには 4 つのフレームがあり (ステップ(4) は 4 組のパンチ画像に対応します)、このアクションは 0.15 秒で完了します。ここでの設定はループです。
DIV.ken の .punch クラスを追加/削除するメソッドも必要です。このメソッドは、コントロール キーが押されたときに呼び出されます。
/* javascript */$(document).on('keydown', function(e) { if (e.keyCode === 68) { // 68 是键盘上的D字符 $('.ken').addClass('punch'); setTimeout(function() { $ken.removeClass('punch'); }, 150); }});誰かが「D」キーを押した場合、jQuery の addClass('punch') を使用して CSS クラスを追加し、setTimeout を使用して 150 ミリ秒の遅延を設定して削除します (アクションが0.15秒で完了します）。基本的に、これはすべてのアニメーションを作成するために必要な基礎知識です。
私たちが行っていることに注意を払うと、コード内の一部の値は決して変更されないことがわかります (コードの長さと幅)画像など)、After アニメーションを作成した後、コードが大量に繰り返されていることがわかり、コードが読みにくく、保守しにくくなります。 SASS は重複コードの排除に役立ちます。
まず、animation() や keyframes() など、いくつかの基本的な @mixin を作成する必要があります。
@mixin animation($params) { -webkit-animation:$params; -moz-animation:$params; -ms-animation:$params; animation:$params;}@mixin keyframes($name) { @-webkit-keyframes $name { @content } @-moz-keyframes $name { @content } @-ms-keyframes $name { @content } @keyframes $name { @content }}画像の長さと幅を変数に保存する必要があります。 SASS 変数 ここで便利です:
$spriteWidth:70px;$spriteHeight:80px;
最後に、これをすべてまとめて、アニメーション アクションを宣言し、背景の動きの位置を計算する複雑な SASS ミックスインを作成します:
@mixin anim($animName, $steps, $animNbr, $animParams){ .#{$animName} { @content; @include animation($animName steps($steps) $animParams); } @include keyframes($animName) { from { background-position:0px (-$spriteHeight * ($animNbr - 1)); } to { background-position:-($spriteWidth * $steps) (-$spriteHeight * ($animNbr - 1)); } }}これで、1 行のコードでアニメーション アクションを作成できます。
$spriteWidth:70px;$spriteHeight:80px;/* 直拳 */@include anim($animName:punch, $steps:3, $animNbr:3, $animParams:.15s infinite);/* 踢腿 */@include anim($animName:kick, $steps:5, $animNbr:7, $animParams:.5s infinite);/* 波動拳 */@include anim($animName:hadoken, $steps:4, $animNbr:1, $animParams:.5s infinite);...
$animNbr 変数は重要です。アニメーションの計算はこの数値に基づいています。実際には、これはアニメーション内のアクション シーケンスの番号です。最初の例はロングパンチです。写真内の位置は 3、キックは 7 などです。
非常に高い頻度で衝突を検出する必要があります。光電ボールの位置 (オフセット) は 50 ミリ秒ごとにチェックされます。光電ボールのオフセットがウィンドウ幅を超える場合、ボールが境界に当たることを意味するため、すぐに .explode CSS クラスを適用する必要があります。
方法は次のとおりです。完璧ではありませんが、機能します:
var $fireball = $('<div/>', { class:'fireball' });$fireball.appendTo($ken);var isFireballColision = function(){ return $fireballPos.left + 75 > $(window).width();};var explodeIfColision = setInterval(function(){ $fireballPos = $fireball.offset(); if (isFireballColision()) { $fireball.addClass('explode'); clearInterval(explodeIfColision); setTimeout(function() { $fireball.remove(); }, 500); }}, 50);デモを見る
効果音やBGMなどの視覚効果を簡単に追加できるほか、Web RTC機能を追加して複数のコンピュータで複数のキャラクターを制御することもできます。 (NodeJS と Socket.io、または Meteor フレームワークを使用できるかもしれません) これらが私が Web 開発を好む理由です。Web 開発は無限の可能性を与えてくれます。
(英語: CSS アニメーションと JavaScript を使用してストリートファイターのデモを構築します。)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
