Прокрутка списка искр по положению мыши - PullRequest
Новая
       35

Прокрутка списка искр по положению мыши

0 голосов
/ 13 марта 2011 
<s:List xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"

        mouseOver="scroller_mouseOver(event)" 
        height="308" width="110">

Как видно выше, у меня есть Spark List с событием MouseOver: 

protected function scroller_mouseOver(e:MouseEvent):void { 
   CursorManager.removeAllCursors();      // Remove all previous Cursors
   if (mouseX > 24 && mouseX < 143) {
     if (mouseY > 220) {
          CursorManager.setCursor(downCursorSymbol);    // Down Cursor
     } else if (mouseY < 87) {
          CursorManager.setCursor(upCursorSymbol);     // Up Cursor
     }
     // Scroll as its Mouse Overed
     this.addEventListener(Event.ENTER_FRAME, scrollViaY);
     }
}

private function scrollViaY(e:Event):void {
   if (mouseX > 24 && mouseX < 143) {
     if (mouseY > 220) {
     this.layout.verticalScrollPosition += (mouseY - 220)*0.5; 
     }
     else if (mouseY < 87) {
     this.layout.verticalScrollPosition += (mouseY -86)*0.5; 
     }
   }
}

На следующем рисунке описана область, которую я хотел бы отслеживать зависанием.List Upper & Lower hover tracking to scroll

Проблема: При наведении курсора на верхнюю (красную) часть списка (хотелось бы, чтобы список прокручивался вниз, чем выше позиция мыши, тем быстрееэто надо прокрутить).Точно так же, если мышь находится над нижней (красной) частью, список прокручивается вверх, и чем ниже мышь находится, тем быстрее будет прокручиваться список.Текущий код работает - хотя, трассировки показывают, что: this.layout.verticalScrollPosition + = (mouseY - 220) * 0.5;или this.layout.verticalScrollPosition + = (mouseY -86) * 0.5;... дают эффекты прыжка, есть ли способ сделать эти значения более линейными или более плавными?

Я создал AnimateProperty, но он работает хорошо только в том случае, если я хочу прокрутить до selectedIndex. В этом случае я бы хотел, чтобы скроллер продолжал линейно прокручиваться, когда мышь наведена на определенную красную область,и увеличение скорости при прокрутке до любой из конечностей.

Цель: Пока мышь находится над нижней (красной частью) списка, verticalScrollPosition прокручивается быстрее, чем дальше.центр списка тикетов ... но эффект прыжка продолжается, полагаю, из-за EnterFrame.то же самое с верхней частью ... чем выше курсор, тем быстрее должен прокручиваться список.

Мне кажется, что это общая проблема для разработчиков Flash CSx.

1 Ответ

1 голос
/ 01 ноября 2011

Я реализовал нечто подобное, за исключением того, что это был горизонтальный список прокрутки, а также я использовал кнопки прокрутки влево / вправо по бокам списка, эффект mouse_over вызывается кнопками, а не списком (но это не должноне будет препятствием при адаптации кода).

Чтобы сделать фактическую прокрутку, я использовал эффект анимации, который был нацелен на макет списка, а точнее на макет horizontalScrollPosition.Вот как выглядит код MXML: 

<s:Animate id="scrollAnimation" target="{listLayout}">
    <s:easer>
        <s:Linear easeInFraction="0" easeOutFraction="0" />
    </s:easer>

    <s:SimpleMotionPath id="scrollMotionPath" property="horizontalScrollPosition" />
</s:Animate>

Это необходимо easer, потому что анимационный эффект обычно имеет 3 этапа движения (ускорение, равномерное движение и замедление), поэтому по умолчанию вы получаете волнистую прокруткудвижение.Я использовал RobotLeft для этого проекта, поэтому представление передается следующим образом:

Когда зарегистрирован посредник, добавьте слушателей кнопки прокрутки: 

viewComponent.scrollLeft.addEventListener(MouseEvent.MOUSE_OVER, onScrollLeft);
viewComponent.scrollRight.addEventListener(MouseEvent.MOUSE_OVER, onScrollRight);
viewComponent.scrollLeft.addEventListener(MouseEvent.MOUSE_OUT, onScrollOut);
viewComponent.scrollRight.addEventListener(MouseEvent.MOUSE_OUT, onScrollOut);

Нам также нужно добавить слушателя, чтобымы можем сказать, когда эффект прокрутки закончился, потому что нам, возможно, потребуется воспроизвести его: 

viewComponent.scrollEffect.addEventListener(EffectEvent.EFFECT_END, onScrollEnd);

Теперь мы можем реализовать метод прокрутки.Поскольку представление опосредовано, у нас есть доступ к эффекту прокрутки, мы можем сослаться на него здесь (а также на путь).Вот как выглядит метод: 

private function scrollOnlineFriendsList(scrollBy:int):void
{
    // Set the scrollBy value and play the scrolling effect
    viewComponent.scrollMotionPath.valueBy = scrollBy;
    viewComponent.scrollEffect.play();

    // Store the scrollBy value in case the effect will need to be replayed,
    // if the mouse over event is still over the scrolling button/area
    this.scrollBy = scrollBy;

    canKeepScrolling = true;
}

Наконец, обработчики: 

private function onScrollLeft(event:MouseEvent):void
{
    scrollOnlineFriendsList(-33);
}

private function onScrollRight(event:MouseEvent):void
{
    scrollOnlineFriendsList(33);
}

private function onScrollOut(event:MouseEvent):void
{
    canKeepScrolling = false;

    // If you would like the effect to continue playing
    // until it finishes the current scrolling operation,
    // once the mouse is no longer over a scroll button,
    // just comment this line
    viewComponent.scrollEffect.stop();
}

private function onScrollEnd(event:EffectEvent):void
{
    // When the scroll effect has finished playing,
    // if the mouse is still over the scroll button/area,
    // replay the effect
    if (canKeepScrolling)
        scrollOnlineFriendsList(scrollBy);
}
...