javascript - 请问如何让 转盘 缓动加速到最高速度后,继续保持最高速度的 恒速 循环旋转呢?

问题描述

问 题

1. 请问如何让 转盘 缓动加速到最高速度后,继续保持最高速度的 恒速 循环旋转?

2. 并在 5秒后 才缓动减速,直到停止呢?

P.S:就相当于汽车从0加速到120，然后持续了5秒，再降到0的过程，不使用css3实现。

这里是示例地址，谢谢！
http://jsbin.com/yeholemexe/e...
demo

解决方案

   var deg = 0
    var sTime = Date.now()
    var duration = 1000
    var p = 0
    var speed = 0
    var maxSpeed = 15
    var stopDeg = null
    var canvas = document.querySelector('.dial')

    setTimeout(function () {
        stopDeg  = 78
        sTime    = Date.now()
        duration = 3000
    }, 5000)

    ;
    (function loop() {
        requestAnimationFrame(function () {
            p = (Date.now() - sTime) / duration
            if (stopDeg) {
                speed = maxSpeed * (1 - p)
                if (speed <= 0) return speed = 0
            } else {
                speed = maxSpeed * p
                if (speed > maxSpeed) speed = maxSpeed
            }

            deg += speed
            canvas.style.transform = 'rotate(' + deg + 'deg) translate3d(0,0,0)'
            loop()
        })
    })()

代码有些难看，不过实现了

这篇关于javascript - 请问如何让 转盘 缓动加速到最高速度后,继续保持最高速度的 恒速 循环旋转呢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！