javascript - 视觉变形| SVG、Canvas 与其他

标签 javascript html css

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

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

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

我什至无法想象这将如何完成。有任何想法吗。例如,假设每个 div 元素只是一张图片,那么这相当于从一张图片变形为另一张图片。

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

相关

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

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

最佳答案

好吧,也许是这样:

使两个元素 e1 和 e2 相互交叉变形。

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

更好的变形会对 e1 中映射到 e2 中的元素的每个元素递归地(同时)执行此操作(例如,想象一个正方形中的圆变成圆中的正方形),但这要复杂得多。

关于javascript - 视觉变形| SVG、Canvas 与其他,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11855323/

相关文章:

javascript - 根据数据元素当前拥有的类来更改数据元素的样式?

javascript - 未捕获的语法错误 : Invalid or unexpected token in EXT JS

javascript - 已弃用 : Window: orientationchange event

javascript - 如何在 div 中显示结果然后异步更新它们

Javascript dd/mm/yyyy 日期检查?

css - Bootstrap 3 输入组插件丢失标记

javascript - 如何在 angularjs ui-router 中的状态之间共享 $scope 数据?

javascript - 在将其放入 DOM 之前初始化 jQuery 对象(元素)

javascript - ui.position 相对位置的错误值

javascript - 显示内联 block 不使 divs 水平