anime.js 實現(xiàn)帶有描邊動畫效果的復(fù)選框(推薦)
anime.js
anime.js是一個靈活的輕型JavaScript動畫庫。
它與CSS,個別變換,SVG,DOM屬性和JS對象。
特征
- 具體的動畫參數(shù)
- 具體目標(biāo)值
- 多個定時值
- 播放控制
- 運動路徑
在網(wǎng)頁或者是APP的開發(fā)中,動畫運用得當(dāng)可以起到錦上添花的作用。正確使用動畫,不但可以有助于用戶理解交互的作用,還可以大大提高網(wǎng)頁應(yīng)用的魅力和使用體驗。并且在現(xiàn)在的網(wǎng)頁開發(fā)中,動畫已經(jīng)成為了一個設(shè)計的標(biāo)準(zhǔn),變得越來越重要。特別是在一些和用戶交互的地方,使用動畫能更好的給用戶以反饋,提升用戶的操作體驗。
在網(wǎng)頁開發(fā)中,有很多種技術(shù)來實現(xiàn)動畫。在這篇文章中,我們使用anime.js這個輕量強(qiáng)大的javascript動畫庫來編寫動畫效果。使用它可以非常方便創(chuàng)建和管理動畫。如果你還不是很熟悉這個庫的使用方法,可以去看看以前寫一篇入門文章。這篇文章主要是使用它來實現(xiàn)下面這個效果:
這個動畫效果非常簡單,主要是有一個圓圈和一個白色的勾組成。使用CSS中的border-radius可以非常方便的創(chuàng)建這個圓。使用它可能比使用SVG來創(chuàng)建圓還要簡單些并且代碼量也少點,不過在這個效果中,由于那個白色的勾要用到SVG來實現(xiàn),所以圓圈也使用SVG來實現(xiàn)。而且SVG現(xiàn)在變得越來越流行了,而且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的綠色的圓:
先來實現(xiàn)一個簡單的動畫效果,把圓圈從無到有放大到完整的尺寸。要實現(xiàn)這個效果我們需要做兩件事情:1、給圓圈一個類名;2、實例化一個anime.js的timeline,使用它來可以把多個動畫效果組合在一起。當(dāng)然你也不用timeline來創(chuàng)建動畫效果,可以直接使用構(gòu)造函數(shù)創(chuàng)建動畫效果。不過使用timeline的好處是,可以更加方便的管理動畫,比如各個效果之間的銜接和延遲等,我們可以更精細(xì)的控制動畫效果。這里的縮放效果,直接是縮放這個SVG來實現(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的一個實例,并且通過autoplay、direction和loop定義了動畫是自動播放并且是一直循環(huán)交替來執(zhí)行動畫。通過targets參數(shù)來制定要執(zhí)行動畫的元素即checkmark,從0到1進(jìn)行縮放,動畫時間是600毫秒,還定義了動畫的運動曲線。
在動畫制作中,動畫執(zhí)行的周期時間的選擇也是一個非常需要關(guān)注的點。一方面,我們都不希望用戶等待的太久,這樣會降低整個的交互體驗,使用戶在交互的過程中感到遲鈍。另一方面,我們也不希望用戶在操作的過程中,一切的交互行為馬上發(fā)生,這樣也會顯的突兀。在這個實例中,整個放大縮小的動畫周期還是有一點點長,當(dāng)然在開發(fā)階段,適當(dāng)?shù)难娱L點有利于調(diào)試。但是在實際生產(chǎn)環(huán)境中,UI動畫還是越簡單越好。所以在動畫開發(fā)中,就是要不斷地通過調(diào)試來達(dá)到理想的狀態(tài)。實際上配合一些動畫曲線工具,可以使動畫的體驗更加的舒服自然,這里可以參考下Google的一個動畫曲線的指南。
使用曲線在動畫開發(fā)中是一個必不可少的一部分,它可以使動畫的體驗更加舒服自然。在實際開發(fā)中,為不同類型的動畫選擇不同的動畫曲線也是做動畫時,必須要注意的一點。曲線選擇也受制于具體動畫的場景,比如形狀與形狀之間的動畫,拋物線運動等等,總而言之就是要復(fù)合物理運動的一個規(guī)律。在CSS3中經(jīng)常使用的運動曲線是ease-in、ease-out和ease-in-out這三個,比如ease-out表示緩出動畫,緩出使動畫在開頭處比線性動畫更快,還會在結(jié)尾處減速。ease-out緩入動畫,緩入動畫開頭慢結(jié)尾快,與緩出動畫正好相反。一般在UI界面動畫中,適合使用緩出動畫即ease-out。所以,在這個復(fù)選框的動畫實例中,適合使用緩出動畫。
接下來是勾的動畫。像勾這類的形狀通常由SVG中的路徑(path)來實現(xiàn)。具體路徑的詳細(xì)介紹,可以去這篇文章看看。在實際開發(fā)中,一般都是使用諸如AI或者是Inkscape等矢量設(shè)計工具來設(shè)計,然后導(dǎo)出SVG格式。具體到這個勾,實現(xiàn)起來也非常簡單,三個錨點就可以實現(xiàn)一個勾的形狀。最后設(shè)置linecap的屬性的值為2.5px來實現(xiàn)勾的兩端的圓角效果。
這里要注意的一點的是:要在整個設(shè)計過程中,遵守一定的設(shè)計原則。比如在這個效果中,一致性就是一個重要的設(shè)計原則。如果在靜態(tài)的圖形中,使用了圓角,那么在動畫中最好也要保持這個圓角。當(dāng)然你也可以使用方的角??傊?,在整個過程中,請保持UI的一致性。
導(dǎo)出來代碼如下:
<path class="check" d="M9 16l5 5 9-9" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round">
和圓整合一下,效果如下:
現(xiàn)在看起來還不錯,只剩下最后一步就是這個勾要做一個繪制的動畫效果。使用SVG實現(xiàn)描邊動畫效果講了很多了。在anime.js中,實現(xiàn)一個描邊繪制動畫也非常簡單,它提供了anime.setDashoffset這個方法來計算路徑(path)的長度,使用它就可以實現(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)在畫布中,就可以實現(xiàn)繪制動畫效果。
最后還通過設(shè)置勾的transform來移動它的位置,使它居于圓圈的中心位置。
OK,一個帶有動畫效果的復(fù)選框就完成了!可以發(fā)現(xiàn)使用anime.js來開發(fā)動畫效果還是很簡單的。
總結(jié)
以上所述是小編給大家介紹的anime.js 實現(xiàn)帶有描邊動畫效果的復(fù)選框(推薦),希望對大家有所幫助。
相關(guān)文章
angular select 默認(rèn)值設(shè)置方法
下面小編就為大家?guī)硪黄猘ngular select 默認(rèn)值設(shè)置方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06利用Jasmine對Angular進(jìn)行單元測試的方法詳解
單元測試是一種能夠幫助開發(fā)者驗證代碼中某一部分有效性的技術(shù)。下面這篇文章主要給大家介紹了關(guān)于利用Jasmine對Angular進(jìn)行單元測試的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-06-06詳解AngularJS中$filter過濾器使用(自定義過濾器)
這篇文章主要介紹了詳解AngularJS中$filter過濾器使用(自定義過濾器)的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-02-02解決Angular.Js與Django標(biāo)簽沖突的方案
AngularJS和django的模板都是用{{}}來引用變量的,這就導(dǎo)致了沖突,所以這篇文章主要就給大家介紹了如何解決Angular.Js與Django標(biāo)簽沖突的方案,有需要的朋友們可以參考借鑒,下面來一起學(xué)習(xí)學(xué)習(xí)吧。2016-12-12AngularJS 打開新的標(biāo)簽頁實現(xiàn)代碼
本文通過實例代碼給大家介紹了angularJS 打開新的標(biāo)簽頁方法,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-09-09Angularjs+bootstrap+table多選(全選)支持單擊行選中實現(xiàn)編輯、刪除功能
這篇文章主要介紹了Angularjs bootstrap table多選(全選)支持單擊行選中實現(xiàn)編輯、刪除功能,需要的朋友可以參考下2017-03-03詳解在 Angular 項目中添加 clean-blog 模板
本篇文章主要介紹了詳解在 Angular 項目中添加 clean-blog 模板,非常具有實用價值,需要的朋友可以參考下2017-07-07