Javascript 旋转轮箭头动画

Question

我有一个像这样的旋转轮:

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/

问题是我如何制作一个箭头/指针，当它接触到拐 Angular 处的蓝点/图钉时会翻转？我想要实现的结果类似于 https://www.youtube.com/watch?v=Gm9kftOieYI

另外，请看一下这个thread在游戏开发社区。我绝不擅长 javascript...有没有比使用物理引擎更简单的方法？

林

Answer 1

哦，我的天，做一个更复杂的元素太复杂了。
我建议您使用 deg 为翻转设置动画。

为了使翻盖以更真实的方式交互:翻盖和滚轮的蓝点必须是单独的元素。