evento de deslizamiento personalizado indicado por evento touchmove

Estoy tratando de crear una especie de complemento o evento que css transite (mueva) los elementos mediante el deslizamiento en el iPad. Para esto estoy usando hasta ahora el pequeño fragmento de código de 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); 

Para las transiciones rico st.cruz ‘plugin jquery-transit.js se implementa en mi sitio (y jquery por supuesto)

// uso (ejemplo)

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

Hasta ahora tan bueno. Ahora mi idea era indicar el posible “deslizar hacia arriba” con un evento de movimiento de toque adicional que mueve el elemento a lo largo mientras el dedo está en marcha. Y lo logré agregando los siguientes js:

// js partes para integrar de una manera más fresca.

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

Ahora veo también que en este código varias partes se superponen entre sí como el evento de movimiento de doble toque del evento personalizado base y mis cosas. Sería increíble si alguien me ofreciera una idea de cómo integrar los dos códigos. O tal vez algo como esto existe? No pude encontrar lo correcto.

¡Gracias por una mano!

PD: también intenté crear un violín aquí: http://jsfiddle.net/Garavani/9zosg3bx/1/ pero lamentablemente soy demasiado estúpido para hacer que funcione con todos los scripts externos 🙁

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

EDITAR:

Así que cambié mi código de la siguiente manera. Supongo que estaba confundido entre el evento de deslizamiento original (que también incorpora el evento de movimiento táctil) y lo que quería hacer con el elemento. Funciona aunque probablemente sigue siendo un desastre. Tuve que establecer un tipo de bandera para comprobar si el deslizamiento se ejecuta para deshabilitar el evento de movimiento táctil temporalmente. ¿Hay una mejor manera de hacer eso? ¡Gracias por su paciencia!

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

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

Explicación (tan bien como puedo) Gracias Cocco por tu paciencia nuevamente. Mientras tanto, modifiqué el código de nuevo. Funciona 🙂 Sé que será un desastre en tus ojos.

En mi sitio (se supone que funciona también en ipad, pero no solo) hay un campo donde puede tocar y una pantalla completa se está moviendo hacia arriba cubriendo toda la ventana (similar a www.chanel.com -> „más“). Además, es posible (en el iPad) deslizar todo el cuerpo para hacer lo mismo.

Fases:

Fase 1) El usuario toca y desliza (manteniendo el dedo) La división de pantalla completa sigue su dedo.

Fase 1

Pausa 2) Si se alcanza una cierta distancia del barrido (aún con el dedo), una pequeña flecha también gira para indicar: si se marcha ahora, se ejecutará el barrido

Fase 2

Pausa 3) aún con el dedo en la distancia se vuelve menor que la de completar el golpe, la flecha vuelve hacia atrás

Fase 3

Fase 4) Dejar con el dedo la distancia ya cubierta decide si la pantalla completa se moverá completamente hacia arriba o caerá hacia abajo (si la distancia no es suficiente)

Phase_4aPhase_4b

Para que la pequeña flecha gire, podría usar un interruptor de clase como me dijo (¡mucho mejor que lo que hice! Gracias) pero por el rest de la animación no porque los valores dependan mucho del tamaño de la ventana. Y la idea de todo mi sitio es que la ventana del navegador puede tener cualquier tamaño o relación, todos los contenidos se adaptan (con centrado horizontal y vertical en cualquier momento)

Para los teléfonos móviles todo cambia por completo.

Si desea echar un vistazo: www.stefanseifert.com (si desea ver el efecto (en el iPad), deberá omitir la introducción tocando la flecha en la esquina derecha en la parte inferior del div del remolque)

Sé que hay un montón de otras cosas que son notables en la progtwigción de vanguardia (para decir esto con mucho cuidado 🙂 pero de alguna manera funciona. Y no puedo permitirme contratar a un progtwigdor por semanas para rehacer todo. 😉 Es como aprender haciendo (porque como puedes suponer, nunca programé antes en mi vida ;-), así que estoy muy agradecido por toda la información y ayuda para hacer mejor las cosas pequeñas.

Si alguien pasa aquí, obtendré algunos votos negativos 🙂 ¡Gracias, Feliz Navidad, Cocco!

El código está hecho para dispositivos de bajo cpu, alto rendimiento … dejando de lado cálculos complejos dentro del touchmove. De todos modos, para animar sus elementos (entre touchstart y touchend), una solución simple es usar css (no jquery u otros complementos de uso intensivo de recursos).

luego piense lógicamente … no puede determinar en qué dirección se desliza en el inicio táctil … puede hacer eso en el evento de toque después de hacer algunos cálculos. O mientras toca un botón que destruye todo el código, como se mencionó anteriormente.

OPCION 1 (simple y alto rendimiento)

MANIFESTACIÓN

http://jsfiddle.net/z7s8k9r4/

Agrega algunas líneas ….

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

ahora define la clase css

 element.sw{ background-color:yellow; } 

use la animación adecuada (HW) para dispositivos móviles en su elemento

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

Esta es una solución simple y sucia, funciona. solo mantenlo simple

La clase se aplicará sólo en los elementos definidos. 😉

OPCION 2

olvida el código de arriba ...

Aquí hay otra forma "performant" de hacer una animación "snap" usando "bounce".

el código es un poco más complejo ... y usa el mouse ... reemplaza los eventos del mouse con eventos táctiles.

http://jsfiddle.net/xgkbjwxb/

y con más puntos de datos.

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

Nota: no utilice jquery o complementos de js complejos en dispositivos móviles.

Extra

Como es realmente problemático trabajar en la PC sin una interfaz táctil, agregué algunas líneas que obligan al mouse a simular toques según mis requisitos de función.

http://jsfiddle.net/agmyjwb0/

EDITAR

este código debe hacer lo que quieras ...

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