手でコーディングされたCSSでゾンビを再アニメーション化した60日間から学んだ教訓

60日間の純粋なCSSゾンビアニメーションから学んだ10のレッスン

警告：高エネルギー警告先に、多数のゾンビとスプーフィングコンテンツが来ています！この記事では、いくつかの実用的なヒントを共有しますが、例はほとんどすべてゾンビと面白いジョークに関連しています。精神的に準備してください。

ディスカッションでは個々のアニメーションの作品にリンクしますが、プロジェクト全体を知りたい場合は、アンデッド研究所にアクセスして60日間のアニメーションシリーズをご覧ください。このプロジェクトは2020年6月1日に開始され、8月1日に終了しました。これは、CSSアニメーション、ユーモア、ゾンビについて書いた本の公開日と一致します。これは、ゾンビがあなたのウェブスキルを使用して世界の終わりを止めることなく世界を破壊することは明らかです。動的なHTML要素ほどゾンビを打つことはできません！

プロジェクト全体で自分のためにいくつかのルールを作成しました。

1. すべてのCSSコードは手動で記述する必要があります。 （私はただマゾヒストです。）
2. すべてのアニメーションはユーザーによってトリガーされます。 （途中のアニメーションが嫌いです。）
3. JavaScriptを可能な限り少なく使用し、アニメーションに使用しないでください。 （私はJavaScriptを最終アニメーションで一度だけ使用しました。それはオーディオを開始することでした。私はJavaScriptに反対していません。

レッスン1：80日が長すぎます。

タイトルは「60日」とは言いませんか？はい、しかし私の最初の目標は80日で、初日が到着したとき、私は20未満のアニメーションの準備ができていて、各アニメーションの平均生産時間は3日間でした。パニックに陥り、60日に変更されました。これにより、さらに20日間の準備時間が与えられ、20のアニメーション作業が削減されました。

レッスン1A：60日間はまだ長すぎます。

確かに、限られた時間、創造性、より限られた芸術的スキルで非常に多くのアニメーションを達成することは挑戦です。 30日間に短縮することを考えていましたが、それをしなかったことをうれしく思います。 60日間、私は自分自身を突破し、CSSアニメーションとCSS自体がどのように機能するかをより深く理解することができました。また、私のスキルが向上したため、後で完了した多くの作品を誇りに思っています。私はより革新的であり、作品をより面白くする方法についてもっと深く考える必要があります。すべての簡単なオプションを使い果たすと、実際の作業と最良の結果が始まります。 （はい、6月1日に開始し、8月1日に最終アニメーションを完了したかったため、62日間になります。6月3日から気まずいと感じました。）

だから、本当のレッスン1：自分自身に挑戦してください。

レッスン2：インタラクティブなアニメーションを作成するのは難しく、レスポンシブデザインはさらに困難です。

要素を画面上で飛ばして別の要素に接続したり、別の要素の動きを開始したりする場合は、標準の柔軟性のないすべてのユニットまたはすべての柔軟なユニットを使用する必要があります。

3つの変数は、アニメーションプロセス中のアニメーション要素の時間と位置を決定します：持続時間、速度、距離。アニメーションの期間はanimationプロパティで設定されており、画面サイズに応じて変更することはできません。アニメーション時間関数は速度を決定します。画面サイズはこれを変更できません。したがって、距離が画面サイズによって異なる場合、特定の画面の幅と高さを除いて、タイミングに偏りがあります。

タンクをチェックしてください！広い画面と狭い画面でアニメーションを実行します。私はそれを非常に近くに予定していますが、比較すると、最後のゾンビが落ちると、ゾンビに対するタンクの位置が異なることがわかります。

これらの時間の問題を回避するために、2000または5000ピクセル以上などの固定ユニットとより大きな数字を使用して、アニメーションが最大ディスプレイを除くすべてのディスプレイの幅（または高さ）をカバーできるようにすることができます。

レッスン3：レスポンシブなアニメーションが必要な場合は、すべてを（そのうちの1つ）ビューポートユニットに入れます。

単位の割合（たとえば、ピクセルで幅と高さを設定しますが、視野ポートユニットでの位置と動きを設定する）の妥協ソリューションを取得すると、予測不可能な結果が生じる可能性があります。また、同時にvwとvhを使用しないでください。そのうちの1つを使用します。これが主な方向です。 vhとvwユニットの組み合わせにより、アニメーションが「奇妙」になります。これは専門用語だと思います。

たとえば、見事にゾンボリフをご覧ください。ピクセル、 vw 、 vhユニットのミックスを使用します。前提は、スーパーゾンビが上向きに飛び、「カメラ」が続くということです。スーパーゾンビは棚に当たり、カメラが動き続けている間に落ちますが、画面が十分に高い場合はそれを理解できません。

これはまた、上から何かをする必要がある場合 - 私がここにいなかったように、私たちの人間以外に誰もしなかった - 忍者ゾンビがほとんどのアスペクト比で見えないことを確認するために十分にvw設定する必要があることを意味します。

レッスン3A：SVG要素内の移動には、ピクセル単位を使用します。

つまり、SVG要素内の要素を変換すると、ビューポートユニットを使用しないでください。 SVGタグは、独自の比例宇宙です。 SVG「ピクセル」は、SVG要素内の他のすべてのSVG要素の比率を維持しますが、ビューポートユニットはそうではありません。したがって、変換にはSVG要素内のピクセルユニットを使用しますが、他の場所でビューポートユニットを使用します。

レッスン4：SVGは、実行時には不十分です。

おっとなどのアニメーションについては、ゾンビのSVG画像をオリジナルの5倍にズームしましたが、これはエッジを曖昧にしました。 [「スケーラブルな」ベクトルグラフィックスに拳を握る。 ]

 /*エッジのぼやけを引き起こす元のコード*/
.Zombie {
 変換：スケール（1）;
 幅：15VW;
}

.toggle-checkbox：checked〜.zombie {
 アニメーション：5S Ease-In-Out 0S ReverseshrinkyDinkフォワード。
}

@keyframes reverseshrinkydink {
 0％{
  変換：スケール（1）;
 }
 100％{
  変換：スケール（5）;
 }
}

アニメーションの最後に有効になる最終サイズにサイズを設定し、ズーム変換を使用してアニメーションの開始時にサイズに縮小することを学びました。

 /*修正コード*/
.Zombie {
 変換：スケール（0.2）;
 幅：75VW;
}

.toggle-checkbox：checked〜.zombie {
 アニメーション：5S Ease-In-Out 0S ReverseshrinkyDinkフォワード。
}

@keyframes reverseshrinkydink {
 0％{
  変換：スケール（0.2）;
 }
 100％{
  変換：スケール（1）;
 }
}

要するに、変更されたコードは、画像の縮小バージョンからその全幅と高さに移動します。ブラウザは常に1でレンダリングされるため、エッジは1のスケールでクリアでシャープになります。したがって、1から5にスケーリングする代わりに、0.2から1にスケーリングしました。

レッスン5：軸は普遍的な真実ではありません。

要素の軸は、ページではなく、それ自体と同期して保持されます。 translateXの前に90度回転を実行すると、 translateXの方向が水平から垂直に変化します。私たちの人間以外の誰もいない…2、私は180度の回転を使ってゾンビをひっくり返した。しかし、正のY値は忍者を上部に移動し、負の値は（通常とは対照的に）底部に移動します。回転がその後の変換にどのように影響するかに注意してください。

レッスン6。複雑なアニメーションを同心要素に分解して、簡単に調整します。

複数の方向に移動する複雑なアニメーションを作成するとき、ラップDivまたは親要素を追加して各要素を個別にアニメーション化すると、変換の競合を減らし、クラッシュするのを防ぐことができます。

たとえば、Space Cadetでは、3つの異なる変換があります。 1つ目は、宇宙飛行士とゾンビの上下の動きです。 2つ目は水平ムーブメントです。 3番目は回転です。 1つの変換ですべてを実行しようとする代わりに、2つのラッピング要素を追加し、各要素でそれらをアニメーション化しました（髪を保存しました...少なくともその一部）。これは、私が最も内側の要素で回転し、その親と祖父母の軸を保持しているため、前のレッスンで議論された軸の問題を回避するのに役立ちます。

レッスン7：SVGおよびCSS変換は同じです。

一部のパス、グループ、およびその他のSVG要素は、すでに変換を定義しています。これは、最適化アルゴリズムによって引き起こされる場合があります。または、イラストソフトウェアがコードを生成する方法にすぎない場合があります。 SVGのパス、グループ、またはその他の要素にすでにSVG変換がある場合、その変換が要素をリセットすることを削除します。通常は、他の図面と比較して位置またはサイズが特異な変化を伴います。

SVGおよびCSS変換は同じであるため、CSS変換はSVG変換を置き換えます。つまり、CSS変換はSVGに設定された位置またはサイズではなく、その特異な位置またはサイズで開始されます。

変換をSVG要素からCSSにコピーして、CSSの開始位置に設定できます（最初にCSS構文に更新します）。その後、CSSアニメーションで変更できます。

たとえば、私のオフィスワーカーのトリビュート作業では、ええ…、究極のリンベルクの右上のアーム（＃ARM2要素）は、元のSVGコードに変換されています。

<path d="M0 171h9v9H0z" fill="#91c1a3" fill-rule="nonzero" transform="translate(0 -343) scale(4 3.55)"></path>

次のように、変換をCSSに移動します。

<path d="M0 171h9v9H0z" fill="#91c1a3" fill-rule="nonzero"></path>

 ＃arm2 {
 変換：翻訳（0、-343px）スケール（4、3.55）;
}

...その後、誤って位置とスケーリングをリセットしないアニメーションを作成できます。

 .toggle-checkbox：checked〜.z＃arm2 { 
 アニメーション：6S Ease-In-Out 0.15S ARM2MOVEフォワード。
}

@KeyFrames ARM2MOVE {
 0％、100％{
  変換：翻訳（0、-343px）スケール（4、3.55）;
 }
 40％、60％{
  変換：翻訳（0、-403px）スケール（4、3.55）;
 }
 50％{
  変換：翻訳（0、-408px）スケール（4、3.55）;
 }
}

このプロセスは、SVGコードを生成するツールがマトリックスへの変換を「簡素化」しようとする場合、さらに困難です。マトリックス変換をCSSにコピーすることでマトリックス変換を再現できますが、スケーリング、回転、または正確なパンを必要な方法で正確にパンすることは困難な作業です。

または、翻訳、回転、スケーリングを使用してマトリックス変換を再現することもできますが、パスが複雑な場合、問題を抱えずに時間内にそれを再現できる可能性が低くなります。

最後で最も簡単なオプションは、グループを使用することです（ ）タグラッピング要素。 CSSに簡単にアクセスできるようにクラスまたはIDを追加し、グループ自体を変換して、以前のレッスンで説明したように、変換を分離します。

レッスン8：SVGの一部を変換するときは正気を保つ

CSS transform-originプロパティは、変換が発生するポイントを移動します。腕を回転させようとすると - 私がクラブビンでやったように - 肩の中央から腕を回転させると、アニメーションはより自然に見えますが、その道の自然な変換の起源は左上隅にあります。 transform-originを使用して、これを修正して、よりスムーズで自然な感触を実現します...あなたは非常に自然なピクセルアートの外観を知っています…

ズームするときは、私が口ひげを生やしたおっとしたように、または非常においしい恐竜の顎のように口の動きを回転させるときに、起源を変換することも役立ちます。起源を変更しない場合、変換はSVG要素の左上隅の原点を使用します。

レッスン9：スプライトアニメーションは応答性があります

私はこのプロジェクトのために多くのスプライトアニメーションを実行することになりました（つまり、複数のインクリメンタルフレームを使用し、それらをすばやく切り替えてキャラクターを動かします）。ワイドファイルで画像を作成し、単一のフレームサイズの要素に背景画像として追加し、 background-sizeを使用して画像の幅に背景画像を設定し、オーバーフローを非表示にしました。次に、 background-positionとアニメーション時間関数step()を使用して、画像を繰り返します。例：黙示録的なお祝い。

プロジェクトの前に、柔軟性のない画像を使用していました。少なくともいくつかの応答効果があるように少し縮小しますが、完全に柔軟な幅にすることができるとは思いません。ただし、SVGを背景画像として使用する場合は、ビューポートユニットを使用して、画面サイズが変更されたときに要素をスケーリングできます。唯一の問題は、背景の場所です。ただし、このためにViewPortユニットを使用すると、同期したままになります。私のサンドイッチと一緒に最終的にこれをチェックしてください…。

レッスン9A：レスポンシブスプライトアニメーションを作成するときに、ビューポートユニットを使用して画像の背景サイズを設定します

このプロジェクトで学んだように、単一のタイプのユニットを使用することはほとんど常に実行可能です。最初は、スプライトの背景サイズを設定するためにパーセンテージを使用しました。計算は単純で（100％ *（ステップ1））、ほとんどの場合に正常に機能します。ただし、より長いアニメーションでは、正確なフレーム追跡が間違っている可能性があり、間違ったスプライトフレームの一部を表示する場合があります。より多くのフレームがスプライトに追加されるにつれて、問題は悪化します。

これが問題を引き起こしている理由は正確にはわかりませんが、スプライトテーブルの長さに蓄積された丸いエラーが蓄積されたためです（フレームの数が増えると変位の量が増加します）。

私の最後のアニメーションでは、ゾンビが歌うまで終わりではありません。恐竜が口を開けてゾンビバイキングの歌を明らかにしました（バックグラウンドでレーザー発射があり、もちろんダンス、アコーディオンの演奏、ゾンビが大砲から発射されました）。はい、私はパーティーを主催する方法を知っています...オタクパーティー。

恐竜とバイキングは、プロジェクトのために作られた最も長いエルフのアニメーションの1つです。ただし、バックグラウンドサイズを設定するためにパーセンテージを使用すると、Safariエラーでのいくつかのサイズの追跡があります。アニメーションの終わりには、異なるフレームからの恐竜の鼻の一部が右側に表示されているように見えますが、鼻の同様の部分は左側にありません。

これは、Chromeで正常に動作するように見えるため診断するのが非常に困難です。Safariで修正し、わずかに異なる画面サイズを見るだけで、フレームの偏差が再び表示されます。ただし、一貫したユニット、つまりbackground-size 、フレーム幅、 background-positionにvw使用する場合、すべてが正常に機能します。繰り返しますが、これは一貫したユニットを使用することになります！

レッスン10：プロジェクトに参加するように人々を招待します。

私はその過程で多くのことを学びましたが、私はほとんどの時間を壁にぶつかりました（多くの場合、壁が壊れるか頭が壊れるまで...違いはわかりません）。これは方法ですが、たとえ頑固であっても、頭痛がすることになります。アドバイスを求めている場合でも、見逃した明らかなブラインドスポットを指摘したり、フィードバックを提供したり、プロジェクトを支援したり、スコープが大きすぎると感じたときに進むように奨励するかどうかにかかわらず、他の人にプロジェクトに参加するように招待します。

このレッスンを実践しましょう。あなたの考えは何ですか？ CSSアニメーションでゾンビをどのようにブロックしますか？自分自身に挑戦するには大きすぎるプロジェクトを実施しますか？

以上が手でコーディングされたCSSでゾンビを再アニメーション化した60日間から学んだ教訓の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。