這篇文章將為大家詳細(xì)講解有關(guān)anime.js如何實(shí)現(xiàn)帶有描邊動畫效果的復(fù)選框，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司技術(shù)團(tuán)隊(duì)10年來致力于為客戶提供網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、成都品牌網(wǎng)站建設(shè)、成都全網(wǎng)營銷、搜索引擎SEO優(yōu)化等服務(wù)。經(jīng)過多年發(fā)展，公司擁有經(jīng)驗(yàn)豐富的技術(shù)團(tuán)隊(duì)，先后服務(wù)、推廣了千余家網(wǎng)站，包括各類中小企業(yè)、企事單位、高校等機(jī)構(gòu)單位。

anime.js

anime.js是一個靈活的輕型JavaScript動畫庫。

它與CSS，個別變換，SVG，DOM屬性和JS對象。

特征

•  具體的動畫參數(shù)

•  具體目標(biāo)值

•  多個定時值

•  播放控制

•  運(yùn)動路徑

在網(wǎng)頁或者是APP的開發(fā)中，動畫運(yùn)用得當(dāng)可以起到錦上添花的作用。正確使用動畫，不但可以有助于用戶理解交互的作用，還可以大大提高網(wǎng)頁應(yīng)用的魅力和使用體驗(yàn)。并且在現(xiàn)在的網(wǎng)頁開發(fā)中，動畫已經(jīng)成為了一個設(shè)計(jì)的標(biāo)準(zhǔn)，變得越來越重要。特別是在一些和用戶交互的地方，使用動畫能更好的給用戶以反饋，提升用戶的操作體驗(yàn)。

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

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

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

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

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

簡單解釋下這段代碼，首先定義了anime的一個實(shí)例，并且通過autoplay、direction和loop定義了動畫是自動播放并且是一直循環(huán)交替來執(zhí)行動畫。通過targets參數(shù)來制定要執(zhí)行動畫的元素即checkmark，從0到1進(jìn)行縮放，動畫時間是600毫秒，還定義了動畫的運(yùn)動曲線。

在動畫制作中，動畫執(zhí)行的周期時間的選擇也是一個非常需要關(guān)注的點(diǎn)。一方面，我們都不希望用戶等待的太久，這樣會降低整個的交互體驗(yàn)，使用戶在交互的過程中感到遲鈍。另一方面，我們也不希望用戶在操作的過程中，一切的交互行為馬上發(fā)生，這樣也會顯的突兀。在這個實(shí)例中，整個放大縮小的動畫周期還是有一點(diǎn)點(diǎn)長，當(dāng)然在開發(fā)階段，適當(dāng)?shù)难娱L點(diǎn)有利于調(diào)試。但是在實(shí)際生產(chǎn)環(huán)境中，UI動畫還是越簡單越好。所以在動畫開發(fā)中，就是要不斷地通過調(diào)試來達(dá)到理想的狀態(tài)。實(shí)際上配合一些動畫曲線工具，可以使動畫的體驗(yàn)更加的舒服自然，這里可以參考下Google的一個動畫曲線的指南。

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

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

這里要注意的一點(diǎn)的是：要在整個設(shè)計(jì)過程中，遵守一定的設(shè)計(jì)原則。比如在這個效果中，一致性就是一個重要的設(shè)計(jì)原則。如果在靜態(tài)的圖形中，使用了圓角，那么在動畫中最好也要保持這個圓角。當(dāng)然你也可以使用方的角?？傊谡麄€過程中，請保持UI的一致性。

導(dǎo)出來代碼如下：

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

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

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

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

最后還通過設(shè)置勾的transform來移動它的位置，使它居于圓圈的中心位置。

OK，一個帶有動畫效果的復(fù)選框就完成了！可以發(fā)現(xiàn)使用anime.js來開發(fā)動畫效果還是很簡單的。

關(guān)于“anime.js如何實(shí)現(xiàn)帶有描邊動畫效果的復(fù)選框”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。