js价格浮动动画函数

效果

初始效果.png

动画变动.png

结束效果.png

代码

<label>价格：2999.00</label>
    <button type="button">打折</button>
    
    <script>
        const label = document.querySelector('label')
        const btn = document.querySelector('button')
        btn.onclick = function(){
            animation(1000,2999,299,(val)=>{
                label.textContent = `价格：${val.toFixed(2)}`
            })
        }
        function animation(duration,from,to,onProgress){
            const dis = to - from
            const speed = dis / duration
            const startTime = Date.now()
            let value = from   //当前的值
            onProgress(value)
            function _run(){
                const now = Date.now()
                const time = now - startTime
                if(time >= duration){
                    value = to
                    onProgress(value)
                    return
                }
                const d = time * speed 
                value = from + d 
                onProgress(value)
                requestAnimationFrame(_run)
            }
            requestAnimationFrame(_run)
        }
    </script>