这是一个有点奇怪的问题，但我想我会看看以前是否做过。
我想将一个 div 元素（以及所有它的内部元素）变形为另一个 - 视觉上。我想这很复杂，我在谷歌上找不到演示。
我不是在谈论过渡或只是改变 CSS 属性。例如不是这个moo 工具演示或这个scriptaculous 演示。
我什至无法想象这是怎么做到的。有任何想法吗。例如假设每个 div 元素只是一张图片，那么这将等同于从一张图片变形到另一张图片。
似乎有很多库可以进行变形......但这些只是改变 CSS 属性。
有关的
user656925
问问题
551 次
2 回答
2
好吧，也许是这样：
使两个元素 e1 和 e2 相互交叉变形。
要获得替换效果，e1 的初始不透明度可能为 0（目标 1），e2 的初始不透明度为 1（目标 0）。在某些时候，如果遵循相同的缓动/插值函数（但来自不同方面：e1->e2.orig 和 e2->e1.orig），那么这些值应该“交叉路径”..
更好的变形会递归地（同时）为 e1 中映射到 e2 中的元素的每个元素执行此操作（例如，想象正方形中的圆变成圆中的正方形），但这要复杂得多。
于 2012-08-07T23:09:37.487 回答
2
有许多方法可以在视觉上将一个元素从一个元素变形为另一个元素。询问如何在视觉上变形“div”元素可能是错误的观点。有许多 JavaScript 工具包可以完成一种或另一种“视觉变形”。
一些例子是...
- 一个有趣的例子是WebKit 时钟，它不使用图像，只使用 CSS、JavaScript、SVG 和其他一些元素。当然，由于它使用 SVG，它在 IE8 及以下版本中并没有什么用处。
- 一个以跨浏览器方式工作的 JavaScript 库是Raphael.js 这个页面是“视觉变形”的一个很好的例子。它确实适用于 IE8 及更低版本，因为它将 SVG 代码转换为 VML，尽管 VML 性能非常糟糕，甚至 Microsoft 也反对它，转而支持 IE9 的 SVG。
甚至像Prefuse这样的老库也有一些有趣的视觉技巧。抱歉 Prefuse 是 Java，我在想Protovis
简而言之，您不必等待 10 年才能完成一些非常巧妙的视觉技巧，但您可能必须采取不同的方法。
于 2012-08-07T23:26:30.437 回答