V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
loading
V2EX  ›  JavaScript

动画求助:路径点,无重叠,队列

  •  
  •   loading · 2012-10-27 15:15:14 +08:00 · 3293 次点击
    这是一个创建于 4421 天前的主题,其中的信息可能已经有所发展或是发生改变。
    在尝试写一个小动画,遇到点问题:
    需要几个物体使用同一个路径移动,转弯时目前我只能在旋转的同时进行移动,不平滑不和谐,还有就是当第二个物体比第一个物体速度快时,会发生重叠,我不希望这样,希望第二个物体能乖乖地排在后面,应该叫碰撞检测吧。
    目前只能有jquery.transit进行简单的移动,旋转。

    目前想法是这样的,定义路径点,每个点有x,y坐标和在该点正确的旋转角度,加上当前是否已被占用,然后一个一个点地前进,我这个方法靠谱么?这类移动应该是怎么实现的呢?

    求指路。
    9 条回复    1970-01-01 08:00:00 +08:00
    chone
        1
    chone  
       2012-10-27 16:22:44 +08:00
    不靠谱吧这样解决,因为移动过程中是无法控制的。还是需要"每帧渲染"这样的方式来解决比较好。
    rockhead
        2
    rockhead  
       2012-10-27 17:13:34 +08:00   ❤️ 1
    这个应该可以用Path Animation解决;
    简单来说,你的路径就是1条或者多条Bezier曲线(前后相连的); 你要做的就是求 0-1 这个时间内,任意时间的该Bezier曲线的切线和位置;

    Flash支持这样的Path animation, 许多游戏引擎也有这样的算法; Javascript则不清楚;
    rockhead
        3
    rockhead  
       2012-10-27 17:15:54 +08:00
    帮你找到一个接近的JS的例子:

    http://yuilibrary.com/yui/docs/anim/curve.html
    loading
        4
    loading  
    OP
       2012-10-27 17:20:56 +08:00
    怎么能做到不重叠呢?
    rockhead
        5
    rockhead  
       2012-10-27 17:27:22 +08:00
    这个自己想办法咯 不清楚你的细节需求
    loading
        6
    loading  
    OP
       2012-10-28 17:01:18 +08:00
    @rockhead 我找到了jquery.path完成这个曲线动作,使用jquery.animate 里面的s tep我就能一直检测两个元素距离,加上stop我就能完成我的需求,但我遇到一个问题:
    Bezier我如何定义呢?有没方便的工具进行参数的定义。
    Mutoo
        7
    Mutoo  
       2012-10-28 17:48:59 +08:00
    这是非常复杂的寻迹问题,有兴趣的话可以围观这里 http://red3d.com/cwr/steer/

    排队演示 http://red3d.com/cwr/steer/Doorway.html

    (需要支持java的浏览器)
    rockhead
        8
    rockhead  
       2012-10-28 19:51:32 +08:00
    @loading 下载一个xara 的早期版本 用它的Bezier工具画出来, 一条Bezier就4个point控制; 你把这4个point的坐标记下来, 写到你的程序里就好了;
    inkscape, flash一类的也可以;
    rockhead
        9
    rockhead  
       2012-10-28 19:58:37 +08:00
    @Mutoo opensteer更适合用在游戏里面NPC的自主行为控制(如:追逐\逃逸\徘徊等行为),一般我们指定一个行为模式给opensteer,它就给出模拟出来的运动轨迹; 写MMORPG的话,用这个lib不错

    用来解决楼主的需求就浪费了 :) 说白了就是Bezier求切线问题
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4219 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 04:10 · PVG 12:10 · LAX 20:10 · JFK 23:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.