RaphaelJS -与传统的SVG和CSS3相比的好处

Question

我希望在一个网站上做一些动画，并希望使用SVG图形。

我听说Raphael是一个帮助渲染图形的很好的库，但我想在我的公司说明为什么我们应该使用它来代替传统的SVG，或者仅仅使用CSS3动画来操作。从这个SVG CSS3上的堆栈溢出帖子、这个拉斐尔教程和这个令人讨厌的拉斐尔网站中，我收集了一些关于为什么我们应该使用Raphael库而不是传统的SVG或CSS3动画的一些信息：

CSS3：

• 传统上用于sprite/png动画，在缩放过程中会导致质量损失。

传统的SVG：

• 无法操作现有的HTML元素
• 可以用CSS3中的时序函数不可能的线条动画绘制物体
• 可以在绘制对象之后与其进行交互
• SVG元素可以触发事件，并可以用SVG编写脚本。
• 可以操纵导入的SVG文件的任何方面(类似于Illustrator的复杂徽标)

Raphael JS：

• 在我看来，它是一个简单的包装库(类似于jQuery)，它使一些传统的SVG操作操作更容易编写？

我想出了一些比较拉斐尔看起来很吸引人的地方。

形状：

CSS3：

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

<div id="circle"></div>

SVG：

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

拉斐尔：

var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var circle = paper.circle(100, 100, 80); //cleaner 
circle.attr({fill: 'red', stroke: 'black', 'stroke-width': 2});

Manipulation:

CSS3:就像.

@keyframes moveCircle {
  from { /* start value */ }
  to { /* end value */ }
}

<div id="moveCircle"></div>

SVG:更复杂

<circle id="my-circle" r="30" cx="50" cy="50" fill="orange" />

  <animate 
    xlink:href="#my-circle"
    attributeName="cx"
    from="50"
    to="450" 
    dur="1s"
    begin="click"
    fill="freeze" />

拉斐尔:就像这样：

circle.node.onclick = function () {
    this.animate({ cx: this.cx+=100, cy: this.cy+=100}, 1000);
};    

此外，在Raphael中，用path("M 0 0 l...")和Bezier曲线(对于图形)绘制自定义线似乎更容易，但仍然可以使用SVG和CSS3。

基本上，我没有令人信服的理由，因为我不完全理解CSS3或SVG，不知道Raphael是从哪里来的。我希望有人能帮我理解。

Answer 1

Raphaels的主要优势在于它的向后兼容性和能够与旧的浏览器一起工作，如果这是一个要求，您还没有提到这一点。

如果不需要更早的浏览器支持，您可能需要查看诸如Snap或svg.js之类的内容，它们支持额外的svg元素，比如“group”，还可以导入svg文件，然后操作和动画。使用Raphael，您必须自己创建所有东西，而不是使用现有的SVG，这可能是一个缺点。

实现afaik很重要(没有额外的库，我认为有一个重要的库)，我不认为您可以使用Raph操作现有的SVG。

CSS3的优点，动画可以提供更好的性能，我会检查这一点，特别是如果它可能的移动可能是一个重要的受众。您还可以查看像velocity.js这样的库，它对良好的动画速度有好处。

还有一些其他选项，可以使用画布和库(如fabric.js )。同样，这取决于您需要的浏览器兼容性。

因此，基本上，我会尝试找出您首先需要支持的设备和浏览器，然后可能会有一些权衡，除了性能和灵活性，因为这一要求。

同样值得记住的是，您可以将svg与css结合起来，同样，您可能需要了解css3和浏览器支持中究竟需要什么。