前言
作為一個(gè)前端框架的重度使用者,在技術(shù)選型上也會(huì)非常注意其生態(tài)和完整性.筆者先后開發(fā)過基于vue,react,angular等框架的項(xiàng)目,碧如vue生態(tài)的elementUI, ant-design-vue, iView等成熟的UI框架, react生態(tài)的ant-design, materialUI等,這些第三方UI框架極大的降低了我們開發(fā)一個(gè)項(xiàng)目的成本和復(fù)雜度,使開發(fā)者更專注于實(shí)現(xiàn)業(yè)務(wù)邏輯和服務(wù)化.
但隨著對用戶體驗(yàn)的越來越重視,對交互體驗(yàn)要求的提高以及css3等新標(biāo)準(zhǔn)的出現(xiàn),使得web更加大放異彩, 各種動(dòng)效的實(shí)現(xiàn)都變得非常容易.筆者在研究materialUI框架時(shí)對于它的交互及其贊嘆.所以為了自己能實(shí)現(xiàn)一個(gè)類似materialUI的按鈕點(diǎn)擊動(dòng)畫,并封裝到自己的UI庫中,筆者特地總結(jié)了一些思路,希望可以和廣大的前端工程師們一起探討.
正文
首先我們看一下materialUI的按鈕點(diǎn)擊效果:
本質(zhì)上也是用了css3動(dòng)畫的特性, 筆者查看源代碼和通過點(diǎn)擊發(fā)現(xiàn)materialUI會(huì)根據(jù)點(diǎn)擊位置不同而作不同位置的動(dòng)畫,這個(gè)有點(diǎn)意思.我們先不講這么復(fù)雜的例子,下面通過css3的方案來實(shí)現(xiàn)一個(gè)類似的效果.筆者實(shí)現(xiàn)的效果如下:
上圖已經(jīng)是筆者基于react封裝好的一個(gè)按鈕Button組件,那么我們就先一步步實(shí)現(xiàn)它吧.
1. 原理
這個(gè)動(dòng)效的原理其實(shí)也很簡單,就是利用css3的transition過渡動(dòng)畫,配合::after偽對象就可以實(shí)現(xiàn),點(diǎn)擊的時(shí)候由于元素會(huì)激活:active偽類, 然后我們基于這個(gè)偽類, 在::after偽對象上做背景的動(dòng)畫即可. 偽代碼如下:
- .xButton{
- position:relative;
- overflow:hidden;
- display:inline-block;
- padding:6px1em;
- border-radius:4px;
- color:#fff;
- background-color:#000;
- user-select:none;//禁止用戶選中
- cursor:pointer;
- }
- .ripple{
- &::after{
- content:"";
- display:block;
- position:absolute;
- width:100%;
- height:100%;
- top:0;
- left:0;
- background-image:radial-gradient(circle,#fff10%,transparent11%);
- background-repeat:no-repeat;
- background-position:50%;
- transform:scale(12,12);
- opacity:0;
- transition:transform.6scubic-bezier(.75,.23,.43,.82),opacity.6s;
- }
- &:active::after{
- transform:scale(0,0);
- opacity:.5;
- }
- }
以上代碼就是通過設(shè)置transform的scale以及透明度, 并且設(shè)置一個(gè)漸變的徑向背景圖像來實(shí)現(xiàn)水波紋動(dòng)畫的為了實(shí)現(xiàn)更優(yōu)雅的動(dòng)畫,上面的css動(dòng)畫的實(shí)現(xiàn)可以借助cubic-bezier這個(gè)在線工具,他可以生成各種不同形式的貝塞爾曲線.工具長這樣:
2. 組件設(shè)計(jì)思路
僅僅用上述代碼雖然可以實(shí)現(xiàn)一個(gè)按鈕點(diǎn)擊的動(dòng)畫效果,但是并不通用, 也不符合作為一個(gè)經(jīng)驗(yàn)豐富的程序員的風(fēng)格,所以接下來我們要一步步把它封裝成一個(gè)通用的按鈕組件,讓它無所不用.
組件的設(shè)計(jì)思路我這里參考ant-design的模式, 基于開閉原則,我們知道一個(gè)可擴(kuò)展的按鈕組件一般都具備如下特點(diǎn):
- 允許用戶修改按鈕樣式
- 對外暴露按鈕事件方法
- 提供按鈕主題和外形配置
- 可插拔,可組合 基于以上幾點(diǎn),我們來設(shè)計(jì)這個(gè)react組件.
3. 基于react和css3的button組件具體實(shí)現(xiàn)
首先,我們的組件是采用react實(shí)現(xiàn), 技術(shù)點(diǎn)我會(huì)采用比較流行的umi腳手架, classnames庫以及css Module, 代碼很簡單, 我們來看看吧.
- importclassnamesfrom'classnames'
- importstylesfrom'./index.less'
- /**
- *@param{onClick}func對外暴露的點(diǎn)擊事件
- *@param{className}string自定義類名
- *@param{type}string按鈕類型primary|warning|info|default|pure
- *@param{shape}string按鈕形狀circle|radius(默認(rèn))
- *@param{block}boolean按鈕展示true|false(默認(rèn))
- */
- exportdefaultfunctionButton(props){
- let{children,onClick,className,type,shape,block}=props
-
return
- className={classnames(styles.xButton,styles.ripple,styles[type],styles[shape],block?styles.block:'',className)}
- onClick={onClick}
- >
- {children}
-
- }
這是button的js部分,也是組件設(shè)計(jì)的核心, 按鈕組件對外暴露了onClick, className, type, shape, block這幾個(gè)props, className用于修改組件類名以便控制組件樣式, type主要是控制組件的風(fēng)格, 類似于antd的primary等樣式, shape用來控制是否是圓形按鈕還是圓角按鈕, block用來控制按鈕是否是塊.具體形式如下:
經(jīng)過優(yōu)化后的css長這樣:
- .xButton{
- box-sizing:border-box;
- display:inline-block;
- padding:6px1em;
- border-radius:4px;
- color:#fff;
- font-family:inherit;
- background-color:#000;
- user-select:none;//禁止用戶選中
- cursor:pointer;
- text-align:center;
- &.primary{
- background-color:#09f;
- }
- &.warning{
- background-color:#F90;
- }
- &.info{
- background-color:#C03;
- }
- &.pure{
- border:1pxsolid#ccc;
- color:rgba(0,0,0,0.65);
- background-color:#fff;
- &::after{
- background-image:radial-gradient(circle,#ccc10%,transparent11%);
- }
- }
- //形狀
- &.circle{
- border-radius:1.5em;
- }
- //適應(yīng)其父元素
- &.block{
- //width:100%;
- display:block;
- }
- }
- .ripple{
- position:relative;
- overflow:hidden;
- &::after{
- content:"";
- display:block;
- position:absolute;
- width:100%;
- height:100%;
- top:0;
- left:0;
- pointer-events:none;
- background-image:radial-gradient(circle,#fff10%,transparent11%);
- background-repeat:no-repeat;
- background-position:50%;
- transform:scale(12,12);
- opacity:0;
- transition:transform.6s,opacity.6s;
- }
- &:active::after{
- transform:scale(0,0);
- opacity:.3;
- //設(shè)置初始狀態(tài)
- transition:0s;
- }
- }
- 復(fù)制代碼
我們實(shí)現(xiàn)按鈕樣式的切換完全是用css module帶來的高靈活性, 使其讓屬性和類名高度關(guān)聯(lián). 接下來看看我們?nèi)绾问褂冒桑?
- //index.js
- import{Button}from'@/components'
- importstylesfrom'./index.css'
- exportdefaultfunction(){
- return(
-
-
-
-
-
-
-
-
-
-
- )
- }
之前我們看到的按鈕樣式就是通過如上代碼生成的,是不是很簡單呢? 來我們再次看看點(diǎn)擊的動(dòng)效:
其實(shí)不僅僅是react, 我們使用同樣的原理也可以實(shí)現(xiàn)一個(gè)vue版的按鈕組件或者一個(gè)angular版的組件,變得只是語法而已.這樣的組件設(shè)計(jì)思路和元素被官方用在很多ui庫中, 比如單一職責(zé)原理, 組件的開閉原則, 去中心,可組合等,希望對大家今后設(shè)計(jì)組件有所幫助。
原文鏈接：https://mp.weixin.qq.com/s/12RK-qqnXKxawZMIa_ViRA
