ड्रैग के बाद 'फ्लिक' का पता लगाने के लिए कैसे?

Question

मैं अपने मोबाइल वेब ऐप में एक साधारण कस्टम स्क्रॉलिंग विधि को लागू करने की कोशिश कर रहा हूं। मुझे ऊर्ध्वाधर स्क्रॉलिंग में परेशानी हो रही है, जहां पृष्ठ 'flicked' है, तो मैं थोड़ा गति प्रभाव रखना चाहता हूं।

समस्या खींचने के संकेत, दिशा बदलने और क्या नहीं होने के बाद समस्या "झटका" इशारा, (वेग और शायद उस इशारा की लंबाई) का पता लगा रही है। आशा है कि आप समझेंगे कि मेरा क्या मतलब है, आप पृष्ठ को ऊपर या नीचे खींच सकते हैं और उस ड्रैग के अंत में, मैं यह जानना चाहता हूं कि कोई झटका भी है ..

आप दोनों को कैसे अलग करते हैं? ऐसा तर्क कैसे दिखता है?

किसी भी मदद के लिए बहुत धन्यवाद।

कोड: (खेद है कि अगर यह अंश एक मेस का एक सा है)

var Device = function() { 

    //define some private variablees 
    var startY, 
     startX, 
     startTime, 
     deltaY = 0, 
     deltaX = 0, 
     lastY, 
     currentPage, 
     nextPage, 
     prevPage, 
     directionY, 
     lastTime, 
     pages, 
     pane, 
     offsetX = 0, 
     offsetY = 0, 
     isPanning, 
     isScrolling, 
     isTouch = "ontouchstart" in window; 


    return { 



     init: function() { 

     document.getElementById('frame').addEventListener(isTouch ? 'touchstart' : 'mousedown', Device.onTouchStart, false); 


      //get all panes in an array 
      panes = document.querySelectorAll('.pane'); 


     },  

onTouchStart: function (evt) { 

      //get X and Y of the touch event 
      var touch = isTouch ? event.touches[0] : event; 
      startY = touch.clientY; 

      //add listener for touch move and end 
      document.addEventListener(isTouch ? 'touchmove' : 'mousemove', Device.onTouchMove, false); 
      document.addEventListener(isTouch ? 'touchend' : 'mouseup', Device.onTouchEnd, false); 

      startTime = new Date(); 
     }, 
     onTouchMove: function (evt) { 

       //get X and Y of the touch event 
       var touch = isTouch ? event.touches[0] : event; 

       currentY = touch.clientY; 

       //calc touch length 
       deltaY = currentY - startY;    


       //Detect if scroll is bigger than threshold 5px 
       if (Math.abs(deltaY) > 5 && !isPanning) { 



         isScrolling = true; 


         //get the element 
          pane = panes[0]; 

         //set new position 
         offsetY = pane.lastOffset + deltaY; 

                //call animation 
         Device.scrollTo(pane,0,offsetY); 

        } 

      //detect last direction  
      directionY = (lastY >= currentY) ? 1 : 0; 


       //roll over last variables 
       lastY = currentY; 
       lastTime = new Date(); 
     }, 

     onTouchEnd: function() { 

     //timing 
       var endTime = new Date(); 
       var velocity = (endTime - lastTime).toFixed(0); 


      console.log('velocity: ' + velocity); 

//TEMPORARY 
pane.lastOffset = offsetY; 


       isScrolling = false; 

       //housekeeping 
       document.removeEventListener(isTouch ? 'touchmove' : 'mousemove', Device.onTouchMove, false); 
       document.removeEventListener(isTouch ? 'touchend' : 'mouseup', Device.onTouchEnd, false); 

      //call for momentum 
      Device.doMomentum(velocity); 

     }, 
     scrollTo: function(el,x,y) { 
     if (el) { 

       el.style['-webkit-transition-timing-function'] = ''; 
       el.style['-webkit-transition-duration'] = '0ms'; 
       el.style[ 'WebkitTransform' ] = 'translate3d('+x+'px,'+y+'px, 0px)'; 
     } 
     }, 
     animateTo: function(el,x,y) { 
     if (el) { 
       el.style['-webkit-transition-timing-function'] = 'cubic-bezier(0,0,0.25,1)'; 
       el.style['-webkit-transition-duration'] = '300ms'; 
       el.style[ 'WebkitTransform' ] = 'translate3d('+x+'px,'+y+'px, 0px)'; 
     } 
     }, 
     doMomentum: function(velocity) { 



     console.log((directionY == 1) ? 'up': 'down'); 
     console.log('pane.lastOffset: ' + pane.lastOffset); 
     var endPosition; 

      if (directionY == 1) { 
     endPosition = pane.lastOffset - velocity; 

     } else { 

     endPosition = parseFloat(pane.lastOffset) + parseFloat(velocity); 
     } 

     console.log(endPosition); 

     Device.animateTo(pane,0,endPosition); 

     pane.lastOffset = endPosition; 


     } 

Answer 1

एफवाईआई, जो मैंने समाप्त किया वह बस onTouchMove -event और onTouchEnd -event के बीच समाप्त हो गया समय का उपयोग कर रहा था।

onTouchMove: function (evt) { 
    ... 
intermediateTime = new Date(); 
    ... 
} 

और फिर onTouchEnd मैं एक ENDTIME मूल्य मिलता है और अंतर का मूल्यांकन:

मूल रूप से, मैं एक तारीख चर कि लगातार onTouchMove कॉलबैक में खुद को अधिलेखित कर देता है। यदि यह समय बहुत कम है, तो मुझे लगता है कि अंत में एक "झटका" था।

onTouchEnd: function (evt) { 
    ... 
var endTime = new Date(); 

var vel = (endTime - intermediateTime); 

if (vel <= 100) { 

    doMomentumOrSomething(); 

} 
    ... 
} 

यह बहुत आसान है लेकिन वास्तव में अच्छी तरह से काम करता है।

Answer 2

मैं एक झटका स्थिति और समय के साथ जुड़े कई बिंदुओं का उपयोग कर पता लगाया जा जाएगा लगता होगा। यदि आप एक सामान्य ड्रैग की गति के बारे में सोचते हैं, तो यह काफी स्थिर वेग पर किया जाएगा। अंत में एक झटका हालांकि, ड्रैग के बाकी हिस्सों की तुलना में काफी वेग होना चाहिए।

तो, यदि आपके पास 5 पॉइंट सरणी है, जिसमें ड्रैग पॉइंट नमूने लगभग 0.1 सेकंड अलग हैं (और जहां पुराने मान सरणी में पहले हैं), तो आप सामान्य ड्रैग की वेग की गणना कर सकते हैं (वर्टिकल के लिए खींच)

var dragVelY = (samples[2].y - samples[0].y)/3; 

फिर संभावित झटका के वेग इतना की तरह:

var flickVelY = (samples[4].y-samples[2].y)/3; 

तो flickVelY dragVelY की तुलना में काफी अधिक है, तो आप एक झटका पता चला है। मैंने इसका परीक्षण नहीं किया है, इसलिए आपको सरणी में नमूने की संख्या समायोजित करने और अच्छे ड्रैग या फ्लिक वेगों की तुलना करने के लिए आप कितने नमूने की तुलना कर रहे हैं। यदि यह एक लंबा ड्रैग है, तो मैं केवल नमूने सरणी से पुराने पदों को स्थानांतरित करने के लिए Array.shift और Array.push विधियों का उपयोग करता हूं और अंत में नए को धक्का देता हूं।