首页 文章

使用Svg绘制形状,然后使用缓动/弹性等动画

提问于
浏览
0

我试图找出在我的网站上动画图形元素的最佳方法 .

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

3 回答

  • 0

    你有没有尝试过Raphael.js图书馆?它允许您随意操作SVG .

    http://raphaeljs.com/

  • 0

    听起来你想要这样的东西:http://svg-wow.org/photoAlbum/album.svg将鼠标放在底部的图像上,它们便于展开 .

  • 0

    你可以使用javascript,但是在javascript之上你需要操作DOM中的某些东西:直接HTML或SVG,或者包含在其中一个中的东西 .

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

    如果你渲染SVG with paths(你可以用路径做多边形),动画肯定是可能的......我_1300000000找到一个准备好的例子 .

    就个人而言,我喜欢d3.js,但我明白它不会渲染/动画画布 - 但是,paper.li和processing.js会渲染到画布或raphael到VML ...所以如果达到最广泛的 Spectator 是关心,你可能想要这样 .

    这个table of browser support for SVG在做出决定时可能会有所帮助/提供信息 .

相关问题