Flash/Flex学习笔记(39):弹性运动。设计师为使学物理学。

卡通中的弹性运动 从视觉效果上看似
物理经典力学中的只有摆活动或者弹簧(胡克定律F=Kx)振动

原稿出处: @養老虎的小怪獸_   

先行押下面的套演示:

咱们会将打小到非常对是世界之认映射到屏幕世界面临。所以从事物规律的角度出发,探究一下运动曲线。

规律:
小球先从出发点(初始为极端左边)向目标点(中心点)加速疯狂奔,奔的过程被速越来越好,但加速度更小,等经目标点时,发现速度极老寺庙不停歇车(此时快高达极致要命价值,但加速度减为0),奔过头了!于是加速度发出逆转,从0开始变成负值,从而造成速度更是粗,等速度减交0时,也于到了最右(此时负加速度也齐最要命价值),然后以负加速度的震慑下,开始掉头又发疯奔….这样连下,直接摩擦力让它们筋疲力尽,最终瘫痪倒在靶点
🙂

本文并无深入物理定律的本身,只讲述活动曲线的利用,曾经教睡觉的校友也无需顾虑。

公式:胡克定律F=Kx,而合外力F根据牛二定律
F=ma,这两边组合起来换算一下,也就是是 ma = kx,即a =
(k/m)x .用代码体现出来,即加以速度与各项移成(正比)线性关系。 

先期引用下百科神马是大体:物理学是研究物质运动极相似原理与物质基本构造的教程。作为自然科学的为首学科,物理学研究十分到宇宙,小到中心粒子等所有物质最核心的移动款式以及规律,因此成另外各自然科学课的钻研功底。它的说理结构充分地行使数学作为自己之干活语言,以实验作为检验理论对的唯一标准,它是今天极精细的相同流派自然科学课。(猜你们啊没仔细看,总之就是是物理是同样家大牛逼的科目。)

package {
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Rectangle;
    import flash.ui.Mouse;
    import flash.ui.MouseCursor;

    public class Spring1 extends Sprite {
        private var ball:Ball;
        private var spring:Number=0.02;
        private var targetX:Number=stage.stageWidth/2;
        private var rect:Rectangle;
        private var vx:Number=0;
        private var isDragging=false;

        public function Spring1() {
            init();
        }

        private function init():void {
            ball=new Ball(10);
            addChild(ball);
            ball.x=20;
            ball.y=stage.stageHeight/2;
            addEventListener(Event.ENTER_FRAME, onEnterFrame);

            ball.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
            ball.addEventListener(MouseEvent.MOUSE_OVER,function(){Mouse.cursor = MouseCursor.HAND});
            ball.addEventListener(MouseEvent.MOUSE_OUT,MouseOutHandler);
            stage.addEventListener(MouseEvent.MOUSE_UP,MouseUpHandler);

            //画辅助线
            graphics.lineStyle(1);
            graphics.moveTo(ball.x,ball.y);
            graphics.lineTo(stage.stageWidth-ball.x,ball.y);
            graphics.moveTo(stage.stageWidth/2,ball.y-10);
            graphics.lineTo(stage.stageWidth/2,ball.y+10);

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

        private function MouseOutHandler() {
            if (! isDragging) {
                Mouse.cursor=MouseCursor.AUTO;
            }
        }


        //开始拖动
        private function MouseDownHandler(e:MouseEvent):void {
            ball.startDrag(true,rect);
            Mouse.cursor=MouseCursor.HAND;
            removeEventListener(Event.ENTER_FRAME, onEnterFrame);
            isDragging=true;

        }

        //结束拖动
        private function MouseUpHandler(e:MouseEvent):void {
            ball.stopDrag();
            addEventListener(Event.ENTER_FRAME, onEnterFrame);
            Mouse.cursor=MouseCursor.AUTO;
            isDragging=false;
        }

        private function onEnterFrame(event:Event):void {
            var dx:Number = targetX-ball.x;
            var ax:Number = dx*spring;//加速度与位移成正(反)比关系
            vx += ax;
            vx *= 0.97;//摩擦系数
            trace(ax,vx);
            ball.x+=vx;

        }
    }
}

自我一直以为动效设计之本人是人机交互中那个重大的环节,并且我们会拿打小到深对之世界的认映射到屏幕世界中。比如最广大的追捕、扔、移动等操作,都是小儿时期就习得到的基本本能,那么这些动作频仍会于我们本能的利用到长大后点到之屏幕操作着。

方演示是一律维的弹性运动,当然为堪又于x轴和y轴上拓展

及一样首被既关系了有些动效设计之尺码(传送门),以及简单的描摹到了动效设计怎么样的表述给用户更加舒畅。恩,今天而深深之话题,动效设计师如何以物理理论来给动画曲线更接近现实世界,如何让你的卡通片效果更是的而烟花般炫丽。

代码:

被我们开上物理世界~~

package {
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.ui.Mouse;
    import flash.ui.MouseCursor;

    public class Spring2 extends Sprite {
        private var ball:Ball;
        private var spring:Number=0.1;
        private var targetX:Number=stage.stageWidth/2;

        private var targetY:Number=stage.stageHeight/2;
        private var vx:Number=0;
        private var vy:Number=0;
        private var friction:Number=0.95;

        public function Spring2() {
            init();
        }
        private function init():void {
            ball = new Ball(5);
            ball.x = Math.random() * stage.stageWidth;
            ball.y = Math.random() * stage.stageHeight;         
            addChild(ball);
            addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
            stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler); 
            MouseDownHandler(null);
            Mouse.cursor = MouseCursor.BUTTON;
        }

        function MouseDownHandler(e:MouseEvent):void{
            graphics.clear();
            ball.x = Math.random() * stage.stageWidth;
            ball.y = Math.random() * stage.stageHeight;
            ball.vx = (Math.random()*2-1) * 50;
            ball.vy = (Math.random()*2-1) * 50;
            graphics.moveTo(ball.x,ball.y);         
        }

        private function EnterFrameHandler(event:Event):void {
            //去掉下面的注释,就变成鼠标跟随的弹性运动
            //targetX = mouseX;
            //targetY = mouseY;
            var dx:Number=targetX-ball.x;
            var dy:Number=targetY-ball.y;
            var ax:Number=dx*spring;
            var ay:Number=dy*spring;
            vx+=ax;
            vy+=ay;
            vx*=friction;
            vy*=friction;
            ball.x+=vx;
            ball.y+=vy;
            graphics.lineStyle(0.3,0xbbbbbb,1);
            graphics.lineTo(ball.x,ball.y);
        }
    }
}

Betway必威 1

属下去:用代码模仿一干净猴皮筋儿

Isaac Newton(小伙年轻时候还挺帅,可惜后来即。。)

package {
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.ui.Mouse;
    import flash.ui.MouseCursor;

    public class Spring3 extends Sprite {
        private var ball:Ball;
        private var spring:Number=0.1;
        private var vx:Number=0;
        private var vy:Number=0;
        private var friction:Number=0.95;


        public function Spring3() {
            init();
        }
        private function init():void {
            ball = new Ball(10);
            addChild(ball);
            addEventListener(Event.ENTER_FRAME, onEnterFrame);
            Mouse.cursor = MouseCursor.HAND;
        }
        private function onEnterFrame(event:Event):void {
            var dx:Number = mouseX-ball.x;
            var dy:Number = mouseY-ball.y;
            var ax:Number = dx*spring;
            var ay:Number = dy*spring;
            vx+=ax;
            vy+=ay;

            vx*=friction;
            vy*=friction;
            ball.x+=vx;
            ball.y+=vy;
            graphics.clear();
            graphics.lineStyle(1);          
            graphics.moveTo(mouseX, mouseY);
            graphics.lineTo(ball.x, ball.y);
        }
    }
}

**

上面的例子仅仅生一个球,如果设想重新多之小球,第一圆球盖鼠标所在位置为对象召开弹性运动,而第二个盖第一个球为目标召开弹性运动,第三球而随即第二只…
这会是啊意义也?

一.牛顿先是定律 又如惯性定律 由牛顿于1687年提出**

package {

    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.events.Event;

    public class ArrayChain extends Sprite {

        var arrBall:Array;      
        var spring:Number=0.12;
        var firstBall:Ball;
        var gravity:Number=6;
        var friction:Number=0.8;

        public function ArrayChain() {          
            init();
        }

        private function init():void {
            arrBall=new Array(5);
            for (var i:uint=0,j:uint=arrBall.length; i<j; i++) {
                arrBall[i]=new Ball(10,Math.random()*0xffffff);
                addChild(arrBall[i]);
            }
            firstBall=arrBall[0];
            firstBall.x=Math.random()*stage.stageWidth;
            firstBall.y=Math.random()*stage.stageHeight;    
            addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
        }

        private function EnterFrameHandler(e:Event):void {
            //第一个球以鼠标所在位置为目标做弹性运动
            firstBall.vx += (mouseX - firstBall.x) * spring;
            firstBall.vy += (mouseY - firstBall.y) * spring;
            firstBall.vy+=gravity;
            firstBall.vx*=friction;
            firstBall.vy*=friction;
            firstBall.x+=firstBall.vx;
            firstBall.y+=firstBall.vy;

            //准备画连线
            graphics.clear();
            graphics.lineStyle(0.2,0x666666);
            graphics.moveTo(mouseX,mouseY);
            graphics.lineTo(firstBall.x,firstBall.y);

            //后面的小球依次以前一个的位置为目标做弹性运动
            for (var i=1,j=arrBall.length; i<j; i++) {
                var ball:Ball=arrBall[i];
                ball.vx += (arrBall[i-1].x-ball.x)*spring;
                ball.vy += (arrBall[i-1].y-ball.y)*spring;
                ball.vy+=gravity;
                ball.vx*=friction;
                ball.vy*=friction;
                ball.x+=ball.vx;
                ball.y+=ball.vy;
                graphics.lineTo(ball.x,ball.y);//画出连线将各球连在一起
            }
        }
    }

}

任何物体都要维持匀速直线运动或者静止状态,直到外力迫使其改变运动状态了。

ok,我们得到了一个”弹簧链”,当然就其间还考虑了重力的素,通过地方的几乎单例子可以总结一下:第一只示范中一维弹性运动可以关押作为x方向的加速度依位移的震慑,而第二单示范可以看做是x,y二只趋势加速度按位移影响的叠加,而第三个示范,则可视作是另外方向这种影响更折加重力的概括功能。总之:任何方向的弹性运动,都足以当是欠方向的加速度(或力)随位移的熏陶,而且这种影响好于差不多只趋势上叠加。下面这个是多沾控制弹性运动的演示:

咦是维系匀速直线运动:

package {
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.ui.Mouse;
    import flash.ui.MouseCursor;

    public class MultiSpring extends Sprite {

        private var ball:Ball;
        private var handles:Array;
        private var spring:Number=0.3;
        private var friction:Number=0.8;
        private var numHandles:Number=5;

        public function MultiSpring() {
            init();
        }

        private function init():void {
            ball=new Ball(20);
            addChild(ball);
            handles = new Array();

            //创建控制(点)小球
            for (var i:uint = 0; i < numHandles; i++) {
                var handle:Ball=new Ball(10,0x0000ff);
                handle.x=Math.random()*stage.stageWidth;
                handle.y=Math.random()*stage.stageHeight;
                handle.addEventListener(MouseEvent.MOUSE_DOWN, MouseDownHandler);
                addChild(handle);
                handles.push(handle);
                handle.addEventListener(MouseEvent.MOUSE_OUT,MouseOutHandler);
                handle.addEventListener(MouseEvent.MOUSE_OVER,MouseOverHandler);
            }
            addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
            addEventListener(MouseEvent.MOUSE_UP, MouseUpHandler);      

        }



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

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

        private function EnterFrameHandler(event:Event):void {

            //将各控制点的位置做为目标位置,叠加弹性运动
            for (var i:uint = 0; i < numHandles; i++) {
                var handle:Ball=handles[i] as Ball;
                var dx:Number=handle.x-ball.x;
                var dy:Number=handle.y-ball.y;
                ball.vx+=dx*spring;
                ball.vy+=dy*spring;
            }

            ball.vx*=friction;
            ball.vy*=friction;
            ball.x+=ball.vx;
            ball.y+=ball.vy;
            graphics.clear();
            graphics.lineStyle(1);
            for (i = 0; i < numHandles; i++) {
                graphics.moveTo(ball.x, ball.y);
                graphics.lineTo(handles[i].x, handles[i].y);
            }
        }

        private function MouseDownHandler(e:MouseEvent):void {
            e.target.startDrag();
        }

        private function MouseUpHandler(event:MouseEvent):void {
            stopDrag();
        }
    }
}

Betway必威 2

足发到,它的移位如不怎么俗气,因为我们活的这个世界在引力、空气阻力、摩擦力等等。那就扣留一下极度广的外力因素——摩擦力,现实世界中的多数动还发她的人影。

 

1.摩擦力 F=μ×FN 

阻拦物体相对运动(或相对运动趋势)的力叫做摩擦力。

摩擦力是单宜动宜静的乖宝宝~它发生零星种植形态:

A
静摩擦力:
些微单互相接触的体,当其接触表面之间有相对滑动的势头,但尚保持相对平稳时,彼此作用正在阻碍相对滑动的障碍,这种阻碍称为静滑动摩擦力,简称静摩擦力。

Betway必威 3

摩擦力比较好之时光会发出,由于相对没动,所以保持与传递带一块运动。

 

B
动摩擦力:
有限触及物体之间是相对滑动时,其接触面上发生阻止对方滑动的阻碍称为动滑动摩擦力。

Betway必威 4

好观看由材料的异,或者又增长制动等要素,只要记住物体表面粗糙及压力愈来愈充分,摩擦力越充分,结合下面的牛顿第二定律
就算好效仿出片不同感觉的运动曲线了。

 

 

二.牛顿亚定律  F=ma 由牛顿以1687年提出

体加速度之轻重缓急及意向力成正比,跟物体的质成反比,且跟体质量的倒数成正比;加速度之倾向与作用力的倾向平。

粗略的说就算是——物体越轻或者受到的力越大加速度更是怪:

Betway必威 5

 

 

三.牛顿第三运动定律 F=-F’ 由牛顿于1687年提出 

相互作用的星星单物体中的作用力和反作用力总是大小等,方向相反,作用在同样条直线上。

周边的比如说弹撞击,拉、推重物等等。反正哪呀都生其,不要忘记她就是哼。

Betway必威 6

既然涉及牛三那么就是肯定要涉及一个她最好重大的衍生定律了:

 

1.动量守稳定律 m1v1+m2v2=m1v1′+m2v2′

一个系非给外力或所于外力的同为零星,那么这个体系的总动量保持不移。

动量守稳定律最初是牛顿第三定律的测算,
但后来察觉它的适用范围远远广于牛顿定律。简单的叙说就是是,两独速度不同的体碰撞下会时有发生速度直达的『传递』,打台球的同窗应该产生再度充分的感动。

Betway必威 7

 

 

四.阿基米德定律 F=γV

泡静止流体(气体或液体)中之体中一个浮力,其尺寸相等该物体所排开的流体重量,方向垂直向上并通过所败开流体的形心。

因此水中物体弹有速度及体的体积、质量成正比~而且会更加接近水面越快。看下曲线图:

Betway必威 8

 

好发现发起来的经过为外力的动向不断变化导致多少接近弹性曲线,继而联想到了胡克(弹性)定律:

**

五.胡克定律  F=-k·x 又称弹性定律 由胡克于1678年提出**

弹簧在发生弹性形变时,弹簧的弹力F和弹簧的伸长量(或压缩量)x成正比,即F=
k·x
。k是物质的弹性系数,它仅由材料的特性所控制,与任何因素无关。负号表示弹簧所起的弹力和那伸长(或减)的倾向相反。

那由胡可定律结合牛顿第二定律F=ma,我们就算足以汲取弹性曲线来,这里的关键因素就是体质量、弹性系数、伸长量来控制。

Betway必威 9

*『制作』:描述弹性曲线通常的老三只关键参数分别是:频率、过量、持续时间。

 

 

六.外部张力

液体表面任意二并行邻部分中垂直于其的单位长度分界线相互作用的张力。表面张力的变异以及处液体表面薄层内之成员的非常受力状态密切相关。

外表张力是动效设计受到与阿基米德定律一样好碰到的流体力学里的学识。算式比较复杂,不再追究。张力的以大常见,那么我们举行动效最常遇到的家常是融合作用:

Betway必威 10

 

总结

大体的使用多在我们活的社会风气被并没好好状态,所以了解原理的而,设计狮们请一定要快乐的观我们身边的世界Betway必威,真实世界才是极其好之读书案例。

末段之末段要文中对科学道理的论述有什么错误的地方,希望学霸同学等可指出~

 

附一:压箱底的缓动函数曲线 http://easings.net/zh-cn(如打不起来,请动正确上网法)

附二:描绘的历程中为视阿里U一些之稿子——动效设计之物理法则,重点的勾勒了牛顿第一次之定律,感兴趣的底同桌等可触过去贺读下~

2 赞 收藏
评论