使用Javascript以指数方式旋转PNG

我正在创建一个旋转轮子的游戏，我想让轮子开始缓慢，以一定的旋转速度达到峰值，然后再次减速

对这个指数旋转速度有什么想法吗？

---

谢谢

线性加速度会导致位移的二次增加，这在自然界中很常见。你应该把它当作候选人。

不管怎样，我会设置你的程序，这样你就可以插入不同的函数来查看它们的外观。看看这会是什么样子

对于初学者，我将尝试使用角位移函数：

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

a=ct^2，对于t<3
=c（9-t^2），对于3一个简单的CSS/JS解决方案：

首先，您必须使用
@关键帧创建一些CSS3动画：

@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秒，它会慢慢地旋转，在中间会更快，最后会慢慢地旋转。p>
要在JS中动态添加CSS类，请使用jQuery的函数，如果不使用jQuery，只需执行
document.querySelector（“.selectorForYourWheel”）.classList.add（“.mySpinningWheel”）

如果您想自己动态触发转轮的速度（不是让它在一次迭代中降低或提高速度，而是让它成为一个可以更改的恒定速度），则将CSS类中的
动画计时功能
块从
缓进/缓出
更改为
线性
。然后，使用jQuery的方法更改动画持续时间（这样动画的速度会更快或更慢）
 您可以使用html5画布，请参见