今天，我想向大家展示如何巧妙地使用HTML、CSS排序動畫和SVG濾鏡把生活中可能最可愛的東西之一——動物畫到網頁上。我們將探討繪製動物的兩種技術：一種使用純HTML和CSS，另一種使用內聯SVG背景影像。
此演示高度實驗性質——動畫SVG濾鏡目前僅在Chrome中可用。
所涉及的動畫也很複雜，因此本教程將重點介紹建立這些動物以及栩栩如生的動作所涉及的不同技術。放飛你的創意，自行創作獨特和俏皮的動物動畫吧。
話不多說，開始咯！
塑造動物外形
演示使用兩種不同的技術來建立動物不同身體部位的形狀。哈士奇使用CSS border-radius屬性，狐狸使用內聯背景SVG影像，因為後者的形狀更復雜。
HTML標記
兩隻動物都使用巢狀的HTML部分對身體部位進行分組。分組的概念對於創造逼真的動畫效果非常重要——當頭部移動時，眼睛和耳朵也應該保持一起移動，因為它們是長在頭上的。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!-- Markup for the fox head --> <div class="fox-head"> <div class="fox-face"> <div class="fox-ears"> <div class="fox-ear"/> <div class="fox-ear"/> </div> <div class="fox-skull"/> <div class="fox-front"/> <div class="fox-eyes"/> <div class="fox-nose"/> </div> </div> <!-- Markup for the husky head --> <div class="husky-head"> <div class="husky-ear"/> <div class="husky-ear"/> <div class="husky-face"> <div class="husky-eye"/> <div class="husky-eye"/> <div class="husky-nose"/> <div class="husky-mouth"> <div class="husky-lips"/> <div class="husky-tongue"/> </div> </div> </div> |
每個部分均可以獨立移動，並隨著其父元素的移動而移動，這樣會產生更逼真的效果。不知道你發現沒有，尾巴是深深巢狀到其他尾部元件中的。當每個尾巴部分相對於其母體定位，然後旋轉相同的量時，就會產生均勻曲線的視覺感。
用CSS塑造圖形
CSS的border-radius屬性大量用來塑造哈士奇的形象。對於許多元素要素，需要對每個邊界半徑進行逐個控制。例如，下面是如何構造哈士奇後腿的程式碼：
|
1 2 3 4 5 |
.husky-hind-leg { // ... border-top-left-radius: 35% 100%; border-top-right-radius: 40% 100%; } |
第一個數字表示曲線從頂部/底部邊緣開始的深度，第二個數字表示曲線從左/右邊緣開始的深度。
其他形狀，如前腿，不能單獨用border-radius成形，需要使用transform成形：
|
1 2 3 4 |
.husky-front-legs > .husky-leg:before { transform: skewY(-30deg) skewX(10deg); transform-origin: top right; } |
一旦圖形就位，那麼每個元素就能在其父元素中被賦予絕對的基於百分比的位置。這確保每個身體部位的精確放置以及響應性。
用SVG塑造圖形
至於狐狸，Sass-SVG被用來為每個身體部位建立複雜的SVG形狀。SVG影像可以用作背景影像，更好的是，只要它們是基於64或UTF-8編碼的，就可以被內聯編寫（為了最大限度的瀏覽器支援）。
不過，SVG程式碼手寫起來非常棘手。我使用Adobe Illustrator來建立初始形狀：
然後我將每個身體部分儲存為SVG影像。SVG程式碼通過Sass-SVG傳輸到SCSS樣式表。例如，這是狐狸的鼻子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.fox-nose:before { @ include svg((viewBox: (0 0 168 168))) { // the nose @ include svg('path', ( fill: $color-nose, d: 'M83.7,86.7c3.3,0,11.6-3.9,11.6-7.1c0-3.2-9.4-3.2-11.6-3.2c-2.2,0-11.6,0-11.6,3.2 C72.1,82.8,80.4,86.7,83.7,86.7z' )); // the line connecting the nose to the mouth @ include svg('path', ( stroke: $color-nose, fill: none, d: 'M83.7,102.3V86.7' )); // the mouth @ include svg('path', ( stroke: $color-nose, fill: none, d: 'M94.5,104.9c0,0-5.2-2.7-10.8-2.7c-5.6,0-10.8,2.7-10.8,2.7' )); } } |
這將在url()中生成一個編碼的內聯SVG字串，看起來像這樣：
|
1 2 3 |
.fox-nose:before { background-image: url("data:image/svg+xml;,%3Csvg..."); } |
由於SVG是一個背景影像，因此它可以被轉換和動畫化，就像一個HTML元素一樣。使用Sass-SVG，Sass $variables可用於完全控制SVG填充和筆觸顏色。
通過內聯SVG使狐狸響應起來很簡單。viewbox屬性值（(viewBox：(0 0 168 168))）直接來自SVG檔案，但只要保持高/寬比率，那麼包含SVG背景影像的元素可以是任意大小。狐狸頭部的所有部分都是絕對定位的，具有與.fox-head相同的高度和寬度。
“Squigglevision”和SVG濾鏡
Squigglevision是一種通過擺動形狀輪廓來模擬手繪動畫的動畫技術。這使得像狐狸和哈士奇這樣的場景看上去更加動態化和手繪化，即使動物在不動的時候也是如此。
SVG有一個稱為的濾鏡，可以給任何應用了此濾鏡的地方“噪聲”。結合濾鏡以指定畫素在每個過濾器中移動的距離。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="squiggly-0"> <feturbulence id="turbulence" basefrequency="0.02" numoctaves="3" result="noise" seed="0"/> <fedisplacementmap id="displacement" in="SourceGraphic" in2="noise" scale="2"/> </filter> <filter id="squiggly-1"> <feturbulence id="turbulence" basefrequency="0.02" numoctaves="3" result="noise" seed="1"/> <fedisplacementmap in="SourceGraphic" in2="noise" scale="3"/> </filter> <filter id="squiggly-2"> <feturbulence id="turbulence" basefrequency="0.02" numoctaves="3" result="noise" seed="2"/> <fedisplacementmap in="SourceGraphic" in2="noise" scale="2"/> </filter> <filter id="squiggly-3"> <feturbulence id="turbulence" basefrequency="0.02" numoctaves="3" result="noise" seed="3"/> <fedisplacementmap in="SourceGraphic" in2="noise" scale="3"/> </filter> <filter id="squiggly-4"> <feturbulence id="turbulence" basefrequency="0.02" numoctaves="3" result="noise" seed="4"/> <fedisplacementmap in="SourceGraphic" in2="noise" scale="1"/> </filter> </defs> </svg> |
屬性的任何元素。要建立“squigglevision”效果，關鍵幀動畫快速地一次設定一個濾鏡
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@keyframes squigglevision { 0% { -webkit-filter: url('#squiggly-0'); filter: url('#squiggly-0'); } 25% { -webkit-filter: url('#squiggly-1'); filter: url('#squiggly-1'); } 50% { -webkit-filter: url('#squiggly-2'); filter: url('#squiggly-2'); } 75% { -webkit-filter: url('#squiggly-3'); filter: url('#squiggly-3'); } 100% { -webkit-filter: url('#squiggly-4'); filter: url('#squiggly-4'); } } |
注意：這些SVG濾鏡目前在Firefox中似乎不起作用，因此可以將這樣的濾鏡動畫視為一種漸進增強處理。
給動物新增動畫特效
CSS關鍵幀不能為我們提供一種方便的排序和組合動畫的方法。解決這個問題的最好方法是將動畫計劃（故事板）作為時間軸，並使用前處理器，如Sass，生成關鍵幀。
例如狐狸，在概述每個動畫應發生的故事板之後，轉換和絕對時間偏移（秒）被用於對每個身體部分進行動畫處理。以下是SCSS中對狐狸鼻子進行概述的一個例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$animations: ( // ... 'nose': ( // resting position (4s, 5s, 7s): rotateY(-4deg), // nose down 4.5s: rotateY(-4deg) rotateX(-3deg), // fox looks left (7.5s, 9s): rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg), // fox looks right (9.5s, 12s): rotateY(7deg), // fox looks straight ahead 13s: rotateY(0), ), // ... ); |
在這裡，$animations是一類Sass map，其中鍵是動畫的名稱（例如“nose”）。每個動畫名稱的值是另一個map，其中鍵是以秒為單位的偏移或偏移列表（例如(7.5s,9s)），並且值是每個偏移鍵的transform屬性。
那麼，我們怎麼把這個map變成@keyframe動畫呢？首先，設定全域性的$duration: 17s變數——這將是每個動畫的總持續時間。然後，使用巢狀的Sass @each ... in ... 迴圈，我們可以通過對$animations map迴圈為每個動畫生成預期的CSS @keyframe宣告：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@each $animation-name, $animation in $animations { // keyframe declaration @keyframes #{$animation-name} { @each $offsets, $transform in $animation { @each $offset in $offsets { // offset declaration block #{percentage($offset / $duration)} { // transform property transform: #{$transform}; } } } } } |
這將生成如下所示的關鍵幀：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
@keyframes nose { 14.70588% { transform: rotateY(-4deg); } 23.52941% { transform: rotateY(-4deg); } 29.41176% { transform: rotateY(-4deg); } 41.17647% { transform: rotateY(-4deg); } 26.47059% { transform: rotateY(-4deg) rotateX(-3deg); } 44.11765% { transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); } 52.94118% { transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); } 55.88235% { transform: rotateY(7deg); } 70.58824% { transform: rotateY(7deg); } 76.47059% { transform: rotateY(0); } } |
在不使用SCSS的情況下，這些百分比的計算可能非常繁瑣。它們代表動畫的每個步驟中每個所需時間值相對於總$duration的百分比偏移量。
然後可以將動畫應用於它們各自的身體部位，例如animation: nose $duration none infinite;。每個動畫的持續時間都得是一樣的，這樣它們可以無縫迴圈。
逼真的Easing Curves
製作動畫的另一個重要組成部分是看上去要逼真，所以要為動畫的每個部分仔細選擇（或建立）Easing Curves。最為生動的Easing Curves是“正弦曲線”——換句話說，是平滑起伏的Easing Curves。這樣一來，自然動作就不會僵硬地起動或停止，animation-timing-function應該能反映出來。
對於狐狸和哈士奇，我使用cubic-bezier(0.645, 0.045, 0.355, 1)（在這裡預覽）。此曲線（見下文）開始略快，然後平穩地停住。當然，最好試驗曲線以找到最適合動畫的那種。
最後：在Chrome中，你可以直觀地檢查所有排序的動畫，以確保它們在正確的時間發生。你只需開啟控制檯，單擊Style選項卡，然後單擊播放按鈕即可：
希望本教程可以幫助啟發你建立更多的序列CSS動物動畫！