自定義計數器小技巧!CSS 實現長按點贊累加動畫

XboxYan 發表於 2022-11-24
CSS
歡迎關注我的公眾號:前端偵探

在某條 APP 中,如果長按點贊,會出現這樣花裡胡哨的動畫,如下

Kapture 2022-08-20 at 13.35.37

這個動畫有兩部分組成,其中這個隨機表情的實現可以參考 coco 的這篇文章 巧用 transition 實現短影片 APP 點贊動畫

640.gif

比較類似,這裡就不重複了,我們這裡要實現的是這個不斷變化的數字動畫,如下演示

Kapture 2022-08-20 at 13.48.55

仔細觀察,主要有以下幾個互動

  1. 滑鼠按下有一個向上出現的動畫,抬起會慢慢消失
  2. 數字不斷累加
  3. 提示文字在達到某一指定值時自動變化,鼓勵!> 加油!! > 太棒了!!!

一起看看如何實現的吧

一、滑鼠按下抬起互動

使用偽元素可以讓 HTML 足夠簡潔和靈活,比如 HTML 如下

<button class="like">長按點贊</button>

用偽元素來實現提示文案,簡單修飾一下

.like{
  position: relative;
}
.like::after{
  position: absolute;
  bottom: 100%;
  width: max-content;
  font-size: 2rem;
  font-style: italic;
  font-weight: bolder;
  background-image: linear-gradient(#FFCF02, #FF7352);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  content:'x10';
}

效果如下

image-20220820140253643

然後,我們需要將這個提示在預設情況下隱藏起來,按下的時候才出現

.like::after{
  /**/
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.like:active::after{
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

這樣很輕易就實現了一個按下就向上出現,抬起就還原的動畫

Kapture 2022-08-20 at 14.08.38

但是,這樣的動畫看著不太舒服,那麼,如何在抬起時改變回退動畫呢?很簡單,把向上出現的過渡動畫設定在:active上,並且新增一個延時,保證在元素在消失後,位移動畫才還原

關於這個動畫技巧,可以參考我之前的這篇文章 CSS 實現按鈕點選動效的套路
.like::after{
  /**/
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: .3s .3s, 0s .6s transform; /*預設情況下沒有transform*/
}
.like:active::after{
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: .3s;
}

效果如下

Kapture 2022-08-20 at 14.16.09

二、數字不斷累加

再來看看 CSS 數字變化。

關於這個技巧,之前在這兩篇文章中都有提到:還在使用定時器嗎?CSS 也能實現電子時鐘動畫合成小技巧!CSS 實現動感的倒數計時效果

在以前,數字的變化可能需要建立多個標籤,然後改變位移來實現

<div>
    <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>...</span>
</div>

這種方式需要建立多個標籤,略微繁瑣,也不易擴充套件,而且也沒辦法在偽元素中使用

不過現在有更簡潔的方式可以實現了,那就是 CSS @property。這是幹什麼的呢?簡單來講,可以自定義屬性,在這個例子中,可以讓數字像顏色一樣進行過渡和動畫,可能不太懂,直接看例子吧

我們先透過 CSS 變數將數字渲染到頁面,這裡需要藉助計數器

有興趣的可以參考這篇文章:小tips: 如何藉助content屬性顯示CSS var變數值
.like::after{
  /**/
  --t:0;
  counter-reset: time var(--t);
  content: counter(time);
}

為了方便測試,這裡先將提示設定為可見,效果如下

image-20220820143413023

如何讓這個數字變化呢?可以用到 CSS 動畫,將--t變化到 999

@keyframes count {
    to {
        --t: 999
    }
}
.like::after{
  /**/
  --t:0;
  counter-reset: time var(--t);
  content: counter(time);
  animation: count 100s steps(999) forwards;
}

效果如下

image-20220820143729128

然而並沒有什麼動畫,其實是需要等100s以後才會直接變成999。然後最重要的一步來了,加上以下自定義屬性

@property --t { 
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}

對的,僅僅新增這一小段 CSS,動畫就出來了

Kapture 2022-08-20 at 14.39.06

是不是很神奇?可以這麼理解,透過@property定義後,這個變數--t本身可以單獨設定動畫了,就像顏色變化一樣。

然後,我們要實現只有按下的時候才會出現動畫,可以預設將動畫暫停,按下的時候才執行

.like::after{
  /**/
  --t:0;
  counter-reset: time var(--t);
  content: counter(time);
  animation: count 100s steps(999) forwards;
  animation-play-state: paused; /*預設暫停*/
}

.like:active::after{
  /**/
  animation-play-state: running; /*按下執行*/
}

現在看看效果吧

Kapture 2022-08-20 at 14.45.15

三、提示的階段變化

提示在數字不斷累積的過程中有一個階段性的變化,如下

  1. 0~20:鼓勵!
  2. 20~50:加油!!
  3. 50~:太棒了!!!

那麼,如何根據 CSS 變數來自動對映不同的提示呢?這裡可以用到自定義計數器,比如,我們先自定義一個計數器

@counter-style 鼓勵 {
  system: cyclic;
  symbols: '鼓勵!';
  range: 1 20;
}

這樣定義了一個名為“鼓勵”的計數器,簡單解釋一下,system,表示計算系統,這裡為cyclic,表示迴圈使用開發者提供的一套字元,字元由symbos定義。然後symbos表示計算符號,也就是具體展示的字元,這裡指定為鼓勵!就行了。然後有個range屬性,表示計數器的範圍,這裡指定為1 20。示意如下

image-20220822104047848

這部分自定義計數器內容比較複雜,也比較新,有興趣的可以參考張鑫旭的這篇文章:CSS @counter-style規則詳細介紹

然後將這個自定義的計數器也透過偽元素渲染出來

.like::after{
  content: counter(time)  counter(time, 鼓勵);
}

下面看下效果

Kapture 2022-08-20 at 15.13.51

可以看到,當計數在1~20範圍內,渲染的是自定義字元“鼓勵!”,當超過這個範圍後,又變成了普通的數字,因此我們需要做一個“回退”處理,也就是在這個區間外的規則,CSS 計數器也提供了這樣的能力,名為fallback,實現就是這樣

@counter-style 鼓勵 {
  system: cyclic;
  symbols: '鼓勵!';
  range: 1 20;
  fallback: 加油
}
@counter-style 加油 {
  system: cyclic;
  symbols: '加油!!';
  range: 21 50;
  fallback: 太棒了
}
@counter-style 太棒了 {
  system: cyclic;
  symbols: '太棒了!!!';
  range: 51 infinite;
}

相信應該比較好理解,當計數器range超出時,就會按照fallback的計數規則繼續執行,可以無限巢狀,上面可以稍微簡化一下,區間可以更加靈活一點,比如加油的區間,進入到這個計數器,起點肯定已經超過了20,所以可以把起點也改為0,簡化後如下

@counter-style 鼓勵 {
  system: cyclic;
  symbols: '鼓勵!';
  range: 0 20;
  fallback: 加油
}
@counter-style 加油 {
  system: cyclic;
  symbols: '加油!!';
  range: 0 50; /*進入到這個計數器,起點肯定已經超過了20*/
  fallback: 太棒了
}
@counter-style 太棒了 {
  system: cyclic;
  symbols: '太棒了!!!';
}

示意如下

image-20220822105455063

這樣就得到了文章開頭的演示效果

Kapture 2022-08-20 at 13.48.55

完整程式碼可以訪問:CSS add num animation (runjs.work)

RunJS,前端程式碼線上創作與分享。

四、總結一下

以上就是全部內容了,還不錯的動畫小技巧,你學會了嗎?下面總結一下

  1. 滑鼠按下和抬起的過渡動畫通常是相反的,不過可以透過在按下時設定transition來改變抬起的動畫
  2. 數字不斷累加可以藉助@property來實現,它可以讓 CSS 變數像顏色一樣過渡或者動畫
  3. 計數器可以讓CSS 變數渲染到偽元素上
  4. animation-play-state可以實現按下動畫開始,抬起動畫暫停的效果
  5. 自定義計數器可以讓指定計數範圍內渲染某一些字元
  6. 要實現計數的階段變化可以用fallback進行回退,可以跳轉到另一個計數器
  7. 提一下相容性,Chrome 91+,目前還不太適合外部使用,但可以提前瞭解

當然,自定義計數器的潛力遠遠不止於此,後面還會進行更多的挖掘與應用。最後,如果覺得還不錯,對你有幫助的話,歡迎點贊、收藏、轉發❤❤❤

歡迎關注我的公眾號:前端偵探