视觉变形| SVG vs Canvas vs Other

Question

这是一个奇怪的问题，但我想我会看到它是否已经完成。

我想将一个div元素（以及它的所有内部元素）转换为另一个 - 视觉上。我想这很复杂，我在谷歌上找不到演示。

我不是在谈论过渡或只是改变CSS属性。例如，不是this moo工具演示或this scriptaculous演示。

我甚至无法想象如何做到这一点。有任何想法吗。例如，假设每个div元素只是一张图片，那么这相当于从一张图片到另一张图片的变形。

似乎有很多库可以进行变形...但这些只是改变CSS属性。

相关

http://caniuse.com/#search=svg

http://caniuse.com/#search=canvas

Answer 1

好吧，也许这个：

使两个元素e1和e2交叉变换为彼此。

要获得替换效果，e1的初始不透明度可能为0（目标1），而e2的不透明度为1（目标0）。在某些时候，如果遵循相同的缓动/插值函数（但来自不同的方面：e1-> e2.orig和e2-> e1.orig）那么值应该“交叉路径”..

更好的变形会对e1中映射到e2中的元素的每个元素递归（并且同时）执行此操作（例如，想象一个方形中的圆圈变成圆形中的正方形），但这要复杂得多。 / p>

Answer 2

有许多方法可以将一个元素从一个视觉变形到另一个元素。询问如何在视觉上变形“div”元素可能是错误的观点。有许多JavaScript工具包可以实现这种或那种“视觉变形”。

一些例子是......

• 一个有趣的例子是WebKit Clock它不使用图像，只使用CSS，JavaScript，SVG和其他一些元素。当然，因为它使用SVG，所以在IE8及以下版本中它无用。
• 一个以跨浏览器方式工作的JavaScript库是Raphael.js这里page是“视觉变形”的一个很好的例子。它可以与IE8及以下版本一起使用，因为它将SVG代码转换为VML，虽然VML性能非常糟糕，甚至微软也不赞成使用SVG for IE9。
• 即使像 Prefuse 这样的老图书馆也会有一些有趣的视觉技巧。对不起Prefuse是Java，我在考虑Protovis

总之，你不必等待10年才能完成一些非常简洁的视觉技巧，但你可能不得不采取不同的方法。