Flash/Flex学习笔记(47)：反向运动学(上)
先回顾上篇所说的"正向运动学"：以人行走的例子来说，基本上可以理解为大腿驱动小腿，小腿驱动脚，从而引发的一系列姿态调整和运动。再举一个例子，我们用着拿一根软鞭或链条的一端挥舞，被手挥舞的这一端会把"能量"向另一端传递（即固定端驱动紧接的部分，而紧接的部分又驱动下一段紧接的部分），从而使整个系统也随之运动.
而"反向运动学"正好相反，举个不恰当的例子，小时候估计很多人玩过“死”青蛙(之所以要说是死的，是为了排除活体的自主运动)，用手去拖死青蛙的脚（即自由端），会发现拉脚的同时，也带动青蛙的大腿在拖动，进而拖动了整体青蛙“尸体”；如果换成链条的例子，则相当于反过来，我们拿起链条的另一端拖动，会带动与它紧密关联的部分一起运动，从而带动整个链条一起被拖动。
单关节拖动：
01 package {
02 import flash.display.Sprite;
03 import flash.events.Event;
04
05 public class OneSegmentDrag extends Sprite {
06 private var segment0:Segment;
07 public function OneSegmentDrag() {
08 init();
09 }
10
11 private function init():void {
12 segment0=new Segment(100,20);
13 addChild(segment0);
14 segment0.x=stage.stageWidth/2;
15 segment0.y=stage.stageHeight/2;
16 addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
17 }
18
19 private function EnterFrameHandler(event:Event):void {
20 var dx:Number=mouseX-segment0.x;
21 var dy:Number=mouseY-segment0.y;
22 var angle:Number=Math.atan2(dy,dx);
23 segment0.rotation=angle*180/Math.PI;
24 var w:Number=segment0.getPin().x-segment0.x;
25 var h:Number=segment0.getPin().y-segment0.y;
26 segment0.x=mouseX-w;
27 segment0.y=mouseY-h;
28 }
29
30 }
31 }
示意图：
双关节的拖动：
01 var seg1:Segment = new Segment(100,20);
02 seg1.x = 100;
03 seg1.y = 50;
04 addChild(seg1);
05
06 var seg2:Segment = new Segment(100,10);
07 seg2.x = seg1.getPin().x;
08 seg2.y = seg1.getPin().y;
09 addChild(seg2);
10
11 addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
12
13 function EnterFrameHandler(e:Event):void{
14 //seg2跟着鼠标动
15 var dx1:Number = mouseX - seg2.x;
16 var dy1:Number = mouseY - seg2.y;
17 var angle1:Number = Math.atan2(dy1,dx1);
18 seg2.rotation = angle1*180/Math.PI;
19 var w1:Number = seg2.getPin().x - seg2.x;
20 var h1:Number = seg2.getPin().y - seg2.y;
21 seg2.x = mouseX-w1;
22 seg2.y = mouseY-h1;
23
24 //seg1跟着seg2动
25 var dx2:Number = seg2.x - seg1.x;
26 var dy2:Number = seg2.y - seg1.y;
27 var angle2:Number = Math.atan2(dy2,dx2);
28 seg1.rotation = angle2*180/Math.PI;
29 var w2:Number = seg1.getPin().x - seg1.x;
30 var h2:Number = seg1.getPin().y - seg1.y;
31 seg1.x = seg2.x -w2;
32 seg1.y = seg2.y -h2;
33 }
多关节的拖动:
01 var segNum:Number=10;
02 var segs:Array=new Array(segNum);
03
04 function init():void {
05 for (var i:int=0; i<segNum; i++) {
06 segs[i]=new Segment(40,12);
07 segs[i].x=stage.stageWidth/2;
08 segs[i].y=stage.stageHeight/2;
09 addChild(segs[i]);
10 }
11 addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
12 }
13
14 function EnterFrameHandler(e:Event):void {
15 drag(segs[segNum-1],mouseX,mouseY);
16 for (var i:int=segNum-2; i>=0; i--) {
17 drag(segs[i],segs[i+1].x,segs[i+1].y);
18 }
19 }
20
21 //拖动的封装
22 function drag(seg:Segment,targetX:Number,targetY:Number):void {
23 var dx:Number=targetX-seg.x;
24 var dy:Number=targetY-seg.y;
25 var angle:Number=Math.atan2(dy,dx);
26 seg.rotation=angle*180/Math.PI;
27 var w:Number=seg.getPin().x-seg.x;
28 var h:Number=seg.getPin().y-seg.y;
29 seg.x=targetX-w;
30 seg.y=targetY-h;
31 }
32
33 init();
如果说反向运动学的拖动，是用外力拖“死青蛙”的脚，则反向运动学中的伸展则正好相反，它相当于把青蛙的身体固定住，而青蛙的脚主动伸出去够某一物体(好吧，死青蛙是不会主动去抓物体的，人死不能复生，青蛙也一样，也许换成另一种说法更容易理解：我们坐在位子上不动，想伸手去拿桌子远处的东西，其实就是这个意思)
ok，如果感觉还不是太晕的话，再来小结下“正向运动”与“反向运动”的区别：
人行走时“下肢”系统的运动之所以被称做正向运动，主要特征是大腿先动，从而驱动小腿，而小腿又驱动脚，更准确的讲可以理解为“固定端驱动自由端”，能量的传递是自上而下，从固定端传递到自由端，也就是所谓的“正向”。
而人伸手去拿东西，可以看作 “手带动上臂”，而“上臂又带动胳膊”，即“自由端带动固定端”，能量的传递是自下而上，从自由端传递到固定端，即所谓的“反向”。
双关节的伸展：
上面的示例中，粗的关节当做胳膊，细的关节当做手臂，用鼠标在上面移动时，会发现手臂始终试图伸展到鼠标所在位置，但由于胳膊被固定点限制了，所以形成了这种效果。
下面是处理的示意图：
处理步骤:
1.手臂seg1，先绕着自己的固定点(x,y)，朝鼠标所在点(mousex,mousey)旋转
2.得到一个新的点(tx,ty)--红色的实线三角形，然后胳膊seg2以(tx,ty)为目标旋转
3.重新将seg1挂到seg2的自由端
4.重复以上处理，直到二个关节的姿态不再有任何变化为止
01 var seg1:Segment=new Segment(80,10);
02 seg1.x=130;
03 seg1.y=160;
04 addChild(seg1);
05
06 var seg2:Segment=new Segment(60,20);
07 seg2.x=seg1.getPin().x;
08 seg2.y=seg1.getPin().y;
09 addChild(seg2);
10
11 function init():void {
12 addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
13 }
14
15 function EnterFrameHandler(e:Event):void {
16 var dx:Number=mouseX-seg1.x;
17 var dy:Number=mouseY-seg1.y;
18 var angle:Number=Math.atan2(dy,dx);
19 seg1.rotation=angle*180/Math.PI;
20 var w:Number=seg1.getPin().x-seg1.x;
21 var h:Number=seg1.getPin().y-seg1.y;
22 var tx:Number=mouseX-w;
23 var ty:Number=mouseY-h;
24
25 dx=tx-seg2.x;
26 dy=ty-seg2.y;
27
28 angle=Math.atan2(dy,dx);
29 seg2.rotation=angle*180/Math.PI;
30 seg1.x=seg2.getPin().x;
31 seg1.y=seg2.getPin().y;
32 }
33
34 init();
注意一个细节：反向运动伸展时，关节是倒着挂的，即最后一个addChild的Segment做为系统固定端，第一个Segment实例为做系统的伸展自由端。可以把上面的动画放慢到每秒一帧，上述处理步骤也许更容易看清楚
01 function EnterFrameHandler(e:Event):void {
02 var dx:Number=mouseX-seg1.x;
03 var dy:Number=mouseY-seg1.y;
04 var angle:Number=Math.atan2(dy,dx);
05 seg1.rotation=angle*180/Math.PI;
06 var w:Number=seg1.getPin().x-seg1.x;
07 var h:Number=seg1.getPin().y-seg1.y;
08 var tx:Number=mouseX-w;
09 var ty:Number=mouseY-h;
10
11 dx=tx-seg2.x;
12 dy=ty-seg2.y;
13
14 angle=Math.atan2(dy,dx);
15 seg2.rotation=angle*180/Math.PI;
16 seg1.x=seg2.getPin().x;
17 seg1.y=seg2.getPin().y;
18
19 //新增的画线部分，以方便观察
20 graphics.clear();
21 graphics.lineStyle(1,0xff0000,0.5);
22 graphics.moveTo(mouseX,mouseY);
23 graphics.lineTo(seg1.getPin().x,seg1.getPin().y);
24
25 graphics.lineStyle(1,0x0000ff,0.5);
26 graphics.moveTo(mouseX,mouseY);
27 graphics.lineTo(seg2.getPin().x,seg2.getPin().y);
28
29 }
多关节的伸展：
01 var segNum:uint=10;
02 var segs:Array=new Array(segNum);
03 var i:int=0;
04
05 function init():void {
06 for (i=0; i<segNum; i++) {
07 segs[i]=new Segment(50,10+2*i);
08 segs[i].x=30;
09 segs[i].y=30;
10 addChild(segs[i]);
11 }
12 addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
13 }
14
15 function EnterFrameHandler(e:Event):void {
16 var target:Point=expand(segs[0],mouseX,mouseY);
17
18 //记住：第一个为伸展末端，最后一个为固定端
19 for (i=1; i<segNum; i++) {
20 target=expand(segs[i],target.x,target.y);
21 }
22
23 //倒挂所有Segment
24 for (i = segNum - 1; i > 0; i--) {
25 hang(segs[i-1],segs[i]);
26 }
27
28 }
29
30 function expand(seg:Segment,targetX:Number,targetY:Number):Point {
31 var dx:Number=targetX-seg.x;
32 var dy:Number=targetY-seg.y;
33 var angle:Number=Math.atan2(dy,dx);
34 seg.rotation=angle*180/Math.PI;
35 var w:Number=seg.getPin().x-seg.x;
36 var h:Number=seg.getPin().y-seg.y;
37 var tx:Number=targetX-w;
38 var ty:Number=targetY-h;
39 return new Point(tx,ty);
40 }
41
42 function hang(segA:Segment,segB:Segment) {
43 segA.x=segB.getPin().x;
44 segA.y=segB.getPin().y;
45 }
46
47 init();
如果把目标点从鼠标位置换成某一个运动物体的坐标，效果会更好玩：
01 var segNum:uint=9;
02 var segs:Array=new Array(segNum);
03 var i:int=0;
04 var ball:Ball;
05 var gravity:Number=0.3;
06 var bounce:Number=-0.95;
07
08 function init():void {
09 ball = new Ball(15);
10 ball.vx=10;
11 addChild(ball);//加入一个小球
12
13 for (i=0; i<segNum; i++) {
14 segs[i]=new Segment(45,10+1*i);
15 segs[i].x=30;
16 segs[i].y=30;
17 addChild(segs[i]);
18 }
19
20 addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
21 }
22
23 function EnterFrameHandler(e:Event):void {
24 moveBall();//让小球动起来
25
26 var target:Point=expand(segs[0],ball.x,ball.y);//最后一个跟着小球跑
27
28 for (i=1; i<segNum; i++) {
29 target=expand(segs[i],target.x,target.y);
30 }
31
32
33 for (i = segNum - 1; i > 0; i--) {
34 hang(segs[i-1],segs[i]);
35 }
36 }
37
38 function expand(seg:Segment,targetX:Number,targetY:Number):Point {
39 var dx:Number=targetX-seg.x;
40 var dy:Number=targetY-seg.y;
41 var angle:Number=Math.atan2(dy,dx);
42 seg.rotation=angle*180/Math.PI;
43 var w:Number=seg.getPin().x-seg.x;
44 var h:Number=seg.getPin().y-seg.y;
45 var tx:Number=targetX-w;
46 var ty:Number=targetY-h;
47 return new Point(tx,ty);
48 }
49
50 function hang(segA:Segment,segB:Segment) {
51 segA.x=segB.getPin().x;
52 segA.y=segB.getPin().y;
53 }
54
55 function moveBall():void {
56 ball.vy+=gravity;
57 ball.x+=ball.vx;
58 ball.y+=ball.vy;
59 if (ball.x+ball.radius>stage.stageWidth) {
60 ball.x=stage.stageWidth-ball.radius;
61 ball.vx*=bounce;
62 } else if (ball.x - ball.radius < 0) {
63 ball.x=ball.radius;
64 ball.vx*=bounce;
65 }
66 if (ball.y+ball.radius>stage.stageHeight) {
67 ball.y=stage.stageHeight-ball.radius;
68 ball.vy*=bounce;
69 } else if (ball.y - ball.radius < 0) {
70 ball.y=ball.radius;
71 ball.vy*=bounce;
72 }
73 }
74
75 init();
结合以前学到的碰撞检测，能做出更出色的交互效果：
01 var segNum:uint=4;
02 var segs:Array=new Array(segNum);
03 var i:int=0;
04 var ball:Ball;
05 var gravity:Number=0.2;
06 var bounce:Number=-0.95;
07
08 function init():void {
09 ball=new Ball(15);
10 ball.vx=10;
11 addChild(ball);//加入一个小球
12
13 for (i=0; i<segNum; i++) {
14 segs[i]=new Segment(45,10+1*i);
15 segs[i].x=300;
16 segs[i].y=385;
17 addChild(segs[i]);
18 }
19
20 addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
21 }
22
23 function EnterFrameHandler(e:Event):void {
24 moveBall();
25
26 var target:Point=expand(segs[0],ball.x,ball.y);
27
28 for (i=1; i<segNum; i++) {
29 target=expand(segs[i],target.x,target.y);
30 }
31
32 for (i = segNum - 1; i > 0; i--) {
33 hang(segs[i-1],segs[i]);
34 }
35
36 checkHit();//碰撞检测
37 }
38
39 function expand(seg:Segment,targetX:Number,targetY:Number):Point {
40 var dx:Number=targetX-seg.x;
41 var dy:Number=targetY-seg.y;
42 var angle:Number=Math.atan2(dy,dx);
43 seg.rotation=angle*180/Math.PI;
44 var w:Number=seg.getPin().x-seg.x;
45 var h:Number=seg.getPin().y-seg.y;
46 var tx:Number=targetX-w;
47 var ty:Number=targetY-h;
48 return new Point(tx,ty);
49 }
50
51 function hang(segA:Segment,segB:Segment) {
52 segA.x=segB.getPin().x;
53 segA.y=segB.getPin().y;
54 }
55
56 function moveBall():void {
57 ball.vy+=gravity;
58 ball.x+=ball.vx;
59 ball.y+=ball.vy;
60 if (ball.x+ball.radius>stage.stageWidth) {
61 ball.x=stage.stageWidth-ball.radius;
62 ball.vx*=bounce;
63 } else if (ball.x - ball.radius < 0) {
64 ball.x=ball.radius;
65 ball.vx*=bounce;
66 }
67 if (ball.y+ball.radius>stage.stageHeight) {
68 ball.y=stage.stageHeight-ball.radius;
69 ball.vy*=bounce;
70 } else if (ball.y - ball.radius < 0) {
71 ball.y=ball.radius;
72 ball.vy*=bounce;
73 }
74 }
75
76
77 function checkHit():void {
78 var segment:Segment=segs[0];
79 var dx:Number=segment.getPin().x-ball.x;
80 var dy:Number=segment.getPin().y-ball.y;
81 var dist:Number=Math.sqrt(dx*dx+dy*dy);
82 if (dist<ball.radius) {
83 ball.vx+=Math.random()*2-1;//给小球一个很小的随机x轴向速度(这样看起来小球会在x轴上突然慢下来)
84 ball.vy-=1.001;//y轴速度反向(这样看上去，会被反扔出去了)
85 }
86 }
87
88 init();
