從60天用手工編碼的CSS重新動畫殭屍中汲取的經驗教訓

掌握60天純CSS殭屍動畫的十個經驗教訓

警告：前方高能預警，大量殭屍及惡搞內容來襲！本文將分享一些實用技巧，但示例幾乎都與殭屍和趣味笑話有關。請做好心理準備。

我將在討論中鏈接到各個動畫作品，但如果您想了解整個項目，請訪問Undead Institute查看“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本身——的工作原理。我也為後期完成的許多作品感到自豪，因為我的技能有所提高，我不得不更具創新性，並更深入地思考如何讓作品更有趣。一旦你用盡了所有簡單的選項，真正的工作和最佳成果才會開始。 （是的，最終是62天，因為我從6月1日開始，想在8月1日完成最終動畫。從6月3日開始感覺很彆扭。）

所以，真正的經驗教訓1：挑戰自我。

經驗教訓2：交互式動畫很難製作，響應式設計更難。

如果你想讓某個元素飛過屏幕並與另一個元素連接，或者似乎啟動另一個元素的移動，你必須使用所有標準的、不靈活的單位或所有靈活的單位。

三個變量決定了動畫元素在任何動畫過程中的時間和位置：持續時間、速度和距離。動畫的持續時間在animation屬性中設置，不能根據屏幕大小更改。動畫時間函數決定速度；屏幕大小也不能改變這一點。因此，如果距離隨屏幕大小而變化，則除了特定屏幕寬度和高度外，時間安排都會出現偏差。

看看Tank！在寬屏和窄屏上運行動畫。雖然我將時間安排得很接近，但如果你進行比較，你會發現當最後一個殭屍倒下時，坦克相對於殭屍的位置不同。

為了避免這些時間問題，您可以使用固定單位和一個較大的數字，例如2000或5000像素或更大，以便動畫可以覆蓋除最大顯示器外的所有顯示器的寬度（或高度）。

經驗教訓3：如果你想要響應式動畫，請將所有內容都放入（其中一個）視口單位中。

對單位比例採取折中方案（例如，以像素設置寬度和高度，但以視口單位設置位置和移動）會導致不可預測的結果。也不要同時使用vw和vh ，而應使用其中一個；哪個是主要方向。混合使用vh和vw單位會使你的動畫變得“古怪”，我相信這是專業術語。

例如，看看Superbly Zomborrific。它混合使用了像素、 vw和vh單位。前提是超級殭屍向上飛，“攝像機”跟隨。超級殭屍撞到一個壁架上並掉下來，而攝像機繼續移動，但是如果你的屏幕足夠高，你就不會理解這一點。

這也意味著，如果你需要某些東西從頂部進入——就像我在Nobody Here But Us Humans中所做的那樣——你必須將vw高度設置得足夠高，以確保在大多數縱橫比下忍者殭屍不可見。

經驗教訓3A：對SVG元素內部的移動使用像素單位。

也就是說，轉換SVG元素內的元素不應使用視口單位。 SVG標籤是它們自己的比例宇宙。 SVG“像素”將在SVG元素內保持與其所有其他SVG元素子元素的比例，而視口單位則不會。因此，在SVG元素內使用像素單位進行轉換，但在其他地方使用視口單位。

經驗教訓4：SVG在運行時縮放效果很差。

對於動畫，例如Oops…，我將殭屍的SVG圖像放大到原來的五倍，但這會使邊緣模糊。 [對“可縮放”矢量圖形揮舞拳頭。 ]

 /* 導致邊緣模糊的原始代碼*/
.zombie {
 transform: scale(1);
 width: 15vw;
}

.toggle-checkbox:checked ~ .zombie {
 animation: 5s ease-in-out 0s reverseshrinkydink forwards;
}

@keyframes reverseshrinkydink {
 0% {
  transform: scale(1);
 }
 100% {
  transform: scale(5);
 }
}

我學會了將它們的尺寸設置為動畫結束時將生效的最終尺寸，然後使用縮放變換將它們縮小到動畫開始時的尺寸。

 /* 修改後的代碼*/
.zombie {
 transform: scale(0.2);
 width: 75vw;
}

.toggle-checkbox:checked ~ .zombie {
 animation: 5s ease-in-out 0s reverseshrinkydink forwards;
}

@keyframes reverseshrinkydink {
 0% {
  transform: scale(0.2);
 }
 100% {
  transform: scale(1);
 }
}

簡而言之，修改後的代碼從圖像的縮小版本移動到完整的寬度和高度。瀏覽器始終以1進行渲染，從而使邊緣在1的比例下清晰銳利。因此，我沒有從1縮放至5，而是從0.2縮放至1。

經驗教訓5：坐標軸並非普遍真理。

元素的坐標軸與其自身保持同步，而不是頁面。在translateX之前進行90度旋轉會將translateX的方向從水平變為垂直。在Nobody Here But Us Humans… 2中，我使用180度旋轉翻轉了殭屍。但是正Y值會將忍者移動到頂部，負值會將它們移動到底部（與正常情況相反）。注意旋轉如何影響後續的變換。

經驗教訓6. 將復雜的動畫分解成同心元素以方便調整。

在創建多方向移動的複雜動畫時，添加包裝div或父元素，並分別為每個元素設置動畫，可以減少變換衝突，並防止你崩潰。

例如，在Space Cadet中，我有三個不同的變換。第一個是宇航員殭屍的上下運動。第二個是橫向移動。第三個是旋轉。我沒有嘗試在一個變換中完成所有操作，而是添加了兩個包裝元素，並在每個元素上進行了一個動畫（我還保住了我的頭髮……至少一部分）。這有助於避免上一課中討論的坐標軸問題，因為我在最內層的元素上進行了旋轉，從而保留了其父元素和祖父母元素的坐標軸。

經驗教訓7：SVG和CSS變換是相同的。

某些路徑、組和其他SVG元素在其上已經定義了變換。這可能是由優化算法造成的，或者可能只是插圖軟件生成代碼的方式。如果SVG中的路徑、組或任何其他元素已經具有SVG變換，則刪除該變換將重置元素，通常與其餘繪圖相比，其位置或大小會發生奇異變化。

由於SVG和CSS變換是相同的，因此你所做的任何CSS變換都會替換SVG變換，這意味著你的CSS變換將從該奇異位置或大小開始，而不是SVG中設置的位置或大小。

您可以將變換從SVG元素複製到CSS，並將其設置為CSS中的起始位置（首先將其更新為CSS語法）。然後，您可以在CSS動畫中對其進行修改。

例如，在我的《上班族》致敬作品Uhhh, Yeah…中，不死倫伯格的右上臂（#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 {
 transform: translate(0, -343px) scale(4, 3.55);
}

……然後，我可以創建一個不會意外重置位置和比例的動畫：

 .toggle-checkbox:checked ~ .z #arm2 { 
 animation: 6s ease-in-out 0.15s arm2move forwards;
}

@keyframes arm2move {
 0%, 100% {
  transform: translate(0, -343px) scale(4, 3.55);
 }
 40%, 60% {
  transform: translate(0, -403px) scale(4, 3.55);
 }
 50% {
  transform: translate(0, -408px) scale(4, 3.55);
 }
}

當生成SVG代碼的工具嘗試將變換“簡化”為矩陣時，此過程會更加困難。雖然您可以通過將其複製到CSS來重新創建矩陣變換，但要以你想要的方式精確地進行縮放、旋轉或平移是一項艱鉅的任務。

或者，您可以使用平移、旋轉和縮放來重新創建矩陣變換，但是如果路徑很複雜，那麼你能夠及時地重新創建它而不讓自己陷入困境的可能性很低。

最後也是最簡單的選擇是用一個組( )標籤包裝元素。為其添加一個類或ID以便於CSS訪問，並轉換組本身，從而分離變換，就像上一課中討論的那樣。

經驗教訓8：在變換SVG的一部分時，使用transform-origin保持理智

CSS transform-origin屬性移動變換發生的點。如果你試圖旋轉手臂——就像我在Clubbin' It中所做的那樣——如果你從肩膀中心旋轉手臂，你的動畫看起來會更自然，但是該路徑的自然變換原點在左上角。使用transform-origin來修復此問題，以獲得更流暢、更自然的感覺……你知道那種非常自然的像素藝術外觀……

在縮放時，變換原點也很有用，就像我在Mustachioed Oops中所做的那樣，或者在旋轉嘴部運動時，例如Super Tasty中的恐龍的下巴。如果你不更改原點，變換將使用SVG元素左上角的原點。

經驗教訓9：精靈動畫可以是響應式的

我最終為這個項目做了很多精靈動畫（即，你使用多個增量幀並在它們之間快速切換，以使角色看起來在移動）。我在一個寬文件中創建了圖像，將它們添加為背景圖像到單個幀大小的元素，使用background-size將背景圖像設置為圖像的寬度，並隱藏溢出。然後，我使用background-position和動畫時間函數step()來遍歷圖像；例如：Post-Apocalyptic Celebrations。

在項目之前，我一直使用不靈活的圖像。我會稍微縮小一下比例，這樣至少會有一些響應式效果，但我認為你無法使其成為完全靈活的寬度。但是，如果你使用SVG作為背景圖像，那麼你可以使用視口單位來隨著屏幕大小的變化來縮放元素。唯一的問題是背景位置。但是，如果你為此使用視口單位，它將保持同步。在Finally, Alone with my Sandwich…中查看這一點。

經驗教訓9A：在創建響應式精靈動畫時，使用視口單位設置圖像的背景大小

正如我在這個項目中學到的那樣，使用單一類型的單位幾乎總是可行的。最初，我使用百分比來設置精靈的背景大小。計算很簡單（100% *（步數1）），並且在大多數情況下都能正常工作。但是，在較長的動畫中，精確的幀跟踪可能會出錯，並且可能會顯示錯誤的精靈幀的部分內容。隨著向精靈添加更多幀，問題會越來越嚴重。

我不確定這究竟是為什麼導致問題的原因，但我認為這是由於在精靈表長度上累積的捨入誤差造成的（位移量隨著幀數的增加而增加）。

在我的最終動畫It Ain't Over Till the Zombie Sings中，我讓一隻恐龍張開嘴，露出一個正在唱歌的殭屍維京人（同時背景中還有激光發射，當然還有跳舞、手風琴演奏和從大砲中發射的殭屍）。是的，我知道如何舉辦派對……一個極客派對。

恐龍和維京人是為該項目製作的最長的精靈動畫之一。但是，當我使用百分比來設置背景大小時，Safari中某些大小的跟踪會出錯。在動畫結束時，來自不同幀的恐龍鼻子的一部分似乎會出現在右側，而左側則會缺少類似的鼻子部分。

這非常難以診斷，因為它在Chrome中似乎工作正常，而且我認為我在Safari中修復了它，只是查看稍微不同的屏幕大小，就會再次看到幀偏離。但是，如果我使用一致的單位——即vw用於background-size 、幀寬度和background-position ——一切都會正常工作。同樣，這歸結於使用一致的單位！

經驗教訓10：邀請人們參與項目。

雖然我在這個過程中學到了很多東西，但我大部分時間都在撞牆（經常是直到牆破了或者我的頭破了……我分不清了）。雖然這是一種方法，但即使你很固執，你最終還是會頭痛。邀請其他人參與你的項目，無論是尋求建議、指出你錯過的明顯盲點、提供反饋、幫助完成項目，還是在你感到範圍過大時鼓勵你繼續堅持下去。

因此，讓我將此經驗教訓付諸實踐。你的想法是什麼？你將如何用CSS動畫阻止殭屍群？你將承擔什麼範圍過大的項目來挑戰自己？

以上是從60天用手工編碼的CSS重新動畫殭屍中汲取的經驗教訓的詳細內容。更多資訊請關注PHP中文網其他相關文章！