Question

如果这有点让人难以理解，我会提前道歉，但我会尽我所能来解释它。

基本上我已经创建了一个滚动页面，允许您将内容延伸到舞台之外并向上或向下滑动以查看它。

在这种情况下，舞台掩盖舞台大小的动画片段（高于舞台）和向上/向下滑动会影响对象的位置，从而显示更多内容。

我坚持的部分是获得＆＃34;滚动条＆＃34;侧面的对象，以匹配溢出对象的顶部和底部的位置;

由于滚动条必须停留在舞台上，当到达对象的底部时，滚动条最终会离开舞台，因为它们以相同的速度移动，所以在这种情况下，滚动条需要移动当另一个对象出现在底部时，速度会变慢。

现在它编码的方式我似乎只能匹配顶部和

scrollbar.y = (e.target.y - barY);

相反的是

scrollbar.y = (e.target.y + barY);

但我似乎无法同时实现这两个目标。

我在AS3（Flash CC）中对此进行编码，移动设备是我想要发布的平台，我将附上我的代码以及下面的一些屏幕截图。

var ease:int = 6;
var targY:int = dragMe.y;
var barY:int = scrollbar.y;

var drag:Boolean = false;
var pos:Number = 0;

var minY:Number = 0 + dragMe.height / 2; // how low the top can go
var maxY:Number = stage.stageHeight - dragMe.height / 2; // how high the bottom can go

var barMax:Number = 0 + scrollbar.height; // how high the bar can go
var barMin:Number = stage.stageHeight - scrollbar.height; // how low the bar can go

dragMe.mask = mcMask;
mcMask.visible = false;

dragMe.addEventListener(Event.ENTER_FRAME, dragging);
dragMe.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp);

function dragging(e:Event):void {
    if (drag) {
        targY = mouseY + pos;
    }
    // restrict scrolling to stage
    targY = Math.min(targY, minY); // how low the top can go
    targY = Math.max(targY, maxY); // how high the bottom can go

    barY = Math.min(barY, barMin); // how low the bar can go
    barY = Math.max(barY, barMax); // how high the bar can go

    // Movement of the text
    e.target.y += (targY - e.currentTarget.y) / ease;
    // Movement of the bar
    scrollbar.y = (e.target.y - barY);

}

function mouseUp(e:MouseEvent):void {
    drag = false;
}

function mouseDown(e:MouseEvent):void {
    pos = e.currentTarget.y - mouseY;
    drag = true;
}

任何帮助都会非常赞赏！

格雷=舞台黑色=外部舞台

○： http://i.stack.imgur.com/qvAoz.png

为： http://i.stack.imgur.com/FvHIm.png

Answer 1

我坚持的部分是让侧面的“滚动条”对象与溢出对象的顶部和底部的位置相匹配;

嗯，没有必要让滚动条对象与溢出对象的位置匹配，你应该将它绑定到masker对象的坐标。顺便说一下，我通常会在IDE中收集所有UI元素，然后解析它们。例如，如果我需要添加滚动条，我只需要三个元素：

容器 - 所有内容都将被添加到其中;
掩蔽
滚动条动画片段，由两个MC组成：bg和一个栏。

在这种情况下，我不需要将这些元素放在代码中，而只需调用函数来处理这些元素。代码本身很简单。您知道掩蔽器的高度，容器的高度和位置，以及滚动条背景的高度和条的当前位置。您所需要的只是处理事件并做出相应的反应。

E.g。如果您使用滚动条滚动，只需转换条形图的当前坐标并更新容器的位置。如果您要拖动内容，请相应更新条形图的位置。

此外，还有一种更好的方法来拖动栏：

private static function drag(e:MouseEvent):void 
{
    var myBounds:Rectangle = new Rectangle(bar.x, 0, 0, barBg.height-bar.height+8);
    bar.startDrag(false, myBounds);
    bar.addEventListener(Event.ENTER_FRAME, update);
}

static private function stopdrag(e:*):void 
    {
        bar.stopDrag();
        update(null);
        bar.removeEventListener(Event.ENTER_FRAME, update);

    }

    static private function update(e:Event):void 
    {
        var scroll_run_length:Number = barBg.height - bar.height + 8;
        var modificator:Number = (content.height-masker.height) / scroll_run_length;
        content.y = startContY -(bar.y * modificator);

    }

匹配滚动条滚动到内容滚动 - AS3

1 个答案: