Поворот PNG в геометрической прогрессии с использованием Javascript

Линейное ускорение вызовет квадратично увеличивающееся смещение, что обычно встречается в природе. Вы должны рассмотреть это как кандидата.

В любом случае, я бы настроил вашу программу так, чтобы вы могли подключать различные функции и смотреть, как они выглядят. См. упрощения jQuery, чтобы узнать, как это будет выглядеть.

Для начала я бы попробовал эту функцию для углового смещения:

a = ct^2, for t < 3
  = c(9 - t^2), for 3 <= t < 6
  = 0, otherwise

Где c — некоторая константа.

Простое решение CSS/JS:

Сначала вам нужно создать анимацию CSS3, используя @keyframes:

@keyframes spinningWheel{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}    
/* Chrome, Safari, Opera */
@-webkit-keyframes spinningWheel{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
/* Firefox */
@-moz-keyframes spinningWheel{
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}

Теперь создайте класс CSS, реализующий вашу анимацию:

.mySpinningWheel{
    animation-name: spinningWheel;
    -webkit-animation-name: spinningWheel;
    -moz-animation-name: spinningWheel;

    animation-timing-function: ease-in-out; /* ease-in-out is slow at the beginning and the end */
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;

    animation-iteration-count: infinite; /* this causes your wheel to spin indefinitely */
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;

    animation-duration: 5s; /* One iteration of this animation will take 5s */
    -webkit-animation-duration: 5s;
    -moz-animation-duration: 5s;     
}

Одна итерация этой анимации займет 5 секунд, она будет вращаться медленно, быстрее в середине и снова медленно в конце.

Чтобы динамически добавить класс CSS в JS, используйте функцию jQuery .addClass() или, если вы не используете jQuery, просто сделай document.querySelector(".selectorForYourWheel").classList.add(".mySpinningWheel")

Если вы хотите динамически запускать скорость колеса самостоятельно (не уменьшать и не увеличивать скорость за одну итерацию, а иметь постоянную скорость, которую вы можете изменить), измените фрагмент animation-timing-function в классе CSS с ease-in-out до linear. Затем используйте метод jQuery .css(), чтобы изменить продолжительность анимации (чтобы скорость анимации была выше или помедленнее).