anime.js 實戰：實現一個帶有描邊動畫效果的覆選框

在網頁或者是APP的開發中，動畫運用得當可以起到錦上添花的作用。正確使用動畫，不但可以有助於用戶理解交互的作用，還可以大大提高網頁應用的魅力和使用體驗。並且在現在的網頁開發中，動畫已經成為了一個設計的標準，變得越來越重要。特別是在一些和用戶交互的地方，使用動畫能更好的給用戶以反饋，提升用戶的操作體驗 ...

在網頁或者是APP的開發中，動畫運用得當可以起到錦上添花的作用。正確使用動畫，不但可以有助於用戶理解交互的作用，還可以大大提高網頁應用的魅力和使用體驗。並且在現在的網頁開發中，動畫已經成為了一個設計的標準，變得越來越重要。特別是在一些和用戶交互的地方，使用動畫能更好的給用戶以反饋，提升用戶的操作體驗。

在網頁開發中，有很多種技術來實現動畫。在這篇文章中，我們使用anime.js這個輕量強大的javascript動畫庫來編寫動畫效果。使用它可以非常方便創建和管理動畫。如果你還不是很熟悉這個庫的使用方法，可以去看看以前寫一篇入門文章。這篇文章主要是使用它來實現下麵這個效果：

這個動畫效果非常簡單，主要是有一個圓圈和一個白色的勾組成。使用CSS中的border-radius可以非常方便的創建這個圓。使用它可能比使用SVG來創建圓還要簡單些並且代碼量也少點，不過在這個效果中，由於那個白色的勾要用到SVG來實現，所以圓圈也使用SVG來實現。而且SVG現在變得越來越流行了，而且SVG是矢量可以隨意放大縮小。下麵就是這個圓圈的SVG代碼：

<svg class="checkmark"
     xmlns="http://www.w3.org/2000/svg"
     width="32"
     height="32"
     viewBox="0 0 32 32">
  <circle class="circle"
          cx="16"
          cy="16"
          r="16"
          fill="#0c3"/>
</svg>

上面的代碼簡潔明瞭，主要是繪製了一個半徑為16px的綠色的圓：

先來實現一個簡單的動畫效果，把圓圈從無到有放大到完整的尺寸。要實現這個效果我們需要做兩件事情：1、給圓圈一個類名；2、實例化一個anime.js的timeline，使用它來可以把多個動畫效果組合在一起。當然你也不用timeline來創建動畫效果，可以直接使用構造函數創建動畫效果。不過使用timeline的好處是，可以更加方便的管理動畫，比如各個效果之間的銜接和延遲等，我們可以更精細的控制動畫效果。這裡的縮放效果，直接是縮放這個SVG來實現的，代碼如下所示：

var checkTimeline = anime.timeline({ autoplay: true, direction: 'alternate', loop: true });
checkTimeline
  .add({
    targets: '.checkmark',
    scale: [
      { value: [0, 1], duration: 600, easing: 'easeOutQuad' }
    ]
  })

簡單解釋下這段代碼，首先定義了anime的一個實例，並且通過autoplay、direction和loop定義了動畫是自動播放並且是一直迴圈交替來執行動畫。通過targets參數來制定要執行動畫的元素即checkmark，從0到1進行縮放，動畫時間是600毫秒，還定義了動畫的運動曲線。

在動畫製作中，動畫執行的周期時間的選擇也是一個非常需要關註的點。一方面，我們都不希望用戶等待的太久，這樣會降低整個的交互體驗，使用戶在交互的過程中感到遲鈍。另一方面，我們也不希望用戶在操作的過程中，一切的交互行為馬上發生，這樣也會顯的突兀。在這個實例中，整個放大縮小的動畫周期還是有一點點長，當然在開發階段，適當的延長點有利於調試。但是在實際生產環境中，UI動畫還是越簡單越好。所以在動畫開發中，就是要不斷地通過調試來達到理想的狀態。實際上配合一些動畫曲線工具，可以使動畫的體驗更加的舒服自然，這裡可以參考下Google的一個動畫曲線的指南。

使用曲線在動畫開發中是一個必不可少的一部分，它可以使動畫的體驗更加舒服自然。在實際開發中，為不同類型的動畫選擇不同的動畫曲線也是做動畫時，必須要註意的一點。曲線選擇也受制於具體動畫的場景，比如形狀與形狀之間的動畫，拋物線運動等等，總而言之就是要複合物理運動的一個規律。在CSS3中經常使用的運動曲線是ease-in、ease-out和ease-in-out這三個，比如ease-out表示緩出動畫，緩出使動畫在開頭處比線性動畫更快，還會在結尾處減速。ease-out緩入動畫，緩入動畫開頭慢結尾快，與緩出動畫正好相反。一般在UI界面動畫中，適合使用緩出動畫即ease-out。所以，在這個覆選框的動畫實例中，適合使用緩出動畫。

接下來是勾的動畫。像勾這類的形狀通常由SVG中的路徑（path）來實現。具體路徑的詳細介紹，可以去這篇文章看看。在實際開發中，一般都是使用諸如AI或者是Inkscape等矢量設計工具來設計，然後導出SVG格式。具體到這個勾，實現起來也非常簡單，三個錨點就可以實現一個勾的形狀。最後設置linecap的屬性的值為2.5px來實現勾的兩端的圓角效果。

這裡要註意的一點的是：要在整個設計過程中，遵守一定的設計原則。比如在這個效果中，一致性就是一個重要的設計原則。如果在靜態的圖形中，使用了圓角，那麼在動畫中最好也要保持這個圓角。當然你也可以使用方的角。總之，在整個過程中，請保持UI的一致性。

導出來代碼如下：

<path class="check"
      d="M9 16l5 5 9-9"
      fill="none"
      stroke="#fff"
      stroke-width="2.5"
      stroke-linecap="round">

和圓整合一下，效果如下：

現在看起來還不錯，只剩下最後一步就是這個勾要做一個繪製的動畫效果。使用SVG實現描邊動畫效果講了很多了，可以去看看這篇文章。在anime.js中，實現一個描邊繪製動畫也非常簡單，它提供了anime.setDashoffset這個方法來計算路徑（path）的長度，使用它就可以實現一個繪製的動畫效果。代碼如下：

checkTimeline
  .add({ ... }) /* Previous steps */
  .add({
    targets: '.check',
    strokeDashoffset: {
      value: [anime.setDashoffset, 0],
      duration: 700,
      delay: 200,
      easing: 'easeOutQuart'
    }

還是老套路，先選擇要做動畫的元素。後面是來設置路徑（path）的dashoffset的值，初始的值整個路徑（path）的長度，整個路徑是在畫布外的不可見；通過anime.setDashoffset方法，把它的值設置為0，出現在畫布中，就可以實現繪製動畫效果。

最後還通過設置勾的transform來移動它的位置，使它居於圓圈的中心位置。

OK，一個帶有動畫效果的覆選框就完成了！可以發現使用anime.js來開發動畫效果還是很簡單的。

本文主要是從How to create a checkmark animation with anime-js這篇文章整理而來，有刪減，有疏漏或者理解不到位的地方，還請多多指教！