如何在Raphaël中動畫旋轉和轉換

我試圖做一些我認爲會很簡單的事情。我有一個對象，我可以逐步移動，即每接收100毫秒的消息，告訴我「你的對象已經將x像素向右移動了，y像素向下移動了」。下面的代碼模擬將該對象移動到一個圓上，但是請注意，事先並不知道該對象將在下一步中的哪個位置前進。如何在Raphaël中動畫旋轉和轉換

無論如何，這很簡單。但是現在我還想告訴該對象，它實際上是一組子對象，它正在旋轉。

不幸的是，我很難讓Raphaël做我想做的事。我相信原因是雖然我可以獨立地爲平移和旋轉兩者設置動畫，但我必須在開始時設置旋轉的中心。顯然，旋轉的中心隨着物體的移動而變化。

以下是我正在使用的代碼，您可以查看現場演示here。正如你所看到的那樣，正方形按預期旋轉，但箭頭旋轉不正確。

// c&p this into http://raphaeljs.com/playground.html 

var WORLD_SIZE = 400, 
    rect = paper.rect(WORLD_SIZE/2 - 20, 0, 40, 40, 5).attr({ fill: 'red' }), 
    pointer = paper.path("M 200 20 L 200 50"), 
    debug = paper.text(25, 10, ""), 
    obj = paper.set(); 

obj.push(rect, pointer); 

var t = 0, 
    step = 0.05; 

setInterval(function() { 
    var deg = Math.round(Raphael.deg(t)); 

    t += step; 

    debug.attr({ text: deg + '°' }); 

    var dx = ((WORLD_SIZE - 40)/2) * (Math.sin(t - step) - Math.sin(t)), 
     dy = ((WORLD_SIZE - 40)/2) * (Math.cos(t - step) - Math.cos(t)); 

    obj.animate({ 
     translation: dx + ' ' + dy, 
     rotation: -deg 
    }, 100); 
}, 100);

任何幫助表示讚賞！

來源

2011-06-02 n3rd

現場演示不工作。我拒絕從'https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js'執行腳本，因爲它的MIME類型（'text/plain'）不可執行，嚴格的MIME類型檢查已啓用。' – qwetty 2014-05-06 11:41:12

退房http://raphaeljs.com/animation.html

看從右側頂部的第二動畫。

希望這會有所幫助！

下面的代碼：如果你想要做一個平移和旋轉過

(function() { 
    var path1 = "M170,90c0-20 40,20 40,0c0-20 -40,20 -40,0z", 
     path2 = "M270,90c0-20 40,20 40,0c0-20 -40,20 -40,0z"; 
    var t = r.path(path1).attr(dashed); 
    r.path(path2).attr({fill: "none", stroke: "#666", "stroke-dasharray": "- ", rotation: 90}); 
    var el = r.path(path1).attr({fill: "none", stroke: "#fff", "stroke-width": 2}), 
     elattrs = [{translation: "100 0", rotation: 90}, {translation: "-100 0", rotation: 0}], 
     now = 0; 
    r.arrow(240, 90).node.onclick = function() { 
     el.animate(elattrs[now++], 1000); 
     if (now == 2) { 
      now = 0; 
     } 
};    })();

來源

2011-06-02 13:37:46 bbrame

對不起，我看不出如何解決我的問題。所有這一切都是翻譯和旋轉這正是我的代碼上面做的，除非我完全失去了一些東西。 – n3rd 2011-06-02 13:45:49

，拉斐爾obj應該是這樣的

obj.animate({ 
    transform: "t" + [dx , dy] + "r" + (-deg) 
}, 100);

來源

2013-07-02 19:58:42 mmcorrelo

如何在Raphaël中動畫旋轉和轉換

回答

相關問題