Question

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

我听说拉斐尔是一个很棒的图书馆，可以帮助渲染图形，但是我想在我的公司做一个案例，说明为什么我们应该将它用于传统的SVG或仅使用CSS3动画进行操作。从这个Stack Overflow post on SVG vs CSS3，这个Raphael Tutorial和this obnoxious looking Raphael site，我收集了一些关于为什么我们应该使用Raphael库而不是传统的SVG或CSS3动画的信息：

CSS3：

传统上用于精灵/ png动画，导致缩放过程中的质量损失

传统SVG：

无法操纵现有的HTML元素
可以使用CSS3中的计时功能无法使用的线动画来绘制内容。
可以在您绘制对象后与对象进行交互
SVG元素可以触发事件，可以使用SVG编写脚本
可以操纵导入的SVG文件的任何方面（类似于Illustrator中的复杂徽标）

拉斐尔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});

操纵

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);
};

此外，它似乎绘制了自定义线条，其中path("M 0 0 l...")和贝塞尔曲线（图表）在Raphael中似乎更容易，但仍然使用SVG和CSS3。

基本上，我没有一个令人信服的案例，因为我不完全了解CSS3或SVG，知道Raphael来救援的地方。我希望有人能帮助我理解。

Answer 1

Raphaels的主要优势在于其向后兼容性以及能够与旧版浏览器配合使用，而您还没有提到这是否是一项要求。

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

实现afaik非常重要（没有额外的库，我认为有一个重要的库），我认为你不能用Raph操纵现有的SVG。

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

还有一些其他选项，使用canvas和库，例如fabric.js。同样，它取决于您需要的浏览器兼容性。

所以基本上我会尝试找出你需要先支持哪些设备和浏览器，然后由于这个要求，可能会有性能和灵活性之间的一些权衡。

同样值得注意的是，你可以将svg与css结合起来，同样你可能需要研究css3和浏览器支持中究竟需要什么。

RaphaelJS - 优于传统的SVG和CSS3

1 个答案: