JavaScript animation hanging up

Question

I have an animation build with 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>

It should run smoothly, changing the css and thus animating the battery charge. But what happens is that it hangs up a little bit in the beginning, but only at the first cycle of animation. After that all animations run smoothly.

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)

I want to know why it behaves like this

Answer 1

尝试使用requestAnimationFrame ，因为与其他选项相比，它是推荐的方式来做动画等工作。

JavaScript animation hanging up

Question

1 answers

solution1
0 ACCPTED 2017-08-12 19:15:03

JavaScript animation hanging up

Question

1 answers

solution1 0 ACCPTED 2017-08-12 19:15:03

solution1
0 ACCPTED 2017-08-12 19:15:03