• Flash/Flex学习笔记(38):缓动动画


    缓动 与 匀变速 看上去很类似,但其实有区别:

    匀变速的公式为 V = V0 + at --速度v与时间t是线性(正比)关系,而且这种运动不需要确定目标点,速度可以按照这种规律一直变下去

    而缓动指的是物体越接近目标时速度越慢,速度跟距离成反比关系,用公式描述为 V = k S  (0<k<1),这种运动需要先确定一个目标点,比如车辆定点停车:先指定一个位置,然后汽车从远处开过来,快到停车点时,逐渐慢下来,直到准确停在指定位置。

    先看个演示:

    代码:

    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 Easing1 extends Sprite {

    09
    private var ball:Ball;

    10
    private var easing:Number=0.15;

    11
    private var targetX:Number=stage.stageWidth/2;

    12
    private var targetY:Number=stage.stageHeight/2;

    13

    14
    public function Easing1() {

    15
    trace(targetX,targetY);

    16
    init();

    17
    }

    18

    19
    private function init():void {

    20
    ball=new Ball(10)  ;

    21
    ball.x = Math.random() * stage.stageWidth;

    22
    ball.y = Math.random() * stage.stageHeight;

    23
    addChild(ball);

    24
    addEventListener(Event.ENTER_FRAME,EnterFrameHandler);      

    25

    26
    ball.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);      

    27
    stage.addEventListener(MouseEvent.MOUSE_UP,MouseUpHandler);

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

    29

    30
    //在中心画个十字架

    31
    graphics.lineStyle(1);

    32
    graphics.moveTo(targetX-15,targetY);

    33
    graphics.lineTo(targetX+15,targetY);

    34
    graphics.moveTo(targetX,targetY -15);

    35
    graphics.lineTo(targetX,targetY +15);

    36

    37
    }

    38

    39

    40
    private function EnterFrameHandler(e:Event):void {

    41
    var vx:Number = (targetX - ball.x) * easing; //x轴速度与距离成正比缩小

    42
    var vy:Number = (targetY - ball.y) * easing; //y轴速度与距离成正比缩小     

    43
    ball.x += vx;

    44
    ball.y += vy;

    45

    46
    var dx = ball.x - targetX;

    47
    var dy = ball.y - targetY;

    48
    var dist = Math.sqrt(dx*dx + dy*dy);

    49
    //当物体达到目标点时,停止处理,以节省CPU资源           

    50
    if (dist<=1){

    51
    removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);

    52
    }

    53

    54
    }

    55

    56
    //开始拖动

    57
    private function MouseDownHandler(e:MouseEvent):void{           

    58
    ball.startDrag();

    59
    removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);

    60

    61
    }

    62

    63
    //停止拖动

    64
    private function MouseUpHandler(e:MouseEvent):void{

    65
    ball.stopDrag();

    66
    addEventListener(Event.ENTER_FRAME,EnterFrameHandler);

    67
    Mouse.cursor = MouseCursor.AUTO;

    68
    }

    69
    }

    70
    }

    特别要注意的问题:

    先来了解一下著名的"Xeno悖论",假如一个物体要从A点移动到B点,可以这样处理:每次将物体移动一半的距离,然后再以物体所在新位置为A点,继续前面的处理... 这样物体会不断向B点靠近,直到移动到B点;但从另一角度考虑,因为每次只移动一半的距离,所以永远也不可能真正达到B点。

    如果我们把上面代码中的比例因子private var easing:Number=0.15;改成0.5,就形成了该悖论。同时再考虑另一个因素,Flash每次能将物体移动的最小距离为0.05象素(即1/20象素),比这个值再小的距离,Flash将不会处理。

    这样的话,假设物体要移动到 100的x坐标位置,当前已经到了99.95,根据比例因子0.5的设置,下一次应该移动 (100 - 99.95)/2 = 0.025,这个值已经超出了Flash的处理能力,系统会把0.025当成0来处理,即不移动。

    所以再回头看上面的代码,我们在判断物体是否到达目标点时,不能用 ball.x == targetX 来精确判断,因为这样的条件也许永远不会成立,从而导致后面的removeEventListener也永远不会被执行到,合理的做法是达到一定的精度值时,就可以认为已经移动完成,从而做出相应的处理.

    缓动鼠标跟随

    相信大多数人都玩过“星际”,我最喜欢神族的航母舰队:浩浩荡荡很是壮观。这里面有一个细节,我们可以在一队航母中,指定一个为领队,其它随便挑一个跟着它,然后后面的再跟着第二个,第三个跟着第二个...,这样出发时,其实就很接近下面要演示的缓动鼠标跟随

    代码:

    show sourceview source

    print?

    01
    package {

    02

    03
    import flash.display.Sprite;

    04
    import flash.events.MouseEvent;

    05
    import flash.events.Event;

    06

    07

    08
    public class Easing3 extends Sprite {

    09

    10
    var arrBall:Array ;

    11
    var targetX:Number ;

    12
    var targetY:Number;

    13
    var easing:Number = 0.3;

    14
    var firstBall:Ball;

    15

    16
    public function Easing3():void{                 

    17
    init();

    18
    }

    19

    20
    private function init():void{

    21
    arrBall = new Array(30);

    22
    for(var i:uint=0,j:uint=arrBall.length;i<j;i++){

    23
    arrBall[i] = new Ball(10,Math.random() * 0xffffff);             

    24
    addChild(arrBall[i]);

    25
    }           

    26

    27
    firstBall = arrBall[0];

    28
    firstBall.x = Math.random() * stage.stageWidth;

    29
    firstBall.y = Math.random() * stage.stageHeight;

    30

    31
    targetX = stage.stageWidth/2;

    32
    targetY = stage.stageHeight/2;

    33

    34
    stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);

    35
    addEventListener(Event.ENTER_FRAME,EnterFrameHandler);          

    36
    }

    37

    38
    private function MouseDownHandler(e:MouseEvent):void{

    39
    targetX = mouseX;

    40
    targetY = mouseY;

    41
    addEventListener(Event.ENTER_FRAME,EnterFrameHandler);  

    42
    }

    43

    44
    private function EnterFrameHandler(e:Event):void{           

    45
    firstBall.vx = (targetX - firstBall.x) * easing;

    46
    firstBall.vy = (targetY - firstBall.y) * easing;

    47
    firstBall.x += firstBall.vx;

    48
    firstBall.y += firstBall.vy;

    49

    50
    for(var i=1,j=arrBall.length;i<j;i++){

    51
    var ball:Ball = arrBall[i];

    52
    ball.vx = (arrBall[i-1].x-ball.x)*easing;

    53
    ball.vy = (arrBall[i-1].y-ball.y)*easing;

    54
    ball.x += ball.vx;

    55
    ball.y += ball.vy;

    56
    }

    57

    58
    var lastBall:Ball = arrBall[arrBall.length-1];

    59
    var dx = lastBall.x - targetX;

    60
    var dy = lastBall.y - targetY;

    61
    var dist = Math.sqrt(dx*dx + dy*dy);

    62

    63
    trace(dist);

    64
    if (dist<=10){

    65
    removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);

    66
    }           

    67
    }

    68
    }

    69
    }

    如果把这个例子稍加改造,可能效果更cool:

    最后:本文所提到的缓动均指越来越慢,实际上Flash/Silverlight的IDE界面提供的缓动类型更多(比如先慢慢启动,再慢慢停止--即淡入淡出之类),对应的公式也有不少,www.robertpenner.com 大家可以到这上面找找,一定会发现不好好东西

  • 相关阅读:
    JAVA错误:Unable to find config file. Creating new servlet engine config file: /WEBINF/serverconfig.wsdd
    java axis发布web service(二) 发布web service
    JAVA错误:AXIS Web Service Problem: No compiler found in your classpath! (you may need to add ‘tools.jar’)
    JAVA错误:java.lang.UnsupportedClassVersionError: Bad version number in .class file
    JavaScript中的div和filter错误
    拉格朗日乘数法
    Timeout Detection & Recovery (TDR)
    游戏程序员关心的Autodesk Maya 2013相关操作
    Eclipse开发Android程序如何在手机上运行
    我的第一篇随笔
  • 原文地址:https://www.cnblogs.com/happysky97/p/1884572.html
Copyright © 2020-2023  润新知