AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Flash/Flex学习笔记(40)：弹性运动续--弹簧

2010-04-18 807
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 上一篇里演示的弹性运动加上摩擦力因素后，物体最终基本上都会比较准确的停在目标位置。但是我们回想一下现实世界中的弹簧，如果把弹簧的一头固定起来(即相当于目标点)，而另一端栓一个球，把球拉开或压缩一定距离然后松手，事实上小球永远也不可能到达弹簧固定的那一端(因为弹簧即使压缩到最紧，也总有一定的长度) ...

上一篇里演示的弹性运动加上摩擦力因素后，物体最终基本上都会比较准确的停在目标位置。但是我们回想一下现实世界中的弹簧，如果把弹簧的一头固定起来(即相当于目标点)，而另一端栓一个球，把球拉开或压缩一定距离然后松手，事实上小球永远也不可能到达弹簧固定的那一端(因为弹簧即使压缩到最紧，也总有一定的长度)

所以如果要在Flash里模拟现实中的弹簧，真正的目标点绝不是弹簧的端点，而是目标点再偏移一段距离(即弹簧自然伸展时的长度)

var ball:Ball = new Ball(6);
addChild(ball);
ball.y = 20;
ball.x = 20;

var targetX:Number=stage.stageWidth/2;
var targetY:Number=ball.y;

var springLength = 100;//弹簧长度
var spring = 0.2;//弹性系数
var friction = 0.92;//摩擦系数

//画辅助线，以便看得更清楚
graphics.lineStyle(0.5,0xaaaaaa);
graphics.moveTo(ball.x,ball.y);
graphics.lineTo(stage.stageWidth-ball.x,ball.y);
graphics.moveTo(targetX,targetY-10);
graphics.lineTo(targetX,targetY+10);
graphics.moveTo(targetX-springLength,targetY-8);
graphics.lineTo(targetX-springLength,targetY+8);

var rect:Rectangle = new Rectangle(ball.x,ball.y,stage.stageWidth-ball.x*2,0);

addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
ball.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_UP,MouseUpHandler);

function EnterFrameHandler(e:Event):void{
	ball.vx += (targetX - springLength - ball.x)*spring;
	ball.vx *= friction;
	ball.x += ball.vx;
}

function MouseDownHandler(e:MouseEvent):void{
	(e.target as Sprite).startDrag(true,rect);
	removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);
}

function MouseUpHandler(e:MouseEvent):void{
	ball.stopDrag();
	addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
}

ball.addEventListener(MouseEvent.MOUSE_OUT,function(){Mouse.cursor = MouseCursor.AUTO});
ball.addEventListener(MouseEvent.MOUSE_OVER,function(){Mouse.cursor = MouseCursor.HAND});

如果考虑到二维坐标的弹簧运动，要稍微复杂一点：

img_c59da255ea47552b0f505e2abab8c7ef.jpg

var ball:Ball = new Ball(10);
addChild(ball);
ball.y = 20;
ball.x = 20;

var targetX:Number=stage.stageWidth/2;
var targetY:Number=stage.stageHeight/2;

var springLength:uint = 100;//弹簧长度
var spring:Number = 0.2;//弹性系数
var friction:Number = 0.92;//摩擦系数
var angle:Number = 0;

addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
ball.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_UP,MouseUpHandler);
stage.addEventListener(MouseEvent.MOUSE_MOVE,function(){DrawLine()});

angle = Math.atan2(targetY - ball.y,targetX -ball.x);//确定夹角
trace(angle*180/Math.PI);

function EnterFrameHandler(e:Event):void{
	ball.vx += (targetX - springLength*Math.cos(angle) - ball.x)*spring;//调整目标点
	ball.vy += (targetY - springLength*Math.sin(angle) - ball.y)*spring;
	ball.vx *= friction;
	ball.vy *= friction;
	ball.x += ball.vx;
	ball.y += ball.vy;
	DrawLine();
}

function DrawLine():void{
	graphics.clear();
	graphics.lineStyle(1);
	graphics.moveTo(targetX,targetY-10);
	graphics.lineTo(targetX,targetY+10);
	graphics.moveTo(targetX-10,targetY);
	graphics.lineTo(targetX+10,targetY);
	graphics.moveTo(targetX,targetY);
	graphics.lineStyle(0.5,0xaaaaaa);
	graphics.lineTo(ball.x,ball.y);
}

function MouseDownHandler(e:MouseEvent):void{
	(e.target as Sprite).startDrag(true);
	removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);
}

function MouseUpHandler(e:MouseEvent):void{
	ball.stopDrag();
	addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
}

ball.addEventListener(MouseEvent.MOUSE_OUT,function(){Mouse.cursor = MouseCursor.AUTO});
ball.addEventListener(MouseEvent.MOUSE_OVER,function(){Mouse.cursor = MouseCursor.HAND});

上面的例子中，移动的方向(即夹角)与目标点都是固定的，如果改成动态的（比如鼠标当前所在位置），效果可能更逼真

function EnterFrameHandler(e:Event):void{
	targetX = mouseX;//改成动态目标
	targetY = mouseY;
	angle = Math.atan2(targetY - ball.y,targetX -ball.x);//动态夹角
	ball.vx += (targetX - springLength*Math.cos(angle) - ball.x)*spring;
	ball.vy += (targetY - springLength*Math.sin(angle) - ball.y)*spring;
	ball.vx *= friction;
	ball.vy *= friction;
	ball.x += ball.vx;
	ball.y += ball.vy;
	DrawLine();
}

如果二个物体相互以对方所在位置为目标做弹性运动，同时再考虑弹簧长度，边界检测等因素，可以用AS3模拟出一个极逼真的弹簧模型：

var ball_1:Ball = new Ball(10,0xff0000);
var ball_2:Ball = new Ball(10,0x0000ff);
ball_1.x = stage.stageWidth * Math.random();
ball_1.y = stage.stageHeight * Math.random();
ball_2.x = stage.stageWidth/2;
ball_2.y = stage.stageHeight/2;

addChild(ball_1);
addChild(ball_2);

var spring:Number = 0.1;
var springLength:uint = 100;
var friction:Number = 0.9;
var darggingBall:Ball;

addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
ball_1.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
ball_2.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_UP,MouseUpHandler);
stage.addEventListener(MouseEvent.MOUSE_MOVE,function(){DrawLine();});
ball_1.addEventListener(MouseEvent.MOUSE_OVER,MouseOverHandler);
ball_1.addEventListener(MouseEvent.MOUSE_OUT,MouseOutHandler);
ball_2.addEventListener(MouseEvent.MOUSE_OVER,MouseOverHandler);
ball_2.addEventListener(MouseEvent.MOUSE_OUT,MouseOutHandler);

function MouseOutHandler(e:MouseEvent){
	Mouse.cursor = MouseCursor.AUTO;
}

function MouseOverHandler(e:MouseEvent){
	Mouse.cursor = MouseCursor.HAND;
}

function MouseDownHandler(e:MouseEvent):void{
	(e.target as Sprite).startDrag(true,new Rectangle(20,20,stage.stageWidth-40,stage.stageHeight-40));
	darggingBall = e.target as Ball;
	removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);
}

function MouseUpHandler(e:MouseEvent):void{
	if (darggingBall!=null){
		darggingBall.stopDrag();
		darggingBall = null;
		addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
	}	
}

function EnterFrameHandler(e:Event):void{
	var dx1 = ball_2.x -ball_1.x;
	var dy1 = ball_2.y -ball_1.y;	
	var angle1:Number = Math.atan2(dy1,dx1);	
	ball_1.vx += (ball_2.x - springLength * Math.cos(angle1) - ball_1.x) * spring;
	ball_1.vy += (ball_2.y - springLength * Math.sin(angle1) - ball_1.y) * spring;	
	ball_1.vx *= friction;
	ball_1.vy *= friction;	
	ball_1.x += ball_1.vx;
	ball_1.y += ball_1.vy;
	
	
	var dx2 = ball_1.x -ball_2.x;
	var dy2 = ball_1.y -ball_2.y;	
	var angle2:Number = Math.atan2(dy2,dx2);	
	ball_2.vx += (ball_1.x - springLength * Math.cos(angle2) - ball_2.x) * spring;
	ball_2.vy += (ball_1.y - springLength * Math.sin(angle2) - ball_2.y) * spring;	
	ball_2.vx *= friction;
	ball_2.vy *= friction;	
	ball_2.x += ball_2.vx;
	ball_2.y += ball_2.vy;
	
	DrawLine();
	
	CheckBoundary(ball_1);
	CheckBoundary(ball_2);
	
	
}

function DrawLine():void{
	graphics.clear();
	graphics.lineStyle(0.5,0x666666);
	graphics.moveTo(ball_1.x,ball_1.y);
	graphics.lineTo(ball_2.x,ball_2.y);
}

function CheckBoundary(b:Ball){
	if (b.x>stage.stageWidth-b.width/2 || b.x<=b.width/2){
		b.x -= b.vx;		
		b.vx *= -1;
	}
	
		if (b.y>stage.stageHeight-b.height/2 || b.y<=b.height/2){
		b.y -= b.vy;
		b.vy *= -1;
	}
}

如果玩得再疯狂一点，多放一些小球，让第二个以第一个为目标，第三个以第二个为目标...最后一个再以第一个为目标，这样构成一个环，大概就是下面这个样子：

var spring:Number=0.1;
var springLength:uint=150;
var friction:Number=0.8;//摩擦力
var darggingBall:Ball;
var ballNumber:uint = 3;//小球个数

var arrBalls:Array = new Array(ballNumber);

for(var i:uint=0,j=arrBalls.length;i<j;i++){
	arrBalls[i] = new Ball(20,Math.random() * 0xffffff);
	var _ball:Ball = arrBalls[i];
	_ball.x=stage.stageWidth*Math.random();
	_ball.y=stage.stageHeight*Math.random();
	addChild(_ball);
	_ball.addEventListener(MouseEvent.MOUSE_OVER,MouseOverHandler);
	_ball.addEventListener(MouseEvent.MOUSE_OUT,MouseOutHandler);
	_ball.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
}

addEventListener(Event.ENTER_FRAME,EnterFrameHandler);


stage.addEventListener(MouseEvent.MOUSE_UP,MouseUpHandler);
stage.addEventListener(MouseEvent.MOUSE_MOVE,function(){DrawLine();});


//切换光标
function MouseOutHandler(e:MouseEvent) {
	Mouse.cursor=MouseCursor.AUTO;
}

//切换光标
function MouseOverHandler(e:MouseEvent) {
	Mouse.cursor=MouseCursor.HAND;
}

//开始拖动
function MouseDownHandler(e:MouseEvent):void {
	(e.target as Sprite).startDrag(true,new Rectangle(20,20,stage.stageWidth-40,stage.stageHeight-40));
	darggingBall=e.target as Ball;
	removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);
}

//结束拖动
function MouseUpHandler(e:MouseEvent):void {
	if (darggingBall!=null) {
		darggingBall.stopDrag();
		darggingBall=null;
		addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
	}
}

function EnterFrameHandler(e:Event):void {
	
	for(var i:uint=0,j=arrBalls.length-1;i<j;i++){
		SpringTo(arrBalls[i],arrBalls[i+1]);		
	}
	SpringTo(arrBalls[arrBalls.length-1],arrBalls[0]);
	
	DrawLine();	
	
	for(i=0,j=arrBalls.length;i<j;i++){
		CheckBoundary(arrBalls[i]);
	}


}


//画连接线
function DrawLine():void {
	graphics.clear();
	graphics.lineStyle(0.5,0x666666);
	//graphics.moveTo(ball_1.x,ball_1.y);
	//graphics.lineTo(ball_2.x,ball_2.y);
	
	for(var i:uint=0,j=arrBalls.length-1;i<j;i++){
		graphics.moveTo(arrBalls[i].x,arrBalls[i].y);
		graphics.lineTo(arrBalls[i+1].x,arrBalls[i+1].y);
	}
	graphics.lineTo(arrBalls[0].x,arrBalls[0].y);
}

//弹性运动处理
function SpringTo(targetBall:Ball,moveBall:Ball):void{
	var dy=targetBall.y-moveBall.y;
	var dx=targetBall.x-moveBall.x;	
	var angle1:Number=Math.atan2(dy,dx);
	moveBall.vx += (targetBall.x - springLength * Math.cos(angle1) - moveBall.x) * spring;
	moveBall.vy += (targetBall.y - springLength * Math.sin(angle1) - moveBall.y) * spring;
	moveBall.vx *= friction;
	moveBall.vy *= friction;
	moveBall.x += moveBall.vx;
	moveBall.y += moveBall.vy;
}

//检测边界
function CheckBoundary(b:Ball) {
	if (b.x>stage.stageWidth-b.width/2||b.x<=b.width/2) {
		b.x-=b.vx;
		b.vx*=-1;
	}

	if (b.y>stage.stageHeight-b.height/2||b.y<=b.height/2) {
		b.y-=b.vy;
		b.vy*=-1;
	}
}

思考一下：这样为啥不会造成死循环？

文章标签：
Spring
Java
内存技术
杨俊明
目录
相关文章
天秤座的码农
|
容器
教你快速上手Flex弹性盒布局（项目属性）
教你快速上手Flex弹性盒布局（项目属性）
天秤座的码农
61 0
啊理八八
|
UED 容器
如何实现侧边两栏宽度固定，中间栏宽度自适应的布局？——双飞翼布局、圣杯（Holy Grails）布局
如何实现侧边两栏宽度固定，中间栏宽度自适应的布局？——双飞翼布局、圣杯（Holy Grails）布局
啊理八八
80 0
CodingFire
Core Animation － 发光的太阳（附高效设置图片圆角和变圆的方法）
Core Animation － 发光的太阳（附高效设置图片圆角和变圆的方法）
CodingFire
80 0
Core Animation － 发光的太阳（附高效设置图片圆角和变圆的方法）
小調不吃辣
|
前端开发 容器
通俗重制系列--Grid布局
通俗重制系列--Grid布局
小調不吃辣
132 0
huihuizi
|
Java 程序员 容器
Flex弹性盒子（一篇带你掌握潮流 Flex 布局）（下）
5.当切换容器排列方式后，水平对齐以及垂直对齐的 应用 变化（重点、难点⭐⭐⭐⭐⭐） 当使用flex-direction: (例 column) ;时 justify-content 、 align-content 、align-items发生的变化 当排列为column / column-reverse 时，其实容器的主轴发生了变化 主轴现在是竖轴，副轴是横轴
huihuizi
131 0
Flex弹性盒子（一篇带你掌握潮流 Flex 布局）（下）
huihuizi
|
前端开发 安全 容器
Flex弹性盒子（一篇带你掌握潮流 Flex 布局）（上）
Flex弹性盒子 1.说在前头 1.1.Flex布局出现之前 我们知道传统的页面布局依赖于 盒状模型 依赖于display、position、float属性 对于某些特殊布局来说特别不方便，比如垂直居中（比较不容易实现） 1.2.Flex布局出现后 2009年，W3C提出Flex布局 简便、完整、响应式的各种实现页面布局（目前已得到所有主流浏览器的支持）
huihuizi
317 0
Flex弹性盒子（一篇带你掌握潮流 Flex 布局）（上）
chinar-yunxi
|
图形学
Unity 3D光源-Spot Light聚光灯用法详解、模拟手电筒、台灯等线性教程
Unity4大光源之聚光灯 本文提供全流程，中文翻译。 Chinar 坚持将简单的生活方式，带给世人！（拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例） Chinar —— 心...
chinar-yunxi
3624 0
古镇月影
|
Web App开发
box2d 刚体的重心设置
引用：http://bbs.51cto.com/thread-842566-1.html    板凳  b2MassData * MassData = new b2MassData;        MassData->mass = 0.
古镇月影
715 0
杨俊明
|
定位技术
Flex:地图缩放平移效果(简易版)
先看效果：（这个只是原型，简陋了点） 功能： 双击图片或拖动右侧的滑块可实现图片的放大，鼠标按下不放可平移图片。 应用场景：目前各地铁、医院、大型商场、机场均有单点触摸查询屏，用这个功能可以实现用户的简单自助地图导航。
杨俊明
987 0
杨俊明
|
图形学 内存技术
Flash/Flex学习笔记(55)：背面剔除与 3D 灯光
Animation in ActionScript3.0 这本书总算快学完了，今天继续：上一回Flash/Flex学习笔记(50)：3D线条与填充 里，我们知道任何一个3D多面体上的某一个面，都可以分解为多个三角形的组合。
杨俊明
935 0