如何使用代码为抽搐运动制作动画？

Question

我创建了一个动画来说明我想用代码实现什么：Example of twitches

它保持静止，偶尔快速旋转，然后returns回到原来的状态。

如果能在悬停时调高就好了，比如让它剧烈晃动1秒。但这并不重要。

Answer 1

基于 Marquizzo 的回答：

Just use Math.random() to update the rotation on each frame.

单独使用Math.random()，不会达到这种效果。如果你想让它停留在一个地方，就像你的 GIF 中显示的那样，你可以这样做：

function getRandomDecimal(min, max) {  //Generates the rotation value
    var rand = Math.random()*(max-min) + min;
    var power = Math.pow(10, 2);
    return Math.floor(rand*power) / power;
}

function render(){
    renderer.render(scene, camera);
    requestAnimationFrame(render);

    objectToTwitch.rotation.x = getRandomDecimal(-1, 1); //Set the x rotation to a random decimal from `-1` to `1`.
};

render(); //Calling the function manually the first time

让我解释一下这段代码。我们从一个名为 getRandomDecimal() 的自定义函数开始，它接受 min 和 max 的参数。然后我们将您对象的旋转设置为 -1、min 和 1、max 之间的随机数。这每秒更改 60 次，或用户浏览器的帧速率。如果这种“抽搐”效果发生得太快，您可以在程序中的其他位置触发该行代码。

这样就可以了~

如何使用代码为抽搐运动制作动画？

How can I animate twitching movement with code?

animation

three.js