Javascript 设置旋转车轮在每个部分单击的动画

我有一个纺车动画

当车轮的每个不同部分经过时，车轮中心都应该发出咔嗒声。目前没有。有谁知道我能做些什么来修复它，以便每次颜色变化都能正确地通过箭头

它需要一些东西来减缓滴答声动画的速度与车轮的速度，因为它容易

下面是Javascript：

//set default degree (360*5)
var degree = 1800;
//number of clicks = 0
var clicks = 0;

$(document).ready(function(){

/*WHEEL SPIN FUNCTION*/
$('#spin').click(function(){

    //add 1 every click
    clicks ++;

    /*multiply the degree by number of clicks generate random number between 1 - 360, then add to the new degree*/
    var newDegree = degree*clicks;
    var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1;
    totalDegree = newDegree+extraDegree;

    $('#inner-wheel').css({
        'transform' : 'rotate(' + totalDegree + 'deg)'
    });

    $('#center').addClass('click');

    setTimeout(function () {
        $('#center').removeClass('click');
    }, 6000);

});

});//DOCUMENT READY

点击的CSS：

@keyframes tick {
   0%, 100%{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

  50%{
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
  }
}

.click {
    /* -webkit-animation: tick 0.2s ease-out infinite; Chrome, Safari, Opera */
    animation-name: tick;
    animation-duration: 0.2s; /* or: Xms */
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

你有没有注意到，车轮停止转动后，它“滴答”了很多次？这应该是一条线索，告诉你你要去哪里。CSS

transform:'rotate（）'

创建动画，所以在JavaScript中没有循环。我会旋转18度，再乘以18度，以增加和减少速度，以你360度的20个部分为基础。