Question

我无法在SVG动画中向下移动图像

使用animate（）函数我首先移动图像，工作正常：

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

但是我尝试通过更改y值将其向下移动，但它只会进一步推动它：我试过了：

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

和

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

有和没有引号但它们都向上移动图像

非常感谢任何帮助。感谢

Answer 1

没有完整的参考代码是不可能确定的，但是我愿意打赌这个问题归结为对坐标属性和变换之间的差异的误解。当您为图像的x或y属性设置动画时，Raphael将使用这些绝对值 - 当然，-50和.5在屏幕和SVG对象的坐标系中都“高于”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个单位，然后“向下”返回其原始位置（这通过清除变换属性来完成））。

拉斐尔的documentation on transformations很可爱，但你可能会在那里找到一些有趣的材料。

如果这不能解决您的问题，请发布有关故障代码的小提琴或其他快照。

无法在y轴上移动对象 - Raphael，Javascript，SVG

1 个答案: