先说明,本教程仅为学习交流之用,任何人不经本人允许不得使用其进行商业用途.
大致的最终结果：
问题分析,主要的重点在两个方面,一个是动力学模型的建设,一个是如何绘制圆滑的曲线.首先关于曲线,先参照第1个例子,里面的代码很简单.
http://www.jzxue.com/Files/UpLoadfiles/2007/4/20070417213136_jzxue_com_01.fla
www.jzxue.com/Files/Remoteupfile/2007-4/18/20070417213150_jzxue_com_01.swf
this.createEmptyMovieClip("circle_mc", 1);
this.onEnterFrame = function () {
with (circle_mc) {
clear();
lineStyle(0, 0x000000, 100);
moveTo(275, 150);
curveTo((275+_xmouse)/2,(150+_ymouse)/2+50,_xmouse,_ymouse);
}
}
整个代码很简单,只是用于画一条跟随鼠标的贝塞尔曲线而已.
其中最主要起作用的语句为2条:
moveTo(275, 150); //是画图起点(红点)
curveTo((275+_xmouse)/2,(150+_ymouse)/2+50,_xmouse,_ymouse);绘制一条曲线,其中终点坐标为:_xmouse,_ymouse(蓝点). 控制点坐标为: (275+_xmouse)/2,(150+_ymouse)/2+50 (黑点).
如果你认为你确实已经弄懂了这三个点的关系,可以接着往下看.下面的问题是建立动力学模型.这里建立的是一个基于经典物理学的简要模型,不牵涉微积分什么的.
好,打开第两个例子,场景中有3个点:
分别是原点,实例名:yuandian.红色
中心点,实例名:zhongxindian.蓝色
鼠标点,实例名:shubiaodian.绿色
http://www.jzxue.com/Files/UpLoadfiles/2007/4/20070417212136_jzxue_com_02.fla
http://www.jzxue.com/Files/Remoteupfile/2007-4/18/20070417212319_jzxue_com_02.swf
然后在帧上写AS：
this.createEmptyMovieClip("_mc", 1);
tx=0;ty=0;
ax=0;ay=0;
i=7;
q=0.81;
lenmax=220;
r=0.2;
pianyi=0;
以上全部为参数,暂时先不必理会.
this.onEnterFrame = function () {
shubiaodian._x=_xmouse;
shubiaodian._y=_ymouse;//把鼠标点元件绑在鼠标上,当然你用drag也行,效果一样.
//lenx=shubiaodian._x-yuandian._x;
//leny=shubiaodian._y-yuandian._y;
//len=Math.sqrt(lenx*lenx+leny*leny);
//pianyi=(lenmax-len)*r;
//if (pianyi<0) pianyi=0;
//该部分计算偏移的暂时先不理会
ax=((yuandian._x+shubiaodian._x)/2-zhongxindian._x)/i;
//此语句是计算中心点在水平方向上的加速度,默认的,中心点应该在原点和鼠标点的中心.所以,用中心点的"目的坐标"减去"实际坐标"再乘上一个系数,就可以得到中心点在水平方向上的加速度.
ay=((yuandian._y+shubiaodian._y)/2-zhongxindian._y+pianyi)/i;
//在Y值上一样的道理,只不过中心点的坐标会稍微向下偏移,以形成重力的感觉.其中偏移量的计算随后解释.
tx +=ax;//计算中心点在水平方向上的速度变化,就是让速度加上加速度.
ty +=ay;//同上,纵向上的
tx *=q; //让中心点的速度逐渐衰减,以使它出现慢慢停止的效果.你可以试着把q值改为1或0试下.
ty *=q; //同上
zhongxindian._x +=tx; //让中心点移动,水平方向上移动tx点.
zhongxindian._y +=ty; //让中心点移动,垂直方向上移动ty点.
with (_mc) {
clear();
lineStyle(0, 0x000000, 100);
moveTo(yuandian._x, yuandian._y);
lineTo(zhongxindian._x, zhongxindian._y);
lineTo(shubiaodian._x, shubiaodian._y);
lineTo(yuandian._x, yuandian._y);
}
//以上画线(直线),很简单,不赘述.
}
这样一个简单的动力学模型就出来了.但是如果没有偏移量的计算的话,中心的坐标将始终在原点和鼠标点的正中央.所以需要计算一下Y方向上的偏移量.所谓的偏移量就是指中心点偏靠下方的距离.简单的概括下,偏移量有个特色,因为是软力绳,所以原点和鼠标点越近,这个值就应该越大,反之越小.我们简单的把这个用线形来描述.比如绳子的最大长度是:
