無法移動物體倒在Y軸 - 拉斐爾的JavaScript，SVG

Question

我無法上下移動的圖像中的SVG動畫

使用動畫（）函數，我第一次向上移動圖像的正常工作：

greenBar1.animate({y: 200}, 200, 'elastic'); 

但後來我嘗試通過改變Y值移回下來，但它只會進一步推起來： 我曾嘗試：

greenBar1.animate({y:'-50'}, 200, 'elastic'); 

和

greenBar1.animate({y:'.50'}, 200, 'elastic'); 

既沒有引號，但他們都向上移動圖像

希望得到任何幫助。謝謝

Answer 1

沒有完整的參考代碼是不可能確定的，但我願意打賭，這個問題歸結爲對座標屬性和變換之間差異的誤解。當您爲圖像的x或y屬性設置動畫時，Raphael將使用這些絕對值 - 當然，在屏幕和SVG對象的座標系中，-50和.5都是「200」以上。如果你想在這樣的方式，對象的位置相對於它的起始位置（這是你看起來是在做）修改爲使用動畫，試試這個：

greenBar1.animate( { transform: [ "T", 0, -100 ] }, 200, 'elastic', 
        function() 
        { 
         // note that the callback is invoked in the context of the animated element, so we can simply write... 
         this.animate({ transform: "" }, 200, 'elastic'); 
        }); 

除了更改的基本座標該元素，您可以指示SVG將其轉換，首先從其起始位置增加100個單位，然後回退到原始位置（這通過清除transform屬性來完成）。

拉斐爾的documentation on transformations是可笑的簡潔，但你可能會發現一些有趣的材料。

如果這樣不能解決您的問題，請張貼小提琴或其他有關故障代碼的快照。