用AS制作flash引导线（等分贝塞尔曲线）

最近遇到了这样的问题，所以特意花时间好好研究了一番。

普通贝塞尔曲线运动：

下载 (36.61 KB)
普通

2009-4-1 17:05

匀速贝塞尔曲线运动：

下载 (33.29 KB)
等分

2009-4-1 17:05

二次贝塞尔曲线的构建方式为：确定起点P0、贝塞尔点P1以及终点P2。用B(t)表示该条曲线，公式如下：

下载 (1.13 KB)

2009-4-1 17:05

展为代码：
var pos_x:Number = Math.pow(1 - t, 2) * P0.x + 2 * t* (1 - t) * P1.x + Math.pow(t, 2) * P2.x;
var pos_y:Number = Math.pow(1 - t, 2) * P0.y + 2 * t* (1 - t) * P1.y + Math.pow(t, 2) * P2.y;


例子：
贝塞尔曲线运动.swf (1.5 KB)

下载次数: 125

2009-4-1 17:05

用一个动画 来演示，可以更加清楚的表明这条曲线的构建过程：

下载 (150.29 KB)

2009-4-1 17:05

如图，t变量本身线形变化的话，这条贝塞尔曲线本身的生成过程是并不是匀速的，通常都是两头快中间慢。

为了解决这个问题，问了许多人，搜索了很多网页，最后抱着试试看的心里去某论坛把问题抛了出来，没想到过了2、3天意外的得到了满意的答复。
好了，说明问题了，接下来开始说解决方法了。

具体解决方法的说明在这位好心网友的Blog中：
http://www.thecodeway.com/blog/?p=293



然后，为此做了一个小效果 。
效果.swf (3.82 KB)

下载次数: 204

2009-4-1 17:05

我把等分贝塞尔曲线的公式加工成了工具 类，方便调用 。打个包做成附件，如果有需要的朋友有 download吧。
贝塞尔.rar (16.74 KB)

下载次数: 221

2009-4-1 17:05

最后，如果还有朋友对贝塞尔曲线有更深层的兴趣，三次或n次的，提供一点微薄资料参考：（其实都能搜的到）

三次贝塞尔运动公式（非等分）

• functioncubic_curve(gra:Graphics,pt1,pt2,pt0,pt3)
• {
• 　 　gra.moveTo(pt0.x,pt0.y);
• 　　varpos_x;
• 　　varpos_y;
• 　 　for(vari=0;i<=1;i+=1/100)
• 　　{
• 　　　　 pos_x=Math.pow(i,3)*(pt3.x+3*(pt1.x-pt2.x)-pt0.x)
  　　　　　　　　+3*Math.pow(i,2)*(pt0.x-2*pt1.x+pt2.x)
  　　　　　　　　+3*i*(pt1.x-pt0.x)+pt0.x;
• 　　　　 pos_y=Math.pow(i,3)*(pt3.y+3*(pt1.y-pt2.y)-pt0.y)
  　　　　　　　　+3*Math.pow(i,2)*(pt0.y-2*pt1.y+pt2.y)
  　　　　　　　　+3*i*(pt1.y-pt0.y)+pt0.y;
• 　　　　gra.lineTo(pos_x,pos_y);
• 　 　}
• }

参考1：
http://hi.baidu.com/279328010/blog/item/40fcd838eff2d82697ddd8cc.html

参考2：（wiki百科）
http://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A

参考3：（高级曲线列表）
http://zh.wikipedia.org/w/index.php ?title=%E6%9B%B2%E7%BA%BF%E5%88%97%E8%A1%A8&varia nt=zh-cn


ps：唉……总算搞定了，解决这个花费了我将近1个月的时间，自己不懂，到处找人问，真费劲。

 

from:http://flash.9ria.com/thread-24082-1-4.html