#9-数字动态好棒棒！(Vanilla JS requestAnimationFrame)

品牌常常会有一些数字想要呈现去说服消费者，
当然只放静态的数字就太无聊了，最直觉的动态就是让数字跑起来！

先来看成果：

今天终於来到了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();
})