javascript - 视觉变形 | SVG vs Canvas vs 其他

Question

这是一个有点奇怪的问题，但我想我会看看以前是否有人做过。

我想从视觉上将一个 div 元素(及其所有内部元素)变形为另一个。我想这很复杂，我在谷歌上找不到演示。

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

我什至无法想象这是如何做到的。有任何想法吗。例如，假设每个 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 中的元素的每个元素执行此操作(例如，想象一个正方形的圆变成一个圆中的正方形)，但这要复杂得多。