当鼠标在 Clip1 外但鼠标在 Clip 2 内时动画代码未触发

Animation code not fired when mouse is out Clip1 but mouse is inside clip 2

问题:

当我将鼠标光标移出剪辑 1 但位于剪辑 2 上方时,剪辑 1 的 MOUSE_OUT 不起作用。

期望:

假定鼠标在剪辑 2 内,鼠标的位置已经在剪辑 1 之外,因此剪辑 1 的 function mouse_out() 应该触发其中的代码。

完整代码:

我附上到目前为止的完整代码。

import flash.display.MovieClip;

cat1.addEventListener(MouseEvent.MOUSE_OVER,mouse_over);
cat1.addEventListener(MouseEvent.MOUSE_OUT,mouse_out);
cat2.addEventListener(MouseEvent.MOUSE_OVER,mouse_over);
cat2.addEventListener(MouseEvent.MOUSE_OUT,mouse_out);
cat3.addEventListener(MouseEvent.MOUSE_OVER,mouse_over);
cat3.addEventListener(MouseEvent.MOUSE_OUT,mouse_out);
cat4.addEventListener(MouseEvent.MOUSE_OVER,mouse_over);
cat4.addEventListener(MouseEvent.MOUSE_OUT,mouse_out);
cat5.addEventListener(MouseEvent.MOUSE_OVER,mouse_over);
cat5.addEventListener(MouseEvent.MOUSE_OUT,mouse_out);

function mouse_over(e:MouseEvent)
{
    squareEaseOut(e.currentTarget,["scaleX",1.5,"scaleY",1.5]);
}

function mouse_out(e:MouseEvent)
{
    squareEaseOut(e.currentTarget,["scaleX",1,"scaleY",1]);
}

var iSquareEasingInterval:int;

//simple square easing, this can capture several properties to be animated
function squareEaseOut(mc:Object,vars:Array)
{
    var checker:int = 0;
    clearInterval(iSquareEasingInterval);

    var ini:Array = new Array();
    var accelNum:Number = 0;
    var jerkNum:Number = 0;
    var varsLength:uint = vars.length / 2;

    for (var i:uint = 0; i<varsLength; i++)
    {
        ini[i] = mc[vars[2 * i]];
    }

    function animateEasing()
    {
        checker++;
        if (compare(mc[vars[0]]+(0.25 * (vars[1] - ini[0])) / ((1 + accelNum) * (1 + accelNum)),vars[1]))
        {
            var end = new Date();
            trace("Time lapse: "+(end - startD));

            clearInterval(iSquareEasingInterval);
            accelNum = 0;
            jerkNum = 0;
            for (var j:uint = 0; j<varsLength; j++)
            {
                mc[vars[2 * j]] = vars[(2 * j) + 1];
            }
            return;
        }
        for (var k:uint = 0; k<varsLength; k++)
        {
            mc[vars[2*k]] +=  (0.26 * (vars[(2*k)+1] - ini[k])) / ((1 + accelNum) * (1 + accelNum));
        }
        accelNum += 0.150+(jerkNum*jerkNum*jerkNum);
        jerkNum +=  0.09;
    }
    function compare(a:Number,b:Number)
    {
        if (vars[1]>ini[0])
        {
            return a>b;
        }
        else if (vars[1]<ini[0])
        {
            return a<b;
        }
    }
    var startD = new Date();
    iSquareEasingInterval = setInterval(animateEasing,20);
};

问题是当发生任何鼠标悬停或鼠标移出事件时,您正在调用相同的方法 squareEaseOut。由于您立即将鼠标从一个影片剪辑移出并移到另一个影片剪辑,因此会调用两次相同的方法,第一次是鼠标移出(对于旧影片剪辑),然后是鼠标悬停在新影片剪辑上。这不会导致正确的行为,因为第二次调用将覆盖第一次调用,因为您正在使用 setInterval 并在每次调用时清除间隔。

虽然可能有多种方法可以解决这个问题,但最简单的方法是使用单独的方法来处理鼠标移开和鼠标悬停,尽管这可能会导致一些代码重复。或者,您可以等待第一个动画完成,然后调用另一个动画。

您还可以查看可用于实现您想要的效果的各种补间库,但我不会在此处做广告。

希望对您有所帮助。