使用 Svg 绘制形状，然后使用缓动/弹性等进行动画处理答案

【问题标题】：Using Svg to draw shapes then animate with easing/elasticity etc使用 Svg 绘制形状，然后使用缓动/弹性等进行动画处理
【发布时间】：2013-02-24 21:18:53
【问题描述】：

我正在尝试找出在我的网站上为图形元素设置动画的最佳方法。

我查看了 html5 画布，但似乎 SVG 是最合适的。

我会解释事情应该如何运作，也许你们可以发表你的意见。

在页面上，我想让我的产品在用户选择箭头时滑入和滑出，一次只有一个产品在中心。当图像滑入和滑出时，我想要某种缓和。 SVG 是否有不同的动画风格，如弹性等...？还是我应该只使用 jquery 来制作动画？

接下来，每个产品都会有一个包含在形状中的描述。也许形状会随机绘制，所以我需要一个绘图 api。我也希望这个容器有类似的缓动，因为它会滑入。

我真的很困惑 svg 如何与其他网络技术集成。

编辑：

是否可以为 svg 多边形的点设置动画？

<svg id="svgelem2" height="190" xmlns="http://www.w3.org/2000/svg">
<polygon  points="0,0 800,0, 800,180 0,180 " fill="white" filter="url(#dropshadow)" />

【问题讨论】：

标签： html svg

【解决方案1】：

您尝试过 Raphael.js 库吗？它允许您随意操作 SVG。

http://raphaeljs.com/

【讨论】：

谢谢我检查了。我只是想知道我是否应该使用 SVG 。也许我可以使用 javascript 完成所有这些工作？
是的，动画的加载可以通过操纵圆顶来完成，甚至可以通过 css 规则（在现代浏览器上）来完成。检查 jquery 效果和 css 转换。

【解决方案2】：

听起来你想要这样的东西：http://svg-wow.org/photoAlbum/album.svg 将鼠标放在底部的图像上，它们会缓入并展开。

【讨论】：

【解决方案3】：

您可以使用 javascript，但在 javascript 之上，您需要在 DOM 中操作一些东西：直接使用 HTML 或 SVG，或者包装在两者之一中的东西。

有几个流行的库是基于画布的（paper.js、processing.js）或基于 SVG 的（d3、raphael）。我的理解是，如果您希望您的最终产品可用于尽可能多的平台（所有当前版本的顶级浏览器、顶级浏览器的最后三个版本以及主要的移动设备） - 您需要坚持使用基于画布的库。并非所有浏览器都同样支持 SVG，或者根本不支持（wikipedia has some good info，当然 :)）。

如果你渲染SVG with paths（你可以做多边形，带路径），动画绝对是可能的...我相信你可以用SVG多边形做，但我找不到一个现成的例子。

就个人而言，我喜欢 d3.js，但我知道它不会渲染/动画到画布 - 但是，paper.li 和 processing.js 会渲染到画布或 raphael 到 @987654327 @...因此，如果您担心覆盖最广泛的受众，那么您可能想这样做。

这个 SVG 的 table of browser support 可能对您做出决定有所帮助/提供信息。

【讨论】：

不，Raphael 渲染 SVG 而不是 HTML5 画布。但它确实支持旧的 IE，因为它也可以输出 VML