Question

我正在制作一个图片库，我希望屏幕底部有一堆缩略图，当鼠标移动时，这些缩略图可以从一侧滑动到另一侧。

我正在使用容器的自定义类（Tiles）和缩略图的自定义类（ImageIcon）。

我有一个ComboBox，允许用户选择一个图库。当用户选择库时，将运行以下代码并重新加载缩略图。这里的问题是图标显示在彼此的顶部而不是并排，也切换类别应该删除旧的（请参阅第一个for循环），但事实并非如此。此外，图标没有正确动画。动画代码也在下面。现在，只有一个图标会移动。图标应该从一侧到另一侧按顺序移动，当最后几个图标到达屏幕边缘时停止，这样它们就不会在某处偏离侧面“丢失”。

图库加载程序代码：

public function loadCategory(xml:XML = null) {
    if (xml != null) {
        dp = new DataProvider(xml);
        for (var k:int = 0; k < this.numChildren; k++) {
            this.removeChild(this.getChildAt(k));
        }

        var black:DropShadowFilter = new DropShadowFilter(0, 45, 0x000000, 1, 3, 3, 1, 1);
        var white:DropShadowFilter = new DropShadowFilter(0, 45, 0xFFFFFF, 1, 2, 2, 1, 1);

        for (var i:int = 0; i < dp.length; i++) {
            var imgicon:ImageIcon = new ImageIcon();
            imgicon.addEventListener(MouseEvent.CLICK, showImage);
            imgicon.width = 100;
            imgicon.x = (i * (imgicon.width + 20));
            imgicon.path = dp.getItemAt(i).data;
            imgicon.loadIcon();
            imgicon.filters = [black, white];

            stage.addEventListener(Event.ENTER_FRAME, moveIcon);
            this.addChild(imgicon);
        }
    } else {
        //Failed to load XML
    }
}

图标动画代码：

public function moveIcon(e:Event){
    var speed = 0;
    speed = Math.floor(Math.abs(this.mouseX/20));

    var image = this.getChildAt(k);

    var imagebox = image.width + 20;

    var edge:Number = (800/2);

    if (this.mouseX > 0) {
        for (var k:int = 0; k < this.numChildren; k++) {
            if (image.x - (imagebox/2) + speed < -edge + (k * imagebox)) {
                speed = 0;
            }

            image.rotationY = Math.floor(image.x/20);
            image.x -= Math.floor(speed);
        }
    } else {
        for (var j = this.numChildren; j >= 0; j--) {
            if (image.x + speed > edge - ((imagebox * j) )) {
                speed = 0;
            }

            image.rotationY = Math.floor(image.x/20);
            image.x += Math.floor(speed);
        }
    }
}

Answer 1

在我看来，你有三个问题（你应该把这些问题放在问题的最后而不是“我的代码出了什么问题？”）。编程的主要原则之一是将问题分解为更小的部分。

如何将ImageIcon排在一起？
切换类别时，如何删除旧ImageIcon？
如何基于鼠标位置一起为所有ImageIcon设置动画，并在两边都有约束？

问题1

我看不出有什么不对，但只需检查一下，当您设置imgicon.x时，imgicon.width实际上已设置。

问题2

我不是依赖numChildren和getChildAt()，而是创建一个currentIcons数组成员变量，当你创建一个新的ImageIcon时，只需将它推到数组上即可。然后，当你想要删除它们时，你可以像这样循环遍历数组：

for each (var cIcon:ImageIcon in currentIcons) 
{
    cIcon.removeEventListener(MouseEvent.CLICK, showImage);
    removeChild(cIcon);
}
currentIcons = [];

正如您所看到的，我还删除了我添加的所有侦听器。这是最佳做法。然后在删除所有图标后清除阵列。

问题3

我可以看到您的代码有些问题。首先，在设置image的行中，k尚未设置！

在这里你也可以使用currentIcons数组，但是你可能不能使用for each in循环，因为这会给你带来乱序的项目。只需一个普通的for循环就可以了。

我没有为moveIcon方法测试此代码，但这个想法应该可行。你可能不得不调整它：

public function moveIcon(e:Event):void 
{
    var speed:Number = Math.floor(this.mouseX / 20); // Removed "abs".
    var imageBox:Number = currentIcons[0].width;
    var edge:Number = 800 / 2;

    for (var i:int = 0; i < currentIcons.length; i++) 
    {
        var image:ImageIcon = currentIcons[i] as ImageIcon;
        image.x += speed;
        image.rotationY = Math.floor(image.x / 20);

        var min:int = -edge + (i * imagebox);
        if (image.x < min) image.x = min;

        var max:int = edge - (imagebox * i);
        if (image.x > max) image.x = max;
    }
}

编辑*对不起，它应该比上一个if语句更大，但我的意外不到。

在FrameEnter上跨舞台移动动画片段

1 个答案:

问题1

问题2

问题3