Javascript touchmove事件指示的自定义刷卡事件

我试图创建一种插件或事件，css通过在ipad上滑动来转换（移动）元素。为此，到目前为止，我正在使用cocco出色的工作小代码片段：

(function(D){
  var M=Math,abs=M.abs,max=M.max,
  ce,m,th=20,t,sx,sy,ex,ey,cx,cy,dx,dy,l,
  f={
    touchstart:function(e){
    t=e.touches[0];
    sx=t.pageX;
    sy=t.pageY
  },
  touchmove:function(e){
    m=1;
    t=e.touches[0];
    ex=t.pageX;
    ey=t.pageY
  },
  touchend:function(e){
    ce=D.createEvent("CustomEvent");
    ce.initCustomEvent(m?(
    max(dx=abs(cx=ex-sx),dy=abs(cy=ey-sy))>th?
    dx>dy?cx<0?'swl':'swr':cy<0?'swu':'swd':'fc'
    ):'fc',true,true,e.target);
    e.target.dispatchEvent(ce);
    m=0
  },
  touchcancel:function(e){
    m=0
  }
}
for(l in f)D.addEventListener(l,f[l],false)
})(document);

到目前为止还不错。 现在，我的想法是通过一个额外的触摸移动事件来指示可能的“向上滑动”，该事件在手指点击的同时移动元素。我成功地添加了以下js：

//js部件以更酷的方式集成

var startY;

window.addEventListener( 'touchstart', function(e) {
  e.preventDefault();   
  startY = e.targetTouches[0].pageY;
}, false );

window.addEventListener( 'touchmove', function(e) {
  e.preventDefault();
  // check if transition is going on and animations are ready
  if ( !fullscreenSwipeUp ) { // find better solution f.e. to dispatch event on fullscreen transition?

    var diffY = e.changedTouches[0].pageY - startY;

    // fullscreen transition
    if ( diffY <= 0 ) {
        $("#Fullscreen").css( { y: diffY } );
    } else {
        // snap to clean starting value at bottom
        $("#Fullscreen").css( { y: 0 } );
    };
    // do something else to indicate that swipe will be concluded when finger leaves
    // min value based on variable th from custom swipe event
    if ( diffY < -20 ) {
        // indicate that swipe will be concluded
    } else {
        // indicate that swipe will not conclude
    };

  };        
}, false );

// fullscreen fall back to bottom if swipe not concluded
window.addEventListener( 'touchend', function(e) {
  e.preventDefault();   
  if ( !fullscreenSwipeUp ) {
    // fall back to starting values / dequeue for smoother transition on second time
    $("#Fullscreen").dequeue().transition( { y: 0 }, 150, 'easeInSine' );      
  };
}, false ); 

var-startY；
window.addEventListener（'touchstart'，函数（e）{
e、 预防默认值（）；
startY=e.targetTouches[0].pageY；
}，假）；
window.addEventListener（'touchmove'，函数（e）{
e、 预防默认值（）；
//检查过渡是否正在进行，动画是否准备就绪
如果（！fullscreenSwipeUp）{//找到更好的解决方案f.e.在全屏转换时调度事件？
var diffY=e.changedtouchs[0].pageY-淀粉；
//全屏过渡
如果（diffY代码实际上是为低cpu设备、高性能而编写的..在touchmove中省去了复杂的计算。无论如何，要使元素（在touchstart和touchend之间）动画化，一个简单的解决方案是使用css（而不是jquery或其他资源密集型插件）

然后从逻辑上考虑……你无法确定你在touchstart上滑动的方向……你可以在做一些数学运算后在touchend事件中这样做。或者在touchmove破坏整个代码时，如上所述

选项1（简单和高性能）

演示


添加一些行

(function(D){
 var M=Math,abs=M.abs,max=M.max,
 ce,m,th=20,t,sx,sy,ex,ey,cx,cy,dx,dy,l,
 T,  //<- THE TARGET
 f={
  touchstart:function(e){
    t=e.touches[0];
    sx=t.pageX;
    sy=t.pageY;
    T=e.target; T.classList.add('sw'); //<- ADD A CUSTOM CLASS FOR SWIPES
  },
  touchmove:function(e){
    m=1;
    t=e.touches[0];
    ex=t.pageX;
    ey=t.pageY
  },
  touchend:function(e){
    ce=D.createEvent("CustomEvent");
    ce.initCustomEvent(m?(
    max(dx=abs(cx=ex-sx),dy=abs(cy=ey-sy))>th?
    dx>dy?cx<0?'swl':'swr':cy<0?'swu':'swd':'fc'
    ):'fc',true,true,e.target);
    e.target.dispatchEvent(ce);
    m=0;
    T.classList.remove('sw');  //<- REMOVE THE CLASS
  },
  touchcancel:function(e){
    m=0
  }
 }
 for(l in f)D.addEventListener(l,f[l],false)
})(document);

为元素上的移动设备使用适当的（硬件）动画

element{
 background-color:green;
 -webkit-transition:background-color 200ms ease;
}

这是一个简单而肮脏的解决方案，它有效。只要保持简单就行了

该类将仅应用于已定义的元素。；）

选项2

忘记上面的代码

下面是另一种使用“反弹”进行“捕捉”动画的“性能”方法

代码有点复杂…并且使用鼠标..将鼠标事件替换为触摸事件


还有更多的数据点


注意：不要在移动设备中使用jquery或复杂的js插件

额外的

由于在没有触摸界面的pc上工作确实有问题，我添加了一些线条，迫使鼠标根据我的功能要求模拟触摸


编辑

这段代码应该做你想做的

非常感谢Cocco！你太棒了！哇，查看你的代码和示例太有趣了！遗憾的是，由于ipad上的弹性滚动，我在小提琴方面遇到了一些麻烦。不过，我的另一个想法是（糟糕）代码是，动画不仅是一个简单的css转换，有固定的起点和终点，而且会整合实际的手指位置。因此，我使用了转换插件。类似的想法你可以在www.chanel.com上看到“更多”“他们使用的滚动效果。但我将尝试使用您的代码并查看。再次感谢！所以我想我必须使用选项2（很棒的东西！）。我将设法用一些简单的方法来代替弹跳，并从鼠标切换到触摸。我需要的唯一一点建议是如何使身体敏感地移动div，而不是div本身。无论如何，非常棒的东西！再次感谢！你好，科科。再次非常感谢你的想法！我很想使用你的选项2，但我没有成功在这种情况下，请更改代码，使刷卡由主体触发，而不是仅在元素本身上触发：-（如果你想知道我用我的愚蠢代码做了什么，请参阅我的编辑。最后一个代码有效吗？你还需要将刷回设置为false。无论如何，我看不出原始代码和你的代码有任何区别。我只处理Y次刷击…在使用原始刷击功能时，为你设计的元素添加一个默认值。和swu到那一个…函数是一个简单的类切换，css是x，我不是舒尔你在制作动画时到底想做什么…如果你真的喜欢看我的编辑2。我已经在你的代码帮助下学到了一些东西，至少我希望如此。
var startY;
var swipeY = false;
var swiped = false;
var wh = $(window).height();

// fullscreen move on touchmove
function fm(e) {

    e.preventDefault();
    // check if transition is going on and animations are ready
    if ( !swiped && ready ) { // !swiped is necessary, also / why?

        var diffY = e.changedTouches[0].pageY - startY;
        var scaleY = diffY/wh;
        // calculate transition intermediate values
        var osh = 0.91 - ( 0.09 * scaleY );
        var ofsc = 0.86 - ( 0.14 * scaleY );
        // fullscreen transition
        if ( diffY <= 0 ) {
            tfs(osh,[1,-scaleY],ofsc,diffY,0) // an extra module that does the animation with the calculated values
        } else {
            // snap to clean starting values at bottom
            tfs(0.91,[1,0],0.86,0,0)
        };
        // rotate arrow to indicate surpassing minimum touch move leading to swipe
        if ( diffY < -30 ) {
            swipeY = true;
            $arrowDown.addClass('rotation');
        } else {
            swipeY = false;
            $arrowDown.removeClass('rotation');
        };
    };
};
// fullscreen swipe
function fs(e) {

    e.preventDefault();
    window.removeEventListener( 'touchmove', fm, false );
    if ( !swiped ) { // this is necessary, also / why?          
        if ( swipeY ) {         
            $arrowbottomField.trigger('touchstart'); // trigger the full swipe (also available as element direct touch (on touch swiped is set to true in touchstart event handler, also)
            window.removeEventListener( 'touchend', fs, false );
        } else {
            // fall back of animation to starting values
            tfs(0.91,[1,0],0.86,0,0);      
        };
    };
};

window.addEventListener( 'touchstart', function(e) {
    e.preventDefault(); 
    startY = e.targetTouches[0].pageY;  

    window.addEventListener( 'touchmove', fm, false );      
}, false );

window.addEventListener( 'touchend', fs, false );

(function(D){
 var M=Math,abs=M.abs,max=M.max,
 ce,m,th=20,t,sx,sy,ex,ey,cx,cy,dx,dy,l,
 T,  //<- THE TARGET
 f={
  touchstart:function(e){
    t=e.touches[0];
    sx=t.pageX;
    sy=t.pageY;
    T=e.target; T.classList.add('sw'); //<- ADD A CUSTOM CLASS FOR SWIPES
  },
  touchmove:function(e){
    m=1;
    t=e.touches[0];
    ex=t.pageX;
    ey=t.pageY
  },
  touchend:function(e){
    ce=D.createEvent("CustomEvent");
    ce.initCustomEvent(m?(
    max(dx=abs(cx=ex-sx),dy=abs(cy=ey-sy))>th?
    dx>dy?cx<0?'swl':'swr':cy<0?'swu':'swd':'fc'
    ):'fc',true,true,e.target);
    e.target.dispatchEvent(ce);
    m=0;
    T.classList.remove('sw');  //<- REMOVE THE CLASS
  },
  touchcancel:function(e){
    m=0
  }
 }
 for(l in f)D.addEventListener(l,f[l],false)
})(document);

element.sw{
 background-color:yellow;
}

element{
 background-color:green;
 -webkit-transition:background-color 200ms ease;
}