javascript - touchmove 事件指示的自定义滑动事件

Question

我正在尝试创建一种插件或事件，通过在 ipad 上轻扫 css 转换(移动)元素。为此，我目前使用的是 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);

对于转换，rico st.cruz 的插件 jquery-transit.js 在我的网站上实现(当然还有 jquery)

//用法(示例)

$("body").on( 'swu', function() {
    fullscreenSwipeUp = true;
    $("#Fullscreen").transition( { y: '-100%' }, 900, 'easeInSine' )
} );

到目前为止一切顺利。现在我的想法是用一个额外的触摸移动事件来指示可能的“向上滑动”，该事件会在手指点击的同时移动元素。我成功地添加了以下 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 ); 

现在我还看到，在这段代码中，各个部分相互重叠，就像来自基本自定义事件和我的东西的双击移动事件。如果有人可以向我提供有关如何集成这两个代码的想法，那就太棒了。或者也许存在这样的东西？我找不到合适的东西。

感谢您的帮助!

PS 我也尝试创建一个 fiddle ，在这里:http://jsfiddle.net/Garavani/9zosg3bx/1/但遗憾的是我太愚蠢了，无法让它与所有外部脚本一起工作:-(

jquery-transit.js: http://ricostacruz.com/jquery.transit/

编辑:

所以我按以下方式更改了我的代码。我想我对原始滑动事件(也包含触摸移动事件)和我想对该元素执行的操作感到困惑。它可以工作，但可能仍然一团糟。我必须设置一种标志来检查是否执行滑动以暂时禁用触摸移动事件。有更好的方法吗？感谢您的耐心等待!

var startY;
var swipeY = false; // for condition if condition for swipe is fullfilled
var swiped = false; // for check if swipe has been executed

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

window.addEventListener( 'touchmove', function(e) {
    e.preventDefault();
    // check if swipe already executed
    if ( !swiped ) { // find better solution f.e. to dispatch event when swiped?

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

        // check for final swipe condition
        if ( diffY < -30 ) {
            swipeY = true;
            // do something with an element to indicate swipe will be executed
        } else {
            swipeY = false;
            // do something with an element to indicate swipe will NOT be executed
        };
    };      
}, false );

window.addEventListener( 'touchend', function(e) {
    e.preventDefault(); 
    if ( swipeY ) {
        swiped = true;
        // trigger the swipe action
    } else {
        // let the element fall back to original state     
    };
}, false ); 

编辑 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 );

解释(尽我所能)再次感谢 Cocco 的耐心等待。与此同时，我再次修改了代码。它有效 :-) 我知道你的眼睛会变得一团糟。

在我的网站上(应该也可以在 ipad 上工作，但不仅如此)有一个可以触摸的区域，全屏正在向上移动覆盖整个窗口(类似于 www.chanel.com -> “更多”) .此外，(在 iPad 上)可以在整个 body 上滑动来做同样的事情。

阶段:

阶段 1) 用户点击和滑动(保持手指在上面)全屏 div 跟随他的手指。

Pause 2) 如果滑动到达一定距离(手指仍然在上面)，小箭头也会转动表示:如果你现在离开，将执行滑动

暂停 3) 手指仍然在距离上变得小于完成滑动，箭头折回

阶段 4)用手指离开已经覆盖的距离决定全屏是完全向上移动还是向下移动(如果距离不够)

对于转动的小箭头，我可以像您告诉我的那样使用类切换(比我做的好多了!谢谢)但是对于动画的其余部分，不是因为值在很大程度上取决于窗口大小。我整个网站的想法是浏览器窗口可以有任何大小或关系，所有内容自适应(随时包含水平和垂直居中)

对于手机，一切都完全改变了。

如果你想看一看:www.stefanseifert.com(如果你想看到效果(在 ipad 上)，你必须通过触摸预告片底部右上角的箭头来跳过介绍)

我知道还有很多其他东西是最先进的编程(说得非常仔细:-)，但在某种程度上是可行的。而且我负担不起雇一个程序员几周来重做所有事情的费用。 ;-)这是一种边做边学的方式(因为你可以猜到，我这辈子从来没有编程过 ;-)所以我非常感谢你提供的每一点信息，并帮助我把小事做得更好。

如果有人经过这里，我肯定会得到一些反对票 :-)谢谢 cocoa 圣诞快乐!

Answer 1

该代码实际上是为低 CPU 设备、高性能 .. 省略了 touchmove 内部的复杂计算。无论如何要为元素设置动画(在 touchstart 和 touchend 之间)，一个简单的解决方案是使用 css(不是 jquery 或其他资源密集型插件)。

然后从逻辑上思考...您无法确定在触摸开始时向哪个方向滑动...您可以在做一些数学运算后在触摸结束事件中这样做。或者，如上所述，touchmove 会破坏整个代码。

选项 1(简单且高性能)

演示

http://jsfiddle.net/z7s8k9r4/

添加一些行....

(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);

现在定义CSS类

element.sw{
 background-color:yellow;
}

在您的元素上为移动设备使用适当的 (HW) 动画

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

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

该类将仅应用于已定义的元素。 ;)

选项 2

忘记上面的代码...

这是使用“弹跳”制作“捕捉”动画的另一种“高性能”方法。

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

http://jsfiddle.net/xgkbjwxb/

还有更多的数据点

http://jsfiddle.net/xgkbjwxb/1/

注意:不要在移动设备上使用 jquery 或复杂的 js 插件。

额外

因为在没有触摸界面的 PC 上工作确实有问题，我添加了一些行，根据我的功能要求强制鼠标模拟触摸。

http://jsfiddle.net/agmyjwb0/

编辑

这段代码应该做你想做的......

http://jsfiddle.net/xgkbjwxb/3/