Flash/Flex学习笔记(40)：正向运动学

所谓"正向运动学"通俗点讲就是把几个连接部件的一端固定起来，另一个端可以自由(向前/向外)运动。比如人的行走，单个下肢可以理解为脚连接小腿，小腿连接大腿，大腿连接腰。行走的过程，相当于二条腿相对固定于腰部，大腿运动驱动小腿，小腿又驱动脚，从而带动整个连接系统的一系列运动。

先来一个基本的关节类Segment:（就是一个圆角矩形+二个小圆圈）

package {

 
import flash.display.Sprite;

import flash.geom.Point;

public class Segment extends Sprite {

 
private var color:uint;

 
private var segmentWidth:Number;

private var segmentHeight:Number;

 
public var vx:Number=0;

 
public var vy:Number=0;

public function Segment(segmentWidth:Number,segmentHeight:Number,color:uint=0xffffff) {

 
this.segmentWidth=segmentWidth;

this.segmentHeight=segmentHeight;

 
this.color=color;

 
init();

 
}

 
public function init():void {

 
// 绘制关节 

 
graphics.lineStyle(0);

graphics.beginFill(color);

 
graphics.drawRoundRect(- segmentHeight/2,- segmentHeight/2,segmentWidth+segmentHeight,segmentHeight,segmentHeight,segmentHeight);

graphics.endFill();

 
// 绘制两个“枢轴” 

 
graphics.drawCircle(0,0,2);  
graphics.drawCircle(segmentWidth,0,2);

 
}

//获得自由端的坐标  
public function getPin():Point {

 
var angle:Number=rotation*Math.PI/180;

 
var xPos:Number=x+Math.cos(angle)*segmentWidth;

 
var yPos:Number=y+Math.sin(angle)*segmentWidth;

return new Point(xPos,yPos);

 
}

 
}

 
}

为了动态控制关节的旋转，再来一个简单的滑块控件类：（下列代码看起来吃力的同学，建议先看Flash/Flex学习笔记(36)：自己动手实现一个滑块控件(JimmySilder)）

package {

 
import flash.display.Sprite;

 
import flash.events.MouseEvent;

 
import flash.geom.Rectangle;

 
import flash.events.Event;

 
public class SimpleSlider extends Sprite {

 
private var _width:Number=6;

 
private var _height:Number=100;

private var _value:Number;

private var _max:Number=100;

 
private var _min:Number=0;

private var _handle:Sprite;

private var _back:Sprite;

private var _backWidth:Number=0;

 
private var _handleHeight:Number=20;

 
private var _backColor:uint=0xcccccc;

 
private var _backBorderColor:uint=0x999999;

private var _handleColor:uint=0x000000;

private var _handleBorderColor:uint=0xcccccc;

private var _handleRadius:Number=2;

private var _backRadius:Number=2;

public function SimpleSlider(min:Number = 0, max:Number = 100, value:Number = 100 ) {

_min=min;

_max=max;

 
value=Math.min(Math.max(value,min),max);

init();

}

 

private function init():void {

_back = new Sprite () ;

 
addChild(_back);

 
_handle = new Sprite () ;

 
_handle.buttonMode=true;

addChild(_handle);

 
_handle.addEventListener( MouseEvent.MOUSE_DOWN , MouseDownHandler );

draw();

updatePosition();

}

private function draw():void {

 
drawBack();

 
drawHandle();

 
}

 
private function drawBack():void {

 
_back.graphics.clear();

 
_back.graphics.beginFill( _backColor );

 
_back.graphics.lineStyle( 0, _backBorderColor );

 
_back.graphics.drawRoundRect( 0, 0, _backWidth , _height , _backRadius , _backRadius );

 
_back.graphics.endFill();

 
_back.x=_width/2-_backWidth/2;

 
}

private function drawHandle():void {

 
_handle.graphics.clear();

 
_handle.graphics.beginFill( _handleColor );

 
_handle.graphics.lineStyle( 0, _handleBorderColor );

 
_handle.graphics.drawRect( 0, 0, _width , _handleHeight );

_handle.graphics.endFill();

 
}

 
private function updatePosition():void {

 
var handleRange:Number=_height-_handleHeight;

 
var valueRange:Number=_max-_min;

 
_handle.y = handleRange - ( _value - _min ) / valueRange * handleRange ;

 
}

 
private function updateValue():void {

 
var handleRange:Number=_height-_handleHeight;

 
var valueRange:Number=_max-_min;

 
_value = ( handleRange - _handle.y ) / handleRange * valueRange + _min ;

dispatchEvent( new Event ( Event.CHANGE ));

 
}

private function MouseUpHandler( e:MouseEvent ):void {

 
stage.removeEventListener( MouseEvent.MOUSE_MOVE , MouseMoveHandler );

 
stage.removeEventListener( MouseEvent.MOUSE_UP , MouseUpHandler );

 
_handle.stopDrag();

 
}

 
private function MouseDownHandler( e:MouseEvent ):void {

 
stage.addEventListener( MouseEvent.MOUSE_MOVE , MouseMoveHandler );

 
stage.addEventListener( MouseEvent.MOUSE_UP , MouseUpHandler );

_handle.startDrag( false , new Rectangle ( 0, 0, 0, _height - _handleHeight ));

 
}

 

private function MouseMoveHandler( e:MouseEvent ):void {

 
updateValue();

 
}

public function invalidate():void {

 
draw();

 
}

 
public function move( x:Number , y:Number ):void {

 
this.x=x;

 
this.y=y;

 
}

 
public function setSize( w:Number , h:Number ):void {

 
_width=w;

 
_height=h;

 
draw();

}

 
public function set backBorderColor( n:uint ):void {

 
_backBorderColor=n;

 
draw();

 
}

 

public function get backBorderColor():uint {

 
return _backBorderColor;

 
}

 
public function set backColor( n:uint ):void {

_backColor=n;

 
draw();

 
}

 
public function get backColor():uint {

return _backColor;

 
}

public function set backRadius( n:Number ):void {

 
_backRadius=n;

 
}

 
public function get backRadius():Number {

 
return _backRadius;

 
}

 
public function set backWidth( n:Number ):void {

 
_backWidth=n;

 
draw();

 
}

 
public function get backWidth():Number {

 
return _backWidth;

 
}

 
public function set handleBorderColor( n:uint ):void {

 
_handleBorderColor=n;

 
draw();

 
}

 
public function get handleBorderColor():uint {

 
return _handleBorderColor;

 
}

 
public function set handleColor( n:uint ):void {

_handleColor=n;

 
draw();

 
}

public function get handleColor():uint {

return _handleColor;

 
}

 
public function set handleRadius( n:Number ):void {

 
_handleRadius=n;

 
draw();

 
}

public function get handleRadius():Number {

 
return _handleRadius;

 
}

 
public function set handleHeight( n:Number ):void {

 
_handleHeight=n;

draw();

 
updatePosition();

 
}

 
public function get handleHeight():Number {

 
return _handleHeight;

 
}

 
override public function set height( n:Number ):void {

 
_height=n;

 
draw();

 
}

 
override public function get height():Number {

 
return _height;

 
}

 
public function set max( n:Number ):void {

 
_max=n;

 
updatePosition();

}

 
public function get max():Number {

return _max;

 
}

 
public function set min( n:Number ):void {

_min=n;

 
updatePosition();

}

 
public function get min():Number {

 
return _min;

 
}

 
public function set value( n:Number ):void {

value=n;

 
value=Math.min(_max,Math.max(_value,_min));

 
updatePosition();

 
}

 
public function get value():Number {

 
return _value;

 
}

 
override public function set width( n:Number ):void {

_width=n;

 
draw();

 
}

 
override public function get width():Number {

 
return _width;

}

 
}

 
}

基本测试：

var segment:Segment=new Segment(100,20);

 
addChild(segment);

segment.x=50;

 
segment.y=120;

 
var slider:SimpleSlider=new SimpleSlider(-90,90,0);

 
addChild(slider);

 
slider.x=200;

 
slider.y=70;

slider.addEventListener(Event.CHANGE,onChange);

 
function onChange(event:Event):void {

 
segment.rotation=slider.value;

 
}

双关节运动测试：

package {

 
import flash.display.Sprite;

 
import flash.events.Event;

 
public class TwoSegments extends Sprite {

private var slider0:SimpleSlider;       

 
private var slider1:SimpleSlider;

 
private var segment0:Segment;

 
private var segment1:Segment;

 
public function TwoSegments() {

 
init();

 
}

 
private function init():void {

 
segment0=new Segment(100,20);

 
addChild(segment0);

 
segment0.x=50;

 
segment0.y=150;

 
segment1=new Segment(100,20);

addChild(segment1);

 
//关键：segment1的固定端连接到segment0的自由端

segment1.x=segment0.getPin().x;

 
segment1.y=segment0.getPin().y;

 
slider0=new SimpleSlider(-90,90,0);

addChild(slider0);

 
slider0.x=320;

 
slider0.y=90;

 
slider0.addEventListener(Event.CHANGE,onChange);

 
slider1=new SimpleSlider(-90,90,0);

 
addChild(slider1);

slider1.x=340;

 
slider1.y=90;

 
slider1.addEventListener(Event.CHANGE,onChange);

 
}

 
private function onChange(event:Event):void {

 
segment0.rotation=slider0.value;

 
segment1.rotation=slider1.value;

 
segment1.x=segment0.getPin().x;

 
segment1.y=segment0.getPin().y;

 
}

 
}

}

如果把segment0与segment1分别看做人的胳膊与手臂，上面这个示例显然有二个地方不自然：

1.没有人的（前）手臂向下做-90度的弯曲(除非脱臼)

2.人的上肢整体向上抬时，手臂会随着胳膊一起绕肩关节向上旋转，而不应该一直固定于某个角度

修正的方法很简单，onChange改成下面这样：

 
private function onChange(event:Event):void {

 
segment0.rotation=slider0.value;

 
segment1.rotation=slider1.value + segment0.rotation;//注意这行

 
segment1.x=segment0.getPin().x;

 
segment1.y=segment0.getPin().y;

 
}

同时限制一下slider1的角度范围，改成下面这样：

slider1=new SimpleSlider(-160,0,0);

单腿原地“踢”模拟

 
package {

 
import flash.display.Sprite;

import flash.events.Event;

 
public class Walking1 extends Sprite {

 
private var segment0:Segment;

 
private var segment1:Segment;

 
private var cycle:Number=0;

 
private var offset:Number = -Math.PI/2;//小腿的运动看上去应该滞后于大腿，所以需要加入反向偏移量

 
public function Walking1() {

 
init();

 
trace(Math.PI/180);

 
trace(0.05*180/Math.PI);

 
}

 
private function init():void {

 
segment0=new Segment(100,20);

 
addChild(segment0);

segment0.x=200;

segment0.y=200;

 
segment1=new Segment(100,20);

 
addChild(segment1);

segment1.x=segment0.getPin().x;

 
segment1.y=segment0.getPin().y;

 
addEventListener(Event.ENTER_FRAME,onEnterFrame);

 
}

private function onEnterFrame(event:Event):void {

 
cycle+=.05;

 
var angle0:Number=Math.sin(cycle)*45 + 90;//-45到45整体加上90度以后，就变成45到135，即：大腿垂直方向左右摆动45度

 
var angle1:Number = Math.sin(cycle + offset) * 45 + 45;//即：小腿相对大腿末端做0-90度的正向旋转。建议大家尝试修改一下这里的+45值的大小，看看效果有什么不同

 
segment0.rotation=angle0;

 
segment1.rotation=segment0.rotation+angle1;

 
segment1.x=segment0.getPin().x;

segment1.y=segment0.getPin().y;

 
}

 
}

 
}

双腿原地行走：

package {

 
import flash.display.Sprite;

 
import flash.events.Event;

public class Walking4 extends Sprite {

private var segment0:Segment;

 
private var segment1:Segment;

 
private var segment2:Segment;

 
private var segment3:Segment;

 
private var cycle:Number=0;

 
private var offset:Number=- Math.PI/2;//小腿的运动看上去应该滞后于大腿，所以需要加入反向偏移量

 
public function Walking4() {

 
init();         

 
}

 
private function init():void {

 
segment0=new Segment(100,35);//第一条大腿

addChild(segment0);

 
segment0.x=200;

 
segment0.y=50;

 
segment1=new Segment(100,20);           

 
addChild(segment1);

 
segment1.x=segment0.getPin().x;//第一条小腿连接到第一条大腿

 
segment1.y=segment0.getPin().y;

 
segment2=new Segment(100,35);//第二条大腿

 
segment2.x = segment0.x;//第二条大腿与第一条大腿坐标相同，视觉效果上看，就象都固定在腰部

 
segment2.y = segment0.y;

addChild(segment2);

segment3=new Segment(100,20);           

 
addChild(segment3);

 
segment3.x=segment2.getPin().x;//第二条小腿连接到第二条大腿

 
segment3.y=segment2.getPin().y;

 
addEventListener(Event.ENTER_FRAME,EnterFrameHandler);

 
}

 
private function EnterFrameHandler(event:Event):void {

 
walk(segment0, segment1, cycle); 

 
walk(segment2, segment3, cycle + Math.PI);//注意这里的:+Math.PI,如果不加这个，二条腿的频率/角度完全相同，将重叠在一起，加上180度以后，正好反相过来，一条腿在前，另一条腿在后

cycle += .05;

 
}

//把"走"的动作封装起来

 
private function walk(segA:Segment, segB:Segment, cyc:Number):void {

 
var angleA:Number=Math.sin(cyc)*45+90;

 
var angleB:Number=Math.sin(cyc+offset)*45+45;

 
segA.rotation=angleA;

 
segB.rotation=segA.rotation+angleB;

 
segB.x=segA.getPin().x;

 
segB.y=segA.getPin().y;

 
}

 
}

 
}

加入滑块控制条后的样子：

 
package {

 
import flash.display.Sprite;

 
import flash.events.Event;

 
public class Walking5 extends Sprite {

private var segment0:Segment;

 
private var segment1:Segment;

private var segment2:Segment;

 
private var segment3:Segment;

 
private var speedSlider:SimpleSlider;

private var thighRangeSlider:SimpleSlider;

 
private var thighBaseSlider:SimpleSlider;

 
private var calfRangeSlider:SimpleSlider;

private var calfOffsetSlider:SimpleSlider;

private var cycle:Number=0;

public function Walking5() {

 
init();

 
}

 
private function init():void {

 
segment0=new Segment(100,30);

addChild(segment0);

segment0.x=200;

 
segment0.y=100;

 
segment1=new Segment(100,20);

addChild(segment1);

 
segment1.x=segment0.getPin().x;

 
segment1.y=segment0.getPin().y;

 
segment2=new Segment(100,30);

 
addChild(segment2);

 
segment2.x=200;

segment2.y=100;

 
segment3=new Segment(100,20);

 
addChild(segment3);

 
segment3.x=segment2.getPin().x;

segment3.y=segment2.getPin().y;

 
//控制速度的滑块

 
speedSlider=new SimpleSlider(0,0.5,0.11);

 
addChild(speedSlider);

 
speedSlider.x=10;

 
speedSlider.y=10;

 
//控制大腿能分开的最大角度

 
thighRangeSlider=new SimpleSlider(0,90,45);

 
addChild(thighRangeSlider);

 
thighRangeSlider.x=30;

thighRangeSlider.y=10;

 
//大腿旋转的偏移量

 
thighBaseSlider=new SimpleSlider(0,180,90);

addChild(thighBaseSlider);          

 
thighBaseSlider.x=50;

 
thighBaseSlider.y=10;

 
//小腿旋转的偏移量

 
calfRangeSlider=new SimpleSlider(0,90,45);

 
addChild(calfRangeSlider);          

 
calfRangeSlider.x=70;

 
calfRangeSlider.y=10;

//小腿相对大腿滞后的偏移量

 
calfOffsetSlider=new SimpleSlider(-3.14,3.14,-1.57);

 
addChild(calfOffsetSlider);         

calfOffsetSlider.x=90;

 
calfOffsetSlider.y=10;

 
addEventListener(Event.ENTER_FRAME, EnterFrameHandler);

 
}

private function EnterFrameHandler(e:Event):void {

walk(segment0, segment1, cycle);

 
walk(segment2, segment3, cycle + Math.PI);

cycle+=speedSlider.value;

 
}

 
private function walk(segA:Segment, segB:Segment,cyc:Number):void {

 
var angleA:Number = Math.sin(cyc) * thighRangeSlider.value + thighBaseSlider.value;

 
var angleB:Number = Math.sin(cyc +calfOffsetSlider.value) * calfRangeSlider.value + calfRangeSlider.value;

 
segA.rotation=angleA;

 
segB.rotation=segA.rotation+angleB;

 
segB.x=segA.getPin().x;

segB.y=segA.getPin().y;

 
}

 
}

 
}

真正的行走：