raphael - RaphaelJS 中元素的 3D 旋转

Question

我希望您能帮助我确定 raphael.js 中是否允许以下​​动画。我试图让一个元素飞离页面，这个想法是让它看起来在 3D 中掉落/飞离。我能够告诉元素旋转 X 度并滑下，但它缺乏独立于背景的元素的外观。我想要做的是能够告诉 raphael 将顶角“向外”旋转，因为它掉下来给人一种它掉出视野的错觉，就像图片从墙上掉下来一样。这甚至可能吗，还是拉斐尔只在二维空间中运作？

Answer 1

拉斐尔只处理二维空间。要实现 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);   
};

这是一个小提琴示例供您使用。缺点是这不能像真正的 3D 旋转那样传达透视图。