使用Svg绘制形状，然后使用缓动/弹性等进行动画制作

我试图找出最好的方法是在我的网站上为图形元素设置动画效果。使用Svg绘制形状，然后使用缓动/弹性等进行动画制作

我查看了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)" />

来源

2012-05-06 Adam

你尝试Raphael.js库。它允许你随意操纵SVG。

http://raphaeljs.com/

来源

2012-05-06 22:53:52 demee

谢谢我检查了。我只是想知道我是否应该使用SVG。也许我可以使用JavaScript做到这一切？ – Adam

是的，动画的加载可以通过操作圆顶来完成，甚至可以通过CSS规则（在现代浏览器上）来完成。检查jQuery的效果和CSS转换。 – demee

您可以用JavaScript去，但在上面的javascript你需要操作DOM中的东西：无论是直线上升HTML或SVG，或东西包裹在两个中的一个。

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

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

就个人而言，我爱 d3.js但据我所知，它不渲染/动画帆布 - 然而，paper.li和processing.js做渲染到画布或拉斐尔到VML ......所以，如果到达最广泛的观众是一个问题，你可能想要这样。

这对于SVG的table of browser support可能会对您做出决定有帮助/有帮助。

来源

2012-05-07 01:09:16 dsummersl

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

@OwenMasback感谢您的澄清 - 更新。 – dsummersl

听起来像你想要的东西是这样的：http://svg-wow.org/photoAlbum/album.svg把鼠标放在底部的图像，他们缓解和扩大。

来源

2012-05-07 08:14:04

使用Svg绘制形状，然后使用缓动/弹性等进行动画制作

回答

相关问题