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

这是

当我点击一个按钮或按下空格键时，我试图让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);
};

---

下面是我用来让它工作的代码（我有两个按钮，一个用来减慢动画（并反转动画），另一个用来加速动画：

(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);

---

您必须使用clearInterval（）函数停止CD。因为您已使用setInterval（）旋转CD

给你

HTML:

包括一个链接：

停止

Javascript：我在这里使用Jquery。 因此包括：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

            var my = 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);     

        $(document).ready(function(){
            $("#stop").click(function(e){
                e.preventDefault();
                window.clearInterval(my);
            });
        });

var my=setInterval（函数（）{
ctx.save（）；
ctx.clearRect（0，0，c.宽度，c.高度）；
ctx.平移（c.宽度，0）；
ctx.旋转（数学PI/180*（ang+=5））；
ctx.drawImage（磁盘，-diskCenter[0]，-diskCenter[1]）；
ctx.restore（）；
},25);     
$（文档）.ready（函数（）{
$（“#停止”）。单击（功能（e）{
e、 预防默认值（）；
窗口.clearInterval（我的）；
});
});

---

我相信这是有道理的。

请在这里发布相关代码。一旦问题得到解决，这个问题对其他人来说就毫无用处了。