Question

我有一个使用setInterval的动画构建。

function changeBatteryIcon(status, i) {
  switch (status) {
    case 1:
      i.className = "fa fa-battery-half red"
      return ++status
    case 2:
      i.className = "fa fa-battery-3 orange"
      return ++status
    case 3:
      i.className = "fa fa-battery lightgreen"
      return 1
  } 
}

function animateHeaderBatteries() {
  const i = 
        document.getElementById("header-batteries").querySelector('i')
  let status = 1
  setInterval(function() {
   status = changeBatteryIcon(status, i)
  }, 300)
  
  
}

animateHeaderBatteries()

const chargeBtn = document.getElementById('charge')
const drainBtn = document.getElementById('drain')
let ammount = 1
let not = document.getElementById('battery-not')

function charge(battery_charge) {
  if (ammount == 1) {
  const intervalHandler = 
        setInterval(function() {
           ++ammount
          const style = `width:${ammount}%;`
          battery_charge.style = style
         
          changeStyle(ammount)
          
          if (ammount == 100) {
            clearInterval(intervalHandler)
            not.style = 'background-color:lightgreen'
          }
        }, 50)
  }
}

function drain(battery_charge) {
  if (ammount == 100) {
    const intervalHandler =
          setInterval( function() {
            --ammount
            const style = `width:${ammount}%`
            battery_charge.style = style
            
            changeStyle(ammount)
            
            if (ammount < 100) {
              not.style = 'background-color:white'
            }
            
            if (ammount == 1) {
              clearInterval(intervalHandler)
            }
}, 50)
  }
}

const battery_charge = document.getElementById('battery-charge')
function changeStyle (ammount) {
          if (ammount > 25)
            battery_charge.style['background-color'] = 'orange'
          if (ammount > 50)
            battery_charge.style['background-color'] = 'yellow'
          if (ammount > 75) 
            battery_charge.style['background-color'] = 'lightgreen'
}


chargeBtn.onclick = function () {
  charge(battery_charge)
}

drainBtn.onclick = function () {
  drain(battery_charge)
}

body {
  font-family:arial;
}

.red {
  color:red;
}

.orange {
  color:orange;
}

.lightgreen {
  color:lightgreen;
}

header {
  flex-direction:column;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#252525;
  color:yellow;
}


#header-batteries {
  padding-top:20px;
}

header h1 {
  margin-top:0;
}

article {
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;

}

#battery-container {
  width:50%;
    margin-top:20px;
  margin-bottom:20px;
  display:flex;
  align-items:center;
}
#battery {
  border:2px solid #252525;
  height:75px;
  width:90%;
  display:flex;
  align-items:center;
  

}

#battery-not {
  height:25px;
  border:2px solid black;
  border-left:0;
  width:2%;
}
#battery-charge {
  height:100%;
  width:1%;
  background-color:red;
  display:flex;
 
}
#bolt {
  position:absolute;
  left:45%;
  font-size:50px;
  color:grey;
  
}



#controls {
  width:50%;
  display:flex;
  justify-content:flex-end;
  
}
#controls button {
 height:40px;
 flex-basis:40%;
 background-color:#f2f200;
 border:0;
 font-size:16px;
 font-weight:bold;
 font-family:Helvetica;
 margin-left:10px;
}

footer {
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:50px;
}

<html lang="pt-BR">
  <meta charset="UTF-8">
</html>
<body>
  <div id="container">
    <header>
      <div id="header-batteries">
        <i class="fa fa-battery"></i>
      </div>
      <h1>Battery</h1>
    </header>
    <article>
      <div id="battery-container">
      <div id="battery">
        
           <i class="fa fa-bolt" id="bolt"></i>
        <div id="battery-charge">
       
        </div>
      </div>
      <div id="battery-not">
      </div>
      </div>
      
      <div id="controls">
        <button id="charge">
          CHARGE
        </button>
        <button id="drain">
          DRAIN
        </button>
      </div>
    </article>
    <footer>
      <span>Made with <i class="fa fa-heart red" ></i> by Alex Alonso</span>
    </footer>
  </div>
</body>

它应该平稳运行，改变css，从而动画电池充电。但是发生的事情是它在开始时会挂起一点点，但仅限于动画的第一个周期。之后，所有动画都顺利运行。

const intervalHandler = 
        setInterval(function() {
           ++ammount
          console.log(ammount)
          const style = `width:${ammount}%;`
          battery_charge.style = style

          changeStyle(ammount)

          if (ammount == 100) {
            clearInterval(intervalHandler)
            not.style = 'background-color:lightgreen'
          }
        }, 50)

我想知道它为什么会像这样

Answer 1

尝试使用requestAnimationFrame，因为这是推荐的方式，与其他选项相比，可以执行动画等操作。

挂起的JavaScript动画

1 个答案: