当鼠标在 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
并在每次调用时清除间隔。
虽然可能有多种方法可以解决这个问题,但最简单的方法是使用单独的方法来处理鼠标移开和鼠标悬停,尽管这可能会导致一些代码重复。或者,您可以等待第一个动画完成,然后调用另一个动画。
您还可以查看可用于实现您想要的效果的各种补间库,但我不会在此处做广告。
希望对您有所帮助。
问题:
当我将鼠标光标移出剪辑 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
并在每次调用时清除间隔。
虽然可能有多种方法可以解决这个问题,但最简单的方法是使用单独的方法来处理鼠标移开和鼠标悬停,尽管这可能会导致一些代码重复。或者,您可以等待第一个动画完成,然后调用另一个动画。
您还可以查看可用于实现您想要的效果的各种补间库,但我不会在此处做广告。
希望对您有所帮助。