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;
}
}
}
真正的行走：