的Javascript旋轮箭头动画

我有一个旋转轮这样的：的Javascript旋轮箭头动画

var img = document.querySelector('img'); 
img.addEventListener('click', onClick, false); 


function onClick() { 
    this.removeAttribute('style'); 
    var deg = Math.floor(Math.random() * ((1440 - 1080) + 1) + 1080); 
    var css = '-webkit-transform: rotate(' + deg + 'deg);'; 
    this.setAttribute('style', css); 
}

https://jsfiddle.net/imsy041/efum927n/8/

的问题是如何使箭头/指针，当它接触到蓝点/引脚将翻转在角落附近？我想达到的结果类似于https://www.youtube.com/watch?v=Gm9kftOieYI

另外，请在gamedev社区看看这个thread。我在javascript中并不擅长...有没有比使用物理引擎更简单的方法？

林

来源

2016-06-08 Lim SY

您可能首先需要一个指向正确项目的指针，重点在于让指针具有模拟在引脚上翻转的动画。不，你不需要物理引擎，你可以通过知道引脚的位置和轮子的角速度来至少逼近指针翻转。这实际上取决于你希望看到的“好”。 –

@Spencer Wieczorek谢谢你的回复，我该怎么做？正如你所看到的，车轮以立方贝塞尔方式以不同的速度旋转。和它的旋转程度是不同的，每次你旋转 –

也许这将有助于https://codepen.io/zadvorsky/pen/xzhBw – RRR

-1

噢，我的，这是方法复杂，使一个STRATER proyect。
我会建议您使用deg来为动画翻转。

为了使翻盖更实际地相互作用：翻盖和翻盖的蓝点必须是单独的元件。

来源

2016-06-08 05:42:01

的Javascript旋轮箭头动画

回答

相关问题