V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
prettyflyer
V2EX  ›  程序员

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

  •  3
     
  •   prettyflyer · 2014-09-29 09:26:59 +08:00 · 5964 次点击
    这是一个创建于 3506 天前的主题,其中的信息可能已经有所发展或是发生改变。
    今天看到一个很酷的HTML5动画,用鼠标撕扯那块布,关键是用力就能撕破它,不知道是什么原理,大家知道么?这是那个动画的地址:
    http://www.html5tricks.com/demo/html5-cloth-tear/index.html
    26 条回复    2014-09-30 14:57:43 +08:00
    tedd
        1
    tedd  
       2014-09-29 09:33:27 +08:00
    omg, 太玄了
    609761871
        2
    609761871  
       2014-09-29 09:35:17 +08:00
    这个超赞!
    abelyao
        3
    abelyao  
       2014-09-29 09:35:53 +08:00
    牛逼!
    xiaou
        4
    xiaou  
       2014-09-29 09:37:14 +08:00
    撕完,会掉到地上不停的弹
    superbear
        5
    superbear  
       2014-09-29 09:41:14 +08:00
    @xiaou 还可以继续撕。。。
    wdlth
        6
    wdlth  
       2014-09-29 09:43:51 +08:00   ❤️ 1
    说好的衣服呢?人与人最基本的信任在哪里?
    http://antigravitygoogle.com/,这个也差不多。
    whwei
        7
    whwei  
       2014-09-29 09:54:38 +08:00
    怎么实现的?
    surftheair
        8
    surftheair  
       2014-09-29 10:20:21 +08:00 via iPhone   ❤️ 2
    光有一张布,至少要有个美女披着布让我们撕吧
    palxex
        9
    palxex  
       2014-09-29 10:37:26 +08:00
    cellular automata?
    lazybios
        10
    lazybios  
       2014-09-29 10:38:01 +08:00
    好逼真的效果~
    sethverlo
        11
    sethverlo  
       2014-09-29 10:39:12 +08:00
    看到「模拟衣服撕扯动画」就进来了…发现只是一块儿布…
    coolicer
        12
    coolicer  
       2014-09-29 10:42:00 +08:00
    前2年就看到了
    young
        13
    young  
       2014-09-29 10:43:52 +08:00
    挺流弊
    貌似很早之前就看到过...
    rrfeng
        14
    rrfeng  
       2014-09-29 10:48:35 +08:00
    对啊,这个最少已经三四年前就有了……我还在上学的时候
    loading
        15
    loading  
       2014-09-29 10:49:48 +08:00
    wvidc
        16
    wvidc  
       2014-09-29 10:54:49 +08:00
    太酷了~
    jprovim
        17
    jprovim  
       2014-09-29 11:03:14 +08:00
    greatdk
        18
    greatdk  
       2014-09-29 11:04:30 +08:00
    裤子都脱了你就给我看这个?

    开个玩笑,效果确实挺炫的
    tabris17
        19
    tabris17  
       2014-09-29 11:06:04 +08:00
    我以为衣服撕开里面会有什么东西
    ruchee
        20
    ruchee  
       2014-09-29 11:41:22 +08:00
    Cool
    jacob
        21
    jacob  
       2014-09-29 12:53:39 +08:00
    @tabris17 有nothing啊
    soli
        22
    soli  
       2014-09-29 13:08:03 +08:00
    酷!
    Mutoo
        23
    Mutoo  
       2014-09-29 13:53:51 +08:00
    Mutoo
        24
    Mutoo  
       2014-09-29 13:58:26 +08:00   ❤️ 4
    原理是用 verlet 积分模拟粒子运动。然后用距离约束限制粒子距离。然后生成一个二维粒子阵,对相邻的粒子进行约束。撕裂的效果只要在距离上增加一个阀值,超过后删除该约束就行了。

    上面是一个开源的 javascript verlet 库
    CosWind
        25
    CosWind  
       2014-09-30 08:53:49 +08:00
    好早之前看过了。
    openroc
        26
    openroc  
       2014-09-30 14:57:43 +08:00
    cool~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2427 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 06:03 · PVG 14:03 · LAX 23:03 · JFK 02:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.