D3：翻滾骰子（不需要）

我想 - 在D3的幫助下 - 以不同的速度圍繞其中心旋轉物體。一切工作正常，只要轉速不是太高。但最終對象開始翻滾，即使旋轉中心（明顯）是固定的。D3：翻滾骰子（不需要）

在http://jsfiddle.net/mcqnpgn6/`

// initialize rotation angles 
var dAngle = 10 
var angles = [] 
var angle = 0; 
for (i = 0; i < T; i++) { 
    angles[i] = angle 
    angle += dAngle > 0 ? dAngle : i 
} 

// create dice .... 

// rotate dice 
for (i = 0; i < T; i++) { 
    dice.transition() 
    .delay(i * dt) 
    .duration(dt) 
    .ease("linear") 
    .attr("transform", "rotate(" + angles[i] + "," + cx + "," + cy + ")") 
}

找到翻滾骰子我做了什麼或理解錯誤？ 你怎麼會解決這個任務？

來源

2017-05-24 Hans Stricker

我會用'的requestAnimationFrame'而不是在'for'循環編寫自己的動畫，我不認爲這需要'轉移（）'。每一幀，你都希望骰子的旋轉角度與速度變量成反比。 – anbnyc

詳細闡述我的評論：http://jsfiddle.net/mcqnpgn6/25/。下面主要部分：

var theta = dAngle; 

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

rotate();

來源

2017-05-24 20:18:41 anbnyc

謝謝。 requestAnimationFrame做補間嗎？你有沒有解釋爲什麼我的方法不適用於更高的速度？ –

「requestAnimationFrame」沒有補間，它只是以大約60 fps的速度渲染連續的靜態幀。 D3'transition（）'當你的元素具有固定的開始和結束位置時是有意義的，對於動畫來說則更少。（如果您要重複一次轉換，請參閱此示例：https：//bl.ocks.org/mbostock/1125997）。如果你使'dAngle'變大（嘗試500），翻滾的原因就會變得更加清晰：D3插補旋轉中心，因此元素被翻譯和旋轉。 – anbnyc

謝謝。「D3插入旋轉中心」是什麼意思？旋轉的中心似乎固定在我身上。 –

D3：翻滾骰子（不需要）

回答

相關問題