当前位置：首页 → 问答吧 → 学着简化代码后，Tween效果出了个问题。

学着简化代码后，Tween效果出了个问题。

时间：2010-11-11

来源：互联网

舞台上有4个方形mc,每个mc里面有两帧，第1帧为黑色的初始大小，第2帧为红色的放大。我做的效果是，鼠标移到哪个mc 上面，就跳到第2帧状态，并加上一个缓动。鼠标移出时，返回第1帧初始状态。

按我原来的习惯，没优化的代码，很长。效果是达到了，没有问题，没优化的代码如下：

复制内容到剪贴板

代码:

img1_mc.stop();
img2_mc.stop();
img3_mc.stop();
img4_mc.stop();
import mx.transitions.Tween;
img1_mc.onRollOver=function(){
this.swapDepths(this.getNextHighestDepth());
this.gotoAndStop(2);
var myTween:Tween = new Tween(img1_mc, "_xscale", mx.transitions.easing.Elastic.easeOut,100, 150, 2, true);
var myTween:Tween = new Tween(img1_mc, "_yscale", mx.transitions.easing.Elastic.easeOut,100, 150, 2, true);
}
img1_mc.onRollOut=function(){
this.gotoAndStop(1);
var myTween:Tween = new Tween(img1_mc, "_xscale", mx.transitions.easing.Elastic.easeOut,150, 100, 2, true);
var myTween:Tween = new Tween(img1_mc, "_yscale", mx.transitions.easing.Elastic.easeOut,150, 100, 2, true);
}
img2_mc.onRollOver=function(){
this.swapDepths(this.getNextHighestDepth());
this.gotoAndStop(2);
var myTween:Tween = new Tween(img2_mc, "_xscale", mx.transitions.easing.Elastic.easeOut,100, 150, 2, true);
var myTween:Tween = new Tween(img2_mc, "_yscale", mx.transitions.easing.Elastic.easeOut,100, 150, 2, true);
}
img2_mc.onRollOut=function(){
this.gotoAndStop(1);
var myTween:Tween = new Tween(img2_mc, "_xscale", mx.transitions.easing.Elastic.easeOut,150, 100, 2, true);
var myTween:Tween = new Tween(img2_mc, "_yscale", mx.transitions.easing.Elastic.easeOut,150, 100, 2, true);
}
img3_mc.onRollOver=function(){
this.swapDepths(this.getNextHighestDepth());
this.gotoAndStop(2);
var myTween:Tween = new Tween(img3_mc, "_xscale", mx.transitions.easing.Elastic.easeOut,100, 150, 2, true);
var myTween:Tween = new Tween(img3_mc, "_yscale", mx.transitions.easing.Elastic.easeOut,100, 150, 2, true);
}
img3_mc.onRollOut=function(){
this.gotoAndStop(1);
var myTween:Tween = new Tween(img3_mc, "_xscale", mx.transitions.easing.Elastic.easeOut,150, 100, 2, true);
var myTween:Tween = new Tween(img3_mc, "_yscale", mx.transitions.easing.Elastic.easeOut,150, 100, 2, true);
}
img4_mc.onRollOver=function(){
this.swapDepths(this.getNextHighestDepth());
this.gotoAndStop(2);
var myTween:Tween = new Tween(img4_mc, "_xscale", mx.transitions.easing.Elastic.easeOut,100, 150, 2, true);
var myTween:Tween = new Tween(img4_mc, "_yscale", mx.transitions.easing.Elastic.easeOut,100, 150, 2, true);
}
img4_mc.onRollOut=function(){
this.gotoAndStop(1);
var myTween:Tween = new Tween(img4_mc, "_xscale", mx.transitions.easing.Elastic.easeOut,150, 100, 2, true);
var myTween:Tween = new Tween(img4_mc, "_yscale", mx.transitions.easing.Elastic.easeOut,150, 100, 2, true);
}

这样很繁琐，如是我优化代码，这样写，结果，鼠标分别移到4个mc上，都使第4个mc出现缓动效果，对应的3个没反应。也就是鼠标移到第一个，第二个，第三个，第四个mc上，效果都作用在第4个上。优化的代码如下：

复制内容到剪贴板

代码:

import mx.transitions.Tween;
var j = 5;
for (var i = 1; i<j; i++) {
    var _mc = this["img"+i+"_mc"];
    _mc.stop();
    trace(_mc);
    _mc.onRollOver = function() {
        this.swapDepths(this.getNextHighestDepth());
        this.gotoAndStop(2);
        var myTween:Tween = new Tween(_mc, "_xscale", mx.transitions.easing.Elastic.easeOut, 100, 150, 2, true);
        var myTween:Tween = new Tween(_mc, "_yscale", mx.transitions.easing.Elastic.easeOut, 100, 150, 2, true);
    };
    _mc.onRollOut = function() {
        this.gotoAndStop(1);
        var myTween:Tween = new Tween(_mc, "_xscale", mx.transitions.easing.Elastic.easeOut, 150, 100, 2, true);
        var myTween:Tween = new Tween(_mc, "_yscale", mx.transitions.easing.Elastic.easeOut, 150, 100, 2, true);
    };
}

应该没错呀，怎么回事呢。