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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

レッスン3A：SVG要素內(nèi)の移動には、ピクセル?yún)g位を使用します。

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

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

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

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

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

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

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

 /*修正コード*/
.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度回転を?qū)g行すると、 translateXの方向が水平から垂直に変化します。私たちの人間以外の誰もいない…2、私は180度の回転を使ってゾンビをひっくり返した。しかし、正のY値は忍者を上部に移動し、負の値は（通常とは対照的に）底部に移動します?；剀灓饯吾幛螇鋼Qにどのように影響するかに注意してください。

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

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

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

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

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

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

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

たとえば、私のオフィスワーカーのトリビュート作業(yè)では、ええ…、究極のリンベルクの右上のアーム（＃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にコピーすることでマトリックス変換を再現(xiàn)できますが、スケーリング、回転、または正確なパンを必要な方法で正確にパンすることは困難な作業(yè)です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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