javascript - jQuery使图像旋转间隔平滑减小

Question

这里是my site:

我试图让 CD 在单击按钮或按空格键时缓慢停止旋转或再次缓慢启动，但 setTimeout() 对我不起作用。

谢谢。

下面是我体内的js。

var diskCenter = [480, 480];
var disk = new Image;
disk.src = 'disk.jpg';
window.onload = function () {
    var ang = 0;
    var c = document.getElementsByTagName('canvas')[0];
    var ctx = c.getContext('2d');
    setInterval(function () {
        ctx.save();
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.translate(c.width, 0);
        ctx.rotate(Math.PI / 180 * (ang += 5));
        ctx.drawImage(disk, -diskCenter[0], -diskCenter[1]);
        ctx.restore();
    }, 25);
};

Answer 1

这是我用来让它工作的代码(我有两个按钮，一个减慢动画(并反转)，一个加速动画:

(function ($) {

    var ang = 0;
    var speed = 5;
    var minSpeed = -10;
    var maxSpeed = 10;
    var c = $('#discCanvas')[0];
    var ctx = c.getContext('2d');

    var diskCenter = [480, 480];
    var disk = new Image;
    disk.src = 'http://swellgarfo.com/9/disk.jpg';


    $(function () {
        setInterval(function () {
            ctx.save();
            ctx.clearRect(0, 0, c.width, c.height);
            ctx.translate(c.width, 0);
            ctx.rotate(Math.PI / 180 * (ang += speed));
            ctx.drawImage(disk, -diskCenter[0], -diskCenter[1]);
            ctx.restore();
        }, 25);
    });

    $('#slowButton').on('click', function () {
        speed = Math.max(minSpeed, speed - 1);
    });

    $('#fastButton').on('click', function () {
        speed = Math.min(maxSpeed, speed + 1);
    });
})(jQuery);