Animation D3：掷骰子（无意识）

我想在D3的帮助下，以不同的速度围绕物体的中心旋转。只要转速不太高，一切正常。但最终，对象开始翻滚，即使旋转中心（明显）固定

在中找到滚动骰子`

//初始化旋转角度
var悬挂=10
变量角度=[]
var角=0；
对于（i=0；i0？悬挂：i
}
//创建骰子。。。。
//旋转骰子
对于（i=0；i

---

我做了什么或理解错了什么？您将如何解决此任务

详细阐述我的评论：。以下主要部分：

var theta = dAngle;

function rotate(){
  theta += dAngle;
  dice.attr("transform", "rotate(" + theta + "," + cx + "," + cy + ")")
  window.requestAnimationFrame(rotate);
}

rotate();

---

我会使用

requestAnimationFrame

而不是在

for

循环中编写自己的动画，我认为这不需要

transition（）

。每一帧，你都希望模具旋转一些与速度变量成反比的角度。谢谢。requestAnimationFrame是否会进行粗花呢？你有没有解释为什么我的方法不适用于更高的速度？没有使用

requestAnimationFrame

的tweening，它只是以约60 fps的速度渲染连续的静态帧。D3

transition（）

在元素具有固定的开始和结束位置时有意义，而在动画中则没有。（如果要重复转换，请参考以下示例：）。如果将

悬挂

设置为较大（尝试500），则翻滚的原因会更清楚：D3正在插值旋转中心，因此元素正在平移和旋转。谢谢。“D3插值旋转中心”是什么意思？旋转的中心在我看来是固定的。你的矩形必须经过一系列其他的地方才能从变换a到变换B，所以它决定了这些中间变换是什么。见：

var theta = dAngle;

function rotate(){
  theta += dAngle;
  dice.attr("transform", "rotate(" + theta + "," + cx + "," + cy + ")")
  window.requestAnimationFrame(rotate);
}

rotate();