做网站好,app网站建设制作,建站行业已死,网站建设顺序动画中的弹性运动 从视觉效果上接近 物理经典力学中的单摆运动或弹簧(胡克定律FKx)振动 先看下面的模拟演示#xff1a; 规律#xff1a; 小球先从出发点(初始为最左侧)向目标点(中心点)加速狂奔#xff0c;奔的过程中速度越来越大#xff0c;但加速度越来越小#xff0c;… 动画中的弹性运动 从视觉效果上接近 物理经典力学中的单摆运动或弹簧(胡克定律FKx)振动 先看下面的模拟演示 规律 小球先从出发点(初始为最左侧)向目标点(中心点)加速狂奔奔的过程中速度越来越大但加速度越来越小等经过目标点时发现速度太大刹不住车(此时速度达到最大值但加速度减为0)奔过头了于是加速度发生逆转从0开始变为负值从而导致速度越来越小等速度减到0时也奔到了最右侧(此时负加速度也达到最大值)然后在负加速度的影响下开始掉头又狂奔....这样不断下去直接摩擦力让它筋疲力尽最终瘫倒在目标点 :) 公式胡克定律FKx而合外力F根据牛二定律 Fma这二者结合起来换算一下也就是 ma kx即a (k/m)x .用代码体现出来即加速度与位移成(正比)线性关系。 show sourceview source print? 01 package { 02 import flash.display.Sprite; 03 import flash.events.Event; 04 import flash.events.MouseEvent; 05 import flash.geom.Rectangle; 06 import flash.ui.Mouse; 07 import flash.ui.MouseCursor; 08 09 public class Spring1 extends Sprite { 10 private var ball:Ball; 11 private var spring:Number0.02; 12 private var targetX:Numberstage.stageWidth/2; 13 private var rect:Rectangle; 14 private var vx:Number0; 15 private var isDraggingfalse; 16 17 public function Spring1() { 18 init(); 19 } 20 21 private function init():void { 22 ballnew Ball(10); 23 addChild(ball); 24 ball.x20; 25 ball.ystage.stageHeight/2; 26 addEventListener(Event.ENTER_FRAME, onEnterFrame); 27 28 ball.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler); 29 ball.addEventListener(MouseEvent.MOUSE_OVER,function(){Mouse.cursor MouseCursor.HAND}); 30 ball.addEventListener(MouseEvent.MOUSE_OUT,MouseOutHandler); 31 stage.addEventListener(MouseEvent.MOUSE_UP,MouseUpHandler); 32 33 //画辅助线 34 graphics.lineStyle(1); 35 graphics.moveTo(ball.x,ball.y); 36 graphics.lineTo(stage.stageWidth-ball.x,ball.y); 37 graphics.moveTo(stage.stageWidth/2,ball.y-10); 38 graphics.lineTo(stage.stageWidth/2,ball.y10); 39 40 rectnew Rectangle(ball.x,ball.y,stage.stageWidth-2*ball.x,0); 41 } 42 43 private function MouseOutHandler() { 44 if (! isDragging) { 45 Mouse.cursorMouseCursor.AUTO; 46 } 47 } 48 49 50 //开始拖动 51 private function MouseDownHandler(e:MouseEvent):void { 52 ball.startDrag(true,rect); 53 Mouse.cursorMouseCursor.HAND; 54 removeEventListener(Event.ENTER_FRAME, onEnterFrame); 55 isDraggingtrue; 56 57 } 58 59 //结束拖动 60 private function MouseUpHandler(e:MouseEvent):void { 61 ball.stopDrag(); 62 addEventListener(Event.ENTER_FRAME, onEnterFrame); 63 Mouse.cursorMouseCursor.AUTO; 64 isDraggingfalse; 65 } 66 67 private function onEnterFrame(event:Event):void { 68 var dx:Number targetX-ball.x; 69 var ax:Number dx*spring;//加速度与位移成正(反)比关系 70 vx ax; 71 vx * 0.97;//摩擦系数 72 trace(ax,vx); 73 ball.xvx; 74 75 } 76 } 77 } 上面演示是一维的弹性运动当然也可以同时在x轴和y轴上进行 代码 show sourceview source print? 01 package { 02 import flash.display.Sprite; 03 import flash.events.Event; 04 import flash.events.MouseEvent; 05 import flash.ui.Mouse; 06 import flash.ui.MouseCursor; 07 08 public class Spring2 extends Sprite { 09 private var ball:Ball; 10 private var spring:Number0.1; 11 private var targetX:Numberstage.stageWidth/2; 12 13 private var targetY:Numberstage.stageHeight/2; 14 private var vx:Number0; 15 private var vy:Number0; 16 private var friction:Number0.95; 17 18 public function Spring2() { 19 init(); 20 } 21 private function init():void { 22 ball new Ball(5); 23 ball.x Math.random() * stage.stageWidth; 24 ball.y Math.random() * stage.stageHeight; 25 addChild(ball); 26 addEventListener(Event.ENTER_FRAME, EnterFrameHandler); 27 stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler); 28 MouseDownHandler(null); 29 Mouse.cursor MouseCursor.BUTTON; 30 } 31 32 function MouseDownHandler(e:MouseEvent):void{ 33 graphics.clear(); 34 ball.x Math.random() * stage.stageWidth; 35 ball.y Math.random() * stage.stageHeight; 36 ball.vx (Math.random()*2-1) * 50; 37 ball.vy (Math.random()*2-1) * 50; 38 graphics.moveTo(ball.x,ball.y); 39 } 40 41 private function EnterFrameHandler(event:Event):void { 42 //去掉下面的注释就变成鼠标跟随的弹性运动 43 //targetX mouseX; 44 //targetY mouseY; 45 var dx:NumbertargetX-ball.x; 46 var dy:NumbertargetY-ball.y; 47 var ax:Numberdx*spring; 48 var ay:Numberdy*spring; 49 vxax; 50 vyay; 51 vx*friction; 52 vy*friction; 53 ball.xvx; 54 ball.yvy; 55 graphics.lineStyle(0.3,0xbbbbbb,1); 56 graphics.lineTo(ball.x,ball.y); 57 } 58 } 59 } 接下来用代码模仿一根猴皮筋儿 show sourceview source print? 01 package { 02 import flash.display.Sprite; 03 import flash.events.Event; 04 import flash.ui.Mouse; 05 import flash.ui.MouseCursor; 06 07 public class Spring3 extends Sprite { 08 private var ball:Ball; 09 private var spring:Number0.1; 10 private var vx:Number0; 11 private var vy:Number0; 12 private var friction:Number0.95; 13 14 15 public function Spring3() { 16 init(); 17 } 18 private function init():void { 19 ball new Ball(10); 20 addChild(ball); 21 addEventListener(Event.ENTER_FRAME, onEnterFrame); 22 Mouse.cursor MouseCursor.HAND; 23 } 24 private function onEnterFrame(event:Event):void { 25 var dx:Number mouseX-ball.x; 26 var dy:Number mouseY-ball.y; 27 var ax:Number dx*spring; 28 var ay:Number dy*spring; 29 vxax; 30 vyay; 31 32 vx*friction; 33 vy*friction; 34 ball.xvx; 35 ball.yvy; 36 graphics.clear(); 37 graphics.lineStyle(1); 38 graphics.moveTo(mouseX, mouseY); 39 graphics.lineTo(ball.x, ball.y); 40 } 41 } 42 } 上面的例子只有一个球如果考虑更多的小球第一球以鼠标所在位置为目标做弹性运动而第二个以第一个球为目标做弹性运动第三球又跟着第二个... 这会是什么效果呢? show sourceview source print? 01 package { 02 03 import flash.display.Sprite; 04 import flash.events.MouseEvent; 05 import flash.events.Event; 06 07 public class ArrayChain extends Sprite { 08 09 var arrBall:Array; 10 var spring:Number0.12; 11 var firstBall:Ball; 12 var gravity:Number6; 13 var friction:Number0.8; 14 15 public function ArrayChain() { 16 init(); 17 } 18 19 private function init():void { 20 arrBallnew Array(5); 21 for (var i:uint0,j:uintarrBall.length; ij; i) { 22 arrBall[i]new Ball(10,Math.random()*0xffffff); 23 addChild(arrBall[i]); 24 } 25 firstBallarrBall[0]; 26 firstBall.xMath.random()*stage.stageWidth; 27 firstBall.yMath.random()*stage.stageHeight; 28 addEventListener(Event.ENTER_FRAME,EnterFrameHandler); 29 } 30 31 private function EnterFrameHandler(e:Event):void { 32 //第一个球以鼠标所在位置为目标做弹性运动 33 firstBall.vx (mouseX - firstBall.x) * spring; 34 firstBall.vy (mouseY - firstBall.y) * spring; 35 firstBall.vygravity; 36 firstBall.vx*friction; 37 firstBall.vy*friction; 38 firstBall.xfirstBall.vx; 39 firstBall.yfirstBall.vy; 40 41 //准备画连线 42 graphics.clear(); 43 graphics.lineStyle(0.2,0x666666); 44 graphics.moveTo(mouseX,mouseY); 45 graphics.lineTo(firstBall.x,firstBall.y); 46 47 //后面的小球依次以前一个的位置为目标做弹性运动 48 for (var i1,jarrBall.length; ij; i) { 49 var ball:BallarrBall[i]; 50 ball.vx (arrBall[i-1].x-ball.x)*spring; 51 ball.vy (arrBall[i-1].y-ball.y)*spring; 52 ball.vygravity; 53 ball.vx*friction; 54 ball.vy*friction; 55 ball.xball.vx; 56 ball.yball.vy; 57 graphics.lineTo(ball.x,ball.y);//画出连线将各球连在一起 58 } 59 } 60 } 61 62 } ok,我们得到了一个弹簧链当然这里面还考虑了重力的因素通过上面的几个例子可以总结一下:第一个示例中一维弹性运动可以看作为x方向的加速度随位移的影响而第二个示例可以看作是x,y二个方向加速度随位移影响的叠加而第三个示例则可以看作是任何方向这种影响再叠加重力的综合效果。总之任何方向的弹性运动都可以认为是该方向的加速度(或力)随位移的影响而且这种影响可以在多个方向上叠加。下面这个是多点控制弹性运动的示例 转载于:https://www.cnblogs.com/happysky97/archive/2010/11/22/1884574.html
