品牌常常會有一些數字想要呈現去說服消費者，
當然只放靜態的數字就太無聊了，最直覺的動態就是讓數字跑起來！

先來看成果：

今天終於來到了JS動態篇章，比賽也進行1/3了！
標題特別放了Vanilla JS，第一次看到以為又是什麼新的框架想要左轉離開時，
才發現Vanilla JS只是要揶揄市面上框架的名稱，其實他就是JS啦！XD

JS!幫我做動畫！requestAnimationFrame

這邊JS主要是搭配：requestAnimationFrame 的功能。

window.requestAnimationFrame()方法
通知瀏覽器我們想要產生動畫，
並且要求瀏覽器在下次重繪畫面前呼叫特定函數更新動畫。

來源

當然我們也可以用setInterval來做特效，在離開視窗時動畫依舊會一直跑；
用requestAnimationFrame的話離開視窗會暫停動畫，等到回來視窗時候才繼續跑。

requestAnimationFrame也很常用在遊戲裡面，
之後還會不斷看到！

這次上JS的code!

const numberContainer = 
document.querySelectorAll('.number')
const button = document.querySelector('button')

//這邊是每一個數字的狀態，因為我們有兩個數字～
const numbers = [
  {startNum: 100,currentNum : 100, endNum : 345},
	{startNum: 100,currentNum : 100, endNum : 185}
]

//這邊是為了要控制速度
const startTime = Date.now() //開始時間
const duration = 50 //指每一個單位變化數字+1的時候，要多少時間

//這邊是為了控制動畫開關
let animationStart = false;

//數字++的function
function addUp(){

  //看數字有沒有超過上限，搭配最下面
  animationStart = numbers[0].currentNum < numbers[0].endNum || 
numbers[1].currentNum < numbers[1].endNum ? true : false;
  
 //要計算現在到剛剛是不是已經過了我們要的時間，到了數字就++
  let now = Date.now();
  
  numberContainer.forEach((item, i)=>{
    if(now > startTime + duration * (numbers[i].currentNum - numbers[i].startNum) 
&& numbers[i].currentNum  < numbers[i].endNum){
	//看現在的時間是不是已經 > （開始時間＋單位時間＊已過單位）＆＆現在的單位有沒有< 我們上限
    numbers[i].currentNum++;
    item.innerHTML = numbers[i].currentNum;
  }
  })

  //看數字有沒有超過上限，如果數字還沒有超過上限，就持續呼叫自己
  if(animationStart) requestAnimationFrame(()=>addUp());
};

//做了一個button來開關動畫
button.addEventListener('click',()=>{
  numbers.forEach((item)=>{  
    item.currentNum = item.startNum
  })
  addUp();
})

以上！

今天的code

有錯或是有任何更好寫法，歡迎留言!! ^^