动画求助：路径点，无重叠，队列

V2EX = way to explore

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

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

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

在尝试写一个小动画，遇到点问题：
需要几个物体使用同一个路径移动，转弯时目前我只能在旋转的同时进行移动，不平滑不和谐，还有就是当第二个物体比第一个物体速度快时，会发生重叠，我不希望这样，希望第二个物体能乖乖地排在后面，应该叫碰撞检测吧。
目前只能有jquery.transit进行简单的移动，旋转。

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

求指路。

物体

移动

路径

9 条回复 • 1970-01-01 08:00:00 +08:00

chone

2012-10-27 16:22:44 +08:00

不靠谱吧这样解决，因为移动过程中是无法控制的。还是需要"每帧渲染"这样的方式来解决比较好。

rockhead

2012-10-27 17:13:34 +08:00

这个应该可以用Path Animation解决;
简单来说,你的路径就是1条或者多条Bezier曲线(前后相连的); 你要做的就是求 0-1 这个时间内,任意时间的该Bezier曲线的切线和位置;

Flash支持这样的Path animation, 许多游戏引擎也有这样的算法; Javascript则不清楚;

rockhead

2012-10-27 17:15:54 +08:00

帮你找到一个接近的JS的例子:

http://yuilibrary.com/yui/docs/anim/curve.html

loading

2012-10-27 17:20:56 +08:00

怎么能做到不重叠呢？

rockhead

2012-10-27 17:27:22 +08:00

这个自己想办法咯不清楚你的细节需求

loading

2012-10-28 17:01:18 +08:00

@rockhead 我找到了jquery.path完成这个曲线动作，使用jquery.animate 里面的s tep我就能一直检测两个元素距离，加上stop我就能完成我的需求，但我遇到一个问题：
Bezier我如何定义呢？有没方便的工具进行参数的定义。

Mutoo

2012-10-28 17:48:59 +08:00

这是非常复杂的寻迹问题，有兴趣的话可以围观这里 http://red3d.com/cwr/steer/

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

（需要支持java的浏览器）

rockhead

2012-10-28 19:51:32 +08:00

@loading 下载一个xara 的早期版本用它的Bezier工具画出来, 一条Bezier就4个point控制; 你把这4个point的坐标记下来, 写到你的程序里就好了;
inkscape, flash一类的也可以;

rockhead

2012-10-28 19:58:37 +08:00

@Mutoo opensteer更适合用在游戏里面NPC的自主行为控制(如:追逐\逃逸\徘徊等行为),一般我们指定一个行为模式给opensteer,它就给出模拟出来的运动轨迹; 写MMORPG的话,用这个lib不错

用来解决楼主的需求就浪费了 :) 说白了就是Bezier求切线问题