0
我希望你能帮助我确定下面的动画是否允许在raphael.js中。我试图让一个元素飞离页面,这个想法是让它看起来像是在3D中飞落。我能够告诉元素旋转X度并滑落,但是它缺少元素的外观而不依赖于背景。我想要做的是能够告诉拉斐尔将顶角“旋转”出来,当它掉落时,会让它看起来不像是从墙上掉下来的图像。这甚至可能吗?或者拉斐尔只能在二维空间中运作?RaphaelJS中元素的3D旋转
我希望你能帮助我确定下面的动画是否允许在raphael.js中。我试图让一个元素飞离页面,这个想法是让它看起来像是在3D中飞落。我能够告诉元素旋转X度并滑落,但是它缺少元素的外观而不依赖于背景。我想要做的是能够告诉拉斐尔将顶角“旋转”出来,当它掉落时,会让它看起来不像是从墙上掉下来的图像。这甚至可能吗?或者拉斐尔只能在二维空间中运作?RaphaelJS中元素的3D旋转
拉斐尔只处理二维空间。要实现3D翻转,你必须伪装它。值得庆幸的是,Raphael将Scale(sx,sy,x,y)作为变换操作来实现,因此您可以对原点进行缩放以假定3D“翻转”旋转。
例如:
Raphael.el.flipXTransform = function (parentBbox) {
var x = this.getBBox().x;
var width = this.getBBox().width;
parentBbox = parentBbox || { width:width, x: x};
var parentWidth = parentBbox.width;
var parentX = parentBbox.x;
var originX = parentX - x + parentWidth/2;
return 's-1,1,' + originX + ',0';
};
Raphael.el.flipX = function (duration, easing, parentBbox) {
duration = duration || 500;
easing = easing || 'easeInOut';
var scale = this.flipXTransform(parentBbox);
this.animate({ transform: '...' + scale }, duration, easing);
};
这里有一个fiddle example你一起玩。缺点是这并不能传达像真正的3D旋转那样的视角。