HarmonyOS - 方舟開發框架 ArkUI 流光按鈕效果
前言
最近看到很多按鈕加邊流動效果，今天我們用HarmonyOS來實現一下。
實現效果
對自定義的按鈕添加動態樣式，實現動態效果，并且通過這種實現的思路還可以更改div的樣式，來實現更多的按鈕效果。
實現原理
在兩個div中間畫一個長一點并且矮一點的div并添加旋轉和嵌入效果，而且最上面的div要比最下面的div要下一些，這樣就能夠看到中間旋轉的div的動態效果。
實現過程
1、結構
因為按鈕不僅有視覺效果，還會有文字提示，這里用到了自定義標簽??text??，當然你也可以用其他的標簽或者不用標簽包裹也行。
- 首先繪制一個大致的按鈕框架。
<div class="ad">
<div>
<div class="button">
<div class="rotate"></div>
</div>
<div class="inside">
<text class="word">按鈕</text>
</div>
</div>
</div>
2、樣式
首先，要給按鈕一個基礎樣式，再基礎樣式上添加一個長方形的div，再讓div進行旋轉，如下：
.button {
width: 150px;
height: 80px;
background-color: #ef437f;
position: relative;
margin-right: 20px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
border-radius: 5px;
}
這樣我們就得到了一個粉色的長方形，然后再對這個長方形進行一些處理在中間添加一個稍長的長方形。
.rotate {
width: 300px;
height: 60px;
top:10px;
background-color: cyan;
position: absolute;
animation: rotate 2s infinite;
position: absolute;
}
再使用蒙版效果讓旋轉的div只顯示在里面 ，官方文檔中介紹了overflow的用發分別是 visible ， hidden ， scroll ，對應的是顯示在div元素外面，顯示在div元素中， 元素內容超過元素大小時，進行滾動 ，咱們只用overflow中的hidden 就行了。
名稱 | 類型 | 默認值 | 必填 | 描述 |
overflow6+ | string | visible | 否 | 設置元素內容區超過元素本身大小時的表現形式。visible：多個子元素內容超過元素大小時，顯示在元素外面；hidden：元素內容超過元素大小時，進行裁切顯示；scroll：元素內容超過元素大小時，進行滾動顯示并展示滾動條（當前只支持縱向）。說明overflow: scroll樣式需要元素設置固定的大小，默認滾動方向與容器方向一致。 |
overflow: hidden;
接下來就是讓這個藍色的div進行旋轉就行了， 同樣的官方文檔中也給出了使其旋轉的方法，這一處的功能比較多官方給的介紹也很詳細咱們只介紹用到的方法，在需要選擇的div中添加上animation這個屬性就行。
animation: rotate 2s infinite
animation此屬性還能控制旋轉X,Y 軸 ，速度，次數功能，rotate， 2s， infinite分別代表著默認軸 ，兩秒， 無限次播放 。
名稱 | 類型 | 默認值 | 描述 |
animation-iteration-count | number | infinite | 1 | 定義動畫播放的次數，默認播放一次，可通過設置為infinite無限次播放。 |
名稱 | 類型 | 描述 |
rotate | <deg> | <rad> | <grad>6+ | <turn>6+ | 旋轉動畫屬性，支持設置x軸和y軸兩個維度的選中參數。 |
rotate3d6+ | <deg> | <rad> | <grad> | <turn> | 四個入參，前三個分別為X軸、Y軸、Z軸的旋轉向量，第四個是旋轉角度。 |
rotateX | <deg> | <rad> | <grad>6+ | <turn>6+ | X軸方向旋轉動畫屬性。 |
rotateY | <deg> | <rad> | <grad>6+ | <turn>6+ | Y軸方向旋轉動畫屬性。 |
rotateZ6+ | <deg> | <rad> | <grad> | <turn> | Z軸方向的旋轉角度。 |
然后再添加選擇的度數就行了，我選擇的是0度到360度這樣旋轉一個圈，然后再進行一直重復就行了。。
@keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg);
}
}
接下來要做的就是在粉色的div中再添加一個小一點的div進行遮蓋。
.inside {
width: 144px;
height: 74px;
top: 3px;
left: 3px;
background-color: #5a5a5a;
position: relative;
margin-right: 20px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
overflow: hidden;/*元素內容超過元素大小時，進行裁切顯示；*/
}
這樣就可以在按鈕的邊框上呈現出一種流光的效果。
再添加一些細節，比如圓角邊框和文字。
再添加一個點擊時改變按鈕樣式，這樣一個流光效果的按鈕就差不多了。
.inside:active { background-color: #ef437f;/*按鈕被激活時，背景顏色變為#ef437f */}
總結
在這里，我使用了css的特性來實現這樣的效果，大家還可以想想有沒有其他的情況可以實現這個效果，以及將其運用到你的項目里。
