Question

我走了：

我正在使用AS3-AIR进行此移动应用。

一副扑克牌显示在屏幕中央，使用手指，您可以使用滑动操作轻弹顶部卡片以显示下一张卡片。

这是一个鸟瞰图，因此只显示一张牌，用户将认为牌组的其余部分位于顶牌之下。

卡面朝下，因此每次用户从屏幕上刷卡时，相同的背面图像会反复显示在中央。

当用户双击卡片的背面时，它会翻转并显示卡片的正面。

这是我的代码（我的问题紧随其后）：

//Adding three same backs of cards to the stage:
addChild(backBlue3); //No event listener will be attached to this card
addChild(backBlue2);
addChild(backBlue1);
//backBlue1 and backBlue2 will alternate their Indexes/depths to create the illusion of an infinite deck of cards. So, when backBlue1 is thrown out of the screen, backBlue2 immediately fills the center of screen.

Multitouch.inputMode = MultitouchInputMode.GESTURE;
backBlue1.addEventListener(TransformGestureEvent.GESTURE_SWIPE, backCard_handler_swipe);
backBlue2.addEventListener(TransformGestureEvent.GESTURE_SWIPE, backCard_handler_swipe);

backBlue1.addEventListener(MouseEvent.DOUBLE_CLICK, cardFlipper);
backBlue2.addEventListener(MouseEvent.DOUBLE_CLICK, cardFlipper);

public function backCard_handler_swipe(e:TransformGestureEvent):void
    {
        //*********************************** Setting the random positions for swiped off cards *********************************** 
        //Swipe is done towards the left
        if (e.offsetX == -1) 
        {
            randomX = Math.floor(Math.random() * (randomMaxX - randomMinX + 1)) + randomMinX;
        } 
        //Swipe is done towards the right
        if (e.offsetX == 1) 
        {
            randomX = Math.floor(Math.random() * (randomMaxX2 - randomMinX2 + 1)) + randomMinX2;
        } 
        randomY = Math.floor(Math.random() * (randomMaxY - randomMinRotation + 1)) + randomMinY;
        randomRotation = Math.floor(Math.random() * (randomMaxRotation - randomMinRotation + 1)) + randomMinRotation;


        //*********************************** Creating a GreenSock TimeLineMax timeline to tween the "ejected" card *********************************** 
        var tl15 = new TimelineMax();
        tl15.addLabel("cardOnScreen"); //At this point of the Timeline (the very beginning), a "Swiping sound" will be played.

        if (e.target == backBlue1)
        {           
            //backBlue1 is tweened off the screen
            tl15.to(e.target, 1, {y:randomY, x:randomX, rotation:randomRotation, ease:Circ.easeOut});

            //backBlue2 is instantly placed in the center of the screen, behind backBlue1
            tl15.to(backBlue2, 0, {y:initialY2, x:initialX2, rotation:0, ease:Linear.easeNone}, "-=1");
            tl15.addLabel("cardOffScreen", "-=0.5"); //The exact middle of the backBlue1 tween animation
            tl15.addCallback(playSlide, "cardOnScreen"); //Playing the "Swiping Sound". 
            tl15.addCallback(swapingBacks, "cardOffScreen"); //swapingBacks function is called to place backBlue2 on top of backBlue1
        }   

        if (e.target == backBlue2)
        {
            tl15.to(e.target, 1, {y:randomY, x:randomX, rotation:randomRotation, ease:Circ.easeOut});
            tl15.to(backBlue1, 0, {y:initialY2, x:initialX2, rotation:0, ease:Linear.easeNone}, "-=1");
            tl15.addLabel("cardOffScreen", "-=0.5");
            tl15.addCallback(playSlide, "cardOnScreen");
            tl15.addCallback(swapingBacks, "cardOffScreen");
        }               
    }


public function swapingBacks()
    {
        swapChildren(backBlue1, backBlue2);
    }

public function cardFlipper(e:MouseEvent)
    {
        //Flipping of the card is working fine
    }

以下是我的两个主要问题：

-1- 滑动手势响应不是很快：四分之一或五次滑动，没有任何反应。我必须两次或有时甚至更多的滑动动作才能最终轻弹卡片。

如果与手势监听器发生冲突，我删除了双击监听器，问题仍然存在。

是不是高性能的标准AS3手势监听器吗？

理想情况下，滑动手势应与TINDER应用程序一样：非常具有反应性（并采用拖动动作）。

是否有标准GESTURE_SWIPE解决方案的替代方案？

对我上面代码的任何建议？

-2- 如果用户滑动非常快，则第二张卡（在第一张卡下方）被刷掉，而不是第一张。我怎么能避免这种情况？

非常感谢您的想法，感谢您的阅读！

BR

2月10日更新

所以我按照Mark Knol的建议（见下面的答案）并使用了MOUSE_DOWN＆amp; MOUSE_UP事件处理程序而不是SWIPE GESTURE处理程序。

结果更好，但并不完美。

结果更好，因为鼠标停机时发生的拖动解决了第二张卡飞出屏幕的问题。

结果并不完美，因为MOUSE_DOWN / MOUSE_UP事件与DOUBLE_CLICK事件之间存在冲突：当我双击一张卡时，两个水龙头都被检测为卡的两个微拖，但也作为双击操作!!

所以我做了以下事情：

为了清晰而大幅地将卡片拖向屏幕边缘，当释放鼠标/手指时，卡片会从屏幕上移除。
对于卡片的小阻力，卡片会被回复到其原始位置。这样，在双击卡的情况下，翻转将从卡的原始位置发生。

我仍然遇到以下问题：

为什么在ANDROID AIR编译的应用程序中，检测到双击，但是在Windows Flash播放器上没有检测到双击？

有没有办法解决“双击”和“双击”之间的冲突“点击”活动？（可能是通过延迟拖动动作直到系统确定不是双击发生？）

backBlue1.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
backBlue2.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
backBlue1.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
backBlue2.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

backBlue1.addEventListener(MouseEvent.DOUBLE_CLICK, cardFlipper);
backBlue2.addEventListener(MouseEvent.DOUBLE_CLICK, cardFlipper);   

function mouseDownHandler(e:MouseEvent):void
{
    e.target.startDrag();
}

function mouseUpHandler(e:MouseEvent):void
{
     e.target.stopDrag();
     ecartX = initialX2 - e.target.x; //ecartX is the distance of the final card position with the original one.

if (Math.abs(ecartX) < limitX) //For a very small drag, the card is tweened back to its initial place
{
    var tl25 = new TimelineMax();
    tl25.to(e.target, 0.5, {y:initialY2, x:initialX2, rotation:0, ease:Linear.easeNone}, "-=0");
}

if (Math.abs(ecartX) > limitX) //For a clear long drag, the card is tweened off the screen
{
    //Swipe to the left
    if (ecartX > 0) 
        {
            randomX = Math.floor(Math.random() * (randomMaxX - randomMinX + 1)) + randomMinX;
        } 

    //Swipe to the right
    if (ecartX < 0) 
        {
            randomX = Math.floor(Math.random() * (randomMaxX2 - randomMinX2 + 1)) + randomMinX2;
        } 

    randomY = Math.floor(Math.random() * (randomMaxY - randomMinRotation + 1)) + randomMinY;
    randomRotation = Math.floor(Math.random() * (randomMaxRotation - randomMinRotation + 1)) + randomMinRotation;

    var tl15 = new TimelineMax();
    tl15.addLabel("cardOnScreen");


    if (e.target == backBlue1)
        {
            tl15.to(e.target, 1, {y:randomY, x:randomX, rotation:randomRotation, ease:Circ.easeOut});
            tl15.to(backBlue2, 0, {y:initialY2, x:initialX2, rotation:0, ease:Linear.easeNone}, "-=1");
            tl15.addLabel("cardOffScreen", "-=0.5");
            tl15.addCallback(playSlide, "cardOnScreen");        
            tl15.addCallback(swapingBacks, "cardOffScreen");
        }   

    if (e.target == backBlue2)
        {
            tl15.to(e.target, 1, {y:randomY, x:randomX, rotation:randomRotation, ease:Circ.easeOut});
            tl15.to(backBlue1, 0, {y:initialY2, x:initialX2, rotation:0, ease:Linear.easeNone}, "-=1");
            tl15.addLabel("cardOffScreen", "-=0.5");
            tl15.addCallback(playSlide, "cardOnScreen");
            tl15.addCallback(swapingBacks, "cardOffScreen");
        }       
}           
}

public function cardFlipper(e:MouseEvent)
{
 //...
}

Answer 1

您可以考虑进行自己的滑动检测。基本上你在DOWN上注册一个起始点，并检查UP上的端点是否更大，然后是向右滑动。当然，向左滑动，另一端位置较低。在拖动时，您可以在触摸位置移动卡片，然后在向上移动卡片，将卡片移动到所需的目标位置。

我还会禁用当前卡上方的卡上的用户交互（mouseEnabled，mouseChildren为false？），并在有效滑动后尽快启用。

AS3轻扫手势不是很敏感

1 个答案: