-4

我想强制我的卷轴动画总是向前而不是向后（即动画帧数应该只变大并且永远不允许变小）。

有没有明智的方法来做到这一点？

为清楚起见进行编辑：

我正在使用jQuery reel创建一个简单的动画。动画由 10 个图像（01.png、02.png、03.png ...）组成。reel 的默认行为是在用户单击/触摸图像并向左或向右拖动时播放动画。

当用户向右拖动时，它会以正确的顺序播放动画——本质上是从 01.png、02.png、03.png 前进……这里没有问题。

当用户向左拖动时，它会反向播放动画——03.png、02.png、01.png、10.png、09.png ...我不喜欢这个，我想禁用它。

所以我正在寻找一种只允许动画以“正向模式”播放并禁用“反向模式”的方法。换句话说，我希望能够禁用向左拖动或向左平移。

这有意义吗？

4

1 回答 1

1

您需要检查“平移”事件中的 X 或 Y 位置，如果它小于“向下”上的 X 或 Y 位置，则返回 false，如下所示 

$('#your_reel_image').on('down', function(e, x, y, ev){
    $(this).data("lastPosition",{"x":x,"y":y});//store the position on mousedown
}).on('pan', function(e,x,y,ev){//event when you do a mousemove while the mousedown
    var $reel=$(this);
    var delta=$reel.data("lastPosition").x-x;//difference between current and last position
    if(delta<0){
        $reel.data("lastPosition",{"x":x,"y":y});//update position
        $reel.data("direction","right");//set current direction to right
    }
    else if(delta>0){
        $reel.data("direction","left");//set current direction to left
        return false;//prevent the reverse animation
    }
});

我还在fractionChange中添加了一个函数，以防止仅将光标向左移动时会发生1帧反向动画 

$('#your_reel_image').on('fractionChange',function(){
    if($(this).data("direction")=="left"){//if the current direction is left
        $(this).data("direction","")//clear the current direction
        return false;//return false prevent the 1 frame animation 
        //without the last line you can return 1 frame at a time on mouseup 
    }
});

如果要防止鼠标滚轮上的反向动画，则需要添加此功能 

$('#your_reel_image').on('wheel',function(e, distance, ev){
    var $reel=$(this);
    //almost the same as in the pan function without storing the position
    if(distance<0){
        $reel.data("direction","right");
    }
    else if(distance>0){
        $reel.data("direction","left");
        return false;
    }
});

http://jsfiddle.net/N68qa/1/

于 2013-12-18T00:23:11.540 回答