这个给力！HTML5 Canvas 模拟衣服撕扯动画

2014-09-29 09:26:59 +08:00
 prettyflyer
今天看到一个很酷的HTML5动画，用鼠标撕扯那块布，关键是用力就能撕破它，不知道是什么原理，大家知道么？这是那个动画的地址：
http://www.html5tricks.com/demo/html5-cloth-tear/index.html
5972 次点击
所在节点    程序员
26 条回复
jacob
2014-09-29 12:53:39 +08:00
@tabris17 有nothing啊
soli
2014-09-29 13:08:03 +08:00
酷！
Mutoo
2014-09-29 13:53:51 +08:00
http://subprotocol.com/verlet-js/
Mutoo
2014-09-29 13:58:26 +08:00
原理是用 verlet 积分模拟粒子运动。然后用距离约束限制粒子距离。然后生成一个二维粒子阵，对相邻的粒子进行约束。撕裂的效果只要在距离上增加一个阀值，超过后删除该约束就行了。

上面是一个开源的 javascript verlet 库
CosWind
2014-09-30 08:53:49 +08:00
好早之前看过了。
openroc
2014-09-30 14:57:43 +08:00
cool~

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/136267

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX