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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 3738 天前的主题，其中的信息可能已经有所发展或是发生改变。

今天看到一个很酷的HTML5动画，用鼠标撕扯那块布，关键是用力就能撕破它，不知道是什么原理，大家知道么？这是那个动画的地址：
http://www.html5tricks.com/demo/html5-cloth-tear/index.html

html5

动画

撕破

26 条回复 • 2014-09-30 14:57:43 +08:00

tedd

2014-09-29 09:33:27 +08:00

omg, 太玄了

609761871

2014-09-29 09:35:17 +08:00

这个超赞！

abelyao

2014-09-29 09:35:53 +08:00

牛逼！

xiaou

2014-09-29 09:37:14 +08:00

撕完，会掉到地上不停的弹

superbear

2014-09-29 09:41:14 +08:00

@xiaou 还可以继续撕。。。

wdlth

2014-09-29 09:43:51 +08:00

说好的衣服呢？人与人最基本的信任在哪里？
http://antigravitygoogle.com/，这个也差不多。

whwei

2014-09-29 09:54:38 +08:00

怎么实现的？

surftheair

2014-09-29 10:20:21 +08:00 via iPhone

光有一张布，至少要有个美女披着布让我们撕吧

palxex

2014-09-29 10:37:26 +08:00

cellular automata?

lazybios

2014-09-29 10:38:01 +08:00

好逼真的效果~

sethverlo

2014-09-29 10:39:12 +08:00

看到「模拟衣服撕扯动画」就进来了…发现只是一块儿布…

coolicer

2014-09-29 10:42:00 +08:00

前2年就看到了

young

2014-09-29 10:43:52 +08:00

挺流弊
貌似很早之前就看到过...

rrfeng

2014-09-29 10:48:35 +08:00

对啊，这个最少已经三四年前就有了……我还在上学的时候

loading

2014-09-29 10:49:48 +08:00

你们 G 点太低！

请看性感舞步：
http://www.codersgrid.com/2013/06/05/making-webgl-dance/

来源： http://v2ex.com/t/71278

wvidc

2014-09-29 10:54:49 +08:00

太酷了~

jprovim

2014-09-29 11:03:14 +08:00

原版, http://codepen.io/suffick/pen/KrAwx

greatdk

2014-09-29 11:04:30 +08:00

裤子都脱了你就给我看这个？

开个玩笑，效果确实挺炫的

tabris17

2014-09-29 11:06:04 +08:00

我以为衣服撕开里面会有什么东西

ruchee

2014-09-29 11:41:22 +08:00

Cool

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~