Question

我创造了一个旋转轮游戏，我想让车轮开始缓慢，以一定的旋转速度达到峰值，然后再慢下来。

对于这种指数转速的任何想法？谢谢！

Answer 1

线性加速会导致二次增加位移，这在自然界中很常见。您应该将其视为候选人。

无论如何，我会设置你的程序，以便你可以插入不同的功能来查看它们的外观。请参阅jQuery easings了解这将是什么样的。

对于初学者，我会尝试使用此功能进行角位移：

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

c有些不变。

Answer 2

一个简单的CSS / JS解决方案：

首先，您必须使用@keyframes创建一些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秒钟，它会慢慢旋转，中间会更快，最后会慢慢旋转。

要在JS中动态添加CSS类，请使用jQuery的.addClass()函数，或者如果您不使用jQuery，只需执行document.querySelector(".selectorForYourWheel").classList.add(".mySpinningWheel")

如果你想自己动态地触发车轮的速度（不是让它在一次迭代中降低和提高速度，而是让它变为你可以改变的恒定速度），那么改变animation-timing-function从ease-in-out到linear的CSS类中的块。然后，使用jQuery的.css()方法来更改动画持续时间（因此动画的速度更快或更慢）。

使用Javascript以指数方式旋转PNG

2 个答案: