Autor Tema: Hacer scroll o arrastre tipo movil  (Leído 12591 veces)

0 Usuarios y 2 Visitantes están viendo este tema.

YAcosta

  • Moderador Global
  • Exabyte
  • *****
  • Mensajes: 2853
  • Reputación: +160/-38
  • Daddy de Qüentas y QüeryFull
    • Ver Perfil
    • Personal
Hacer scroll o arrastre tipo movil
« en: Noviembre 23, 2011, 11:00:17 pm »
Esta inquietud la tiene (tuvo en el futuro) mi amigo eligioalmuedo y la verdad yo tambien tengo la misma inquietud y por ello y con su permiso republico su post aquí:

"Buenas. ¿Alguien ha intentado emular el deslizamiento que se hacen ahora en casi todos los dispositivos moviles?. Me refiero concretamente al arrastre que se hace en los listados y que crea un efecto similar a arrastre real de una lista sobre rodamientos. (Espero sepais de que os hablo)

¿Que algoritmo se usa para el calculo de la posicion, velocidad y frenado?"
Me encuentras en YAcosta.com

79137913

  • Megabyte
  • ***
  • Mensajes: 185
  • Reputación: +21/-4
  • 4 Esquinas
    • Ver Perfil
    • Eco.Resumen Resumenes Cs. Economicas
Re:Hacer scroll o arrastre tipo movil
« Respuesta #1 en: Noviembre 24, 2011, 08:43:58 am »
HOLA!!!

Te puedo ayudar, en el MouseDown se guarda Top y Timer o GetTickCount como prefieras.
Luego en MouseUp Se Guarda NewTop y Timer o GetTickCount como prefieras.

Luego se toma el intervalo de tiempo y el segmento de altura.

Se divide para que de DeltaTop/DecimaDeSegundo.

(delta = modificacion)

Se hace un bucle que scrollea al principio en la velocidad y luego se le resta una constante por cada giro(vuelta del bucle) a la velocidad (DeltaTop +/- const) / DecimaDeSegundo. Hasta que llegue a 0 DeltaTop.

Nota si delta Top es negativo habra que sumar en vez de restar la constante.

GRACIAS POR LEER!!!
"Como no se puede igualar a Dios, ya he decidido que hacer, ¡SUPERARLO!"
"La peor de las ignorancias es no saber corregirlas"

 79137913                          *Shadow Scouts Team*                                                          Resumenes Cs.Economicas

raul338

  • Terabyte
  • *****
  • Mensajes: 894
  • Reputación: +62/-8
  • xD fan!!!!! xD
    • Ver Perfil
    • Raul's Weblog
Re:Hacer scroll o arrastre tipo movil
« Respuesta #2 en: Noviembre 24, 2011, 09:49:11 am »
Mira, si lo que buscas es que se pueda hacer tipo como si pasaras el dedo hacia arriba, con el mouse es incomodo x'D

Puedes buscar "smooth scroll" o deslizamiento suave (firefox y chrome lo tienen integrado, aunque lo tenian desactivado por defecto, opera lo tenia activado)

Si ves el código fuente de jQuery (o tambien scrip.taculo.us) tiene funciones que son para "deslizar" la pantalla, podrías darle un vistazo y traspasar ese código :P

eligioalmuedo

  • Bytes
  • *
  • Mensajes: 16
  • Reputación: +2/-1
    • Ver Perfil
Re:Hacer scroll o arrastre tipo movil
« Respuesta #3 en: Noviembre 24, 2011, 03:24:56 pm »
HOLA!!!

Te puedo ayudar, en el MouseDown se guarda Top y Timer o GetTickCount como prefieras.
Luego en MouseUp Se Guarda NewTop y Timer o GetTickCount como prefieras.

Luego se toma el intervalo de tiempo y el segmento de altura.

Se divide para que de DeltaTop/DecimaDeSegundo.

(delta = modificacion)

Se hace un bucle que scrollea al principio en la velocidad y luego se le resta una constante por cada giro(vuelta del bucle) a la velocidad (DeltaTop +/- const) / DecimaDeSegundo. Hasta que llegue a 0 DeltaTop.

Nota si delta Top es negativo habra que sumar en vez de restar la constante.

GRACIAS POR LEER!!!
Gracias por el apunte, pero no es lo que busco, ya que ese calculo genera una delta constante, que produce una deceleracion constante hasta llegar a cero, no produciendose el efecto de frenado del que hablo, si no de uno contante y "lineal".  Hablando matematicamente la deceleracion es parabolica y no lineal. Hay reside su complejidad. Pero vuelvo a repetirte que gracias.

Juntando Mensajes

He activado el deslizamiento suave y desactivado el automatico (esta en el apartado "avanzado"), pero no veo que produzca cambios ningunos en el deslizamiento. Igual solo sirve en pantallas tactiles. No se.....

En cuanto al codigo jQuery lo buscare y lo mirare a ver que hay. Muchas gracias.
« última modificación: Noviembre 24, 2011, 04:47:00 pm por xkiz ™ »
El ayer es historia. El mañana es un misterio. El hoy es un regalo, y por eso le llaman presente

79137913

  • Megabyte
  • ***
  • Mensajes: 185
  • Reputación: +21/-4
  • 4 Esquinas
    • Ver Perfil
    • Eco.Resumen Resumenes Cs. Economicas
Re:Hacer scroll o arrastre tipo movil
« Respuesta #4 en: Noviembre 24, 2011, 08:28:43 pm »
HOLA!!!

El calculo no genera un Delta Top Constante, lo que hace es hacer un deltaTop = X y lo divide por decima de segundo para obtener asi la aceleracion inicial...

En cuanto a la desaceleracion, la desaceleracion es constante siempre y cuando el rozamiento no cambie, por ende es constante. Si vos lo que queres hacer es que cuanto mas lento vaya mas desacelere, que no seria adecuado a la fisica, le restas una variable a la velocidad, quedando la formula final asi:

(DeltaTop +/- (const+DeltaTopINI - (DeltaTopINI - DeltaTop)) / DecimaDeSegundo

Con la anterior formula logras el efecto que deseas.

GRACIAS POR LEER!!!
"Como no se puede igualar a Dios, ya he decidido que hacer, ¡SUPERARLO!"
"La peor de las ignorancias es no saber corregirlas"

 79137913                          *Shadow Scouts Team*                                                          Resumenes Cs.Economicas

seba123neo

  • Terabyte
  • *****
  • Mensajes: 763
  • Reputación: +88/-5
    • Ver Perfil
Re:Hacer scroll o arrastre tipo movil
« Respuesta #5 en: Noviembre 24, 2011, 10:41:06 pm »
en firefox, apreta la rueda del mouse y te aparece la flecha, move el mouse arriba y abajo eso queres ?

raul338

  • Terabyte
  • *****
  • Mensajes: 894
  • Reputación: +62/-8
  • xD fan!!!!! xD
    • Ver Perfil
    • Raul's Weblog
Re:Hacer scroll o arrastre tipo movil
« Respuesta #6 en: Noviembre 24, 2011, 11:30:24 pm »
Capas que el quiere algo como esto :P

[youtube]http://www.youtube.com/watch?v=wDkdE-qUBP0[/youtube]

eligioalmuedo

  • Bytes
  • *
  • Mensajes: 16
  • Reputación: +2/-1
    • Ver Perfil
Re:Hacer scroll o arrastre tipo movil
« Respuesta #7 en: Noviembre 25, 2011, 04:40:27 am »
No Sebas, y un saludo. Lo de Firefox es un scroll suave en funcion a lo separado que dejas el mouse de la doble-flecha que generas al usar el boton central. No es eso de lo que hablo. Lo que trato de emular es el deslizamiento de listados que se hace tactilmente en los moviles de ultima generacion (Android, IOs, etc). Cuando tienes un listado de contactos por ejemplo y pulsas con el dedo el listado y lo "lanzas" hacia abajo, se produce un scroll muy real con desaceleracion. Eso es lo que trato de llevar a codigo, que como bien dice Raul338, esto usado con el mouse es incomo y poco practico, mas aun existiendo la rueda del scroll en los mouse. Pero esto seria para aplicarlo en dispositivos con pantalla tactil, en los cuales lo que prima es la rapidez.

No estoy trabajando en un software tipo restauracion, pero el otro dia desayunando en un bar, cuando me fije en el camarero que estaba en la caja registradora elaborando un arqueo, me sorprendio que para moverse por el listado de movimientos de la caja, pulsaba la pantalla con el dedo un segundo o dos, y salia una barra de deslizamiento con unas dimensiones enormes pero comodas para que fuera pulsada por el dedo. Una vez pulsado con el dedo en esta barra de deslizamiento tipo Vscroll de VB, subia y bajaba el dedo para moverse por el listado, que a poco que fuese muy extenso, le da poca presicion. Fue cuando me pregunté porque un software dedicado a la restauracion y con pantalla tactil, no tenia esta implementacion tan util que vemos a diario en los moviles.

He tomado a la ligera la ecuacion de 79137913, y creo que es lo que busco. Una vez calculada la aceleracion inicial, solo tengo que calcular que contante de rozamiento "k" quiero aplicar para dar el efecto de frenado suave que busco. En cuanto tenga algo en codigo lo posteo para que podamos probarlo y mejorarlo, y si luego algun gurú de este foro es capaz de crear un dll o ocx o control de usuario para poder implementarlo sobre objetos pues mejor.
A todos gracias.
El ayer es historia. El mañana es un misterio. El hoy es un regalo, y por eso le llaman presente

raul338

  • Terabyte
  • *****
  • Mensajes: 894
  • Reputación: +62/-8
  • xD fan!!!!! xD
    • Ver Perfil
    • Raul's Weblog
Re:Hacer scroll o arrastre tipo movil
« Respuesta #8 en: Noviembre 25, 2011, 05:18:12 am »
Raul338, esto usado con el mouse es incomo y poco practico, mas aun existiendo la rueda del scroll en los mouse. Pero esto seria para aplicarlo en dispositivos con pantalla tactil, en los cuales lo que prima es la rapidez.

Exacto, yo sabia que era para algo tactil :P Aun asi, estaria bueno crear un framework (un conjunto de clases) para que podamos hacer aplicaciones tactiles. Tal vez con la API de Windows 8/7 se pueda hacer :)

eligioalmuedo

  • Bytes
  • *
  • Mensajes: 16
  • Reputación: +2/-1
    • Ver Perfil
Re:Hacer scroll o arrastre tipo movil
« Respuesta #9 en: Noviembre 25, 2011, 07:24:23 am »
Bueno. Tengo algo hecho muy por encima, pero para ver el efecto es mas que sobrado. Solo hay que picar en el command1 y lanzarlo a derecha o izquierda. Si el lanzamiento es debil podeis ver el efecto de frenado. A ver como lo veis.

File name: Deslizador.rar File size: 1.73 KB
El ayer es historia. El mañana es un misterio. El hoy es un regalo, y por eso le llaman presente

Virgil Tracy

  • Kilobyte
  • **
  • Mensajes: 64
  • Reputación: +38/-1
    • Ver Perfil
Re:Hacer scroll o arrastre tipo movil
« Respuesta #10 en: Noviembre 25, 2011, 08:03:56 am »
En codeproject encontre esto:

Implementing a smoothly animated ListBox
http://www.codeproject.com/KB/list/SmoothListBox.aspx

¿Y viste el ListBoxEx de Leandro?, el implementa un scroll con aceleracion
http://leandroascierto.com/blog/listboxex/

A este control se le puede agregar un freno al scroll, solo hay que cambiar el PicScroll_MouseMove
me quedo algo trucha la implementacion, pero se puede mejorar  ;D

Código: (vb) [Seleccionar]
Private Sub PicScroll_MouseMove(index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single)

    Dim PT As POINTAPI
    Dim ScrollVelociti As Long
    Static IsIn As Boolean
   
    If Not IsIn Then
        IsIn = True
        DrawArrow index, True
        Select Case mCount
            Case Is < 20
                ScrollVelociti = 300
            Case Is < 40
                ScrollVelociti = 250
            Case Is < 100
                ScrollVelociti = 100
            Case Else
                ScrollVelociti = 50
        End Select
           
        GetCursorPos PT
   
        Do While WindowFromPoint(PT.X, PT.Y) = PicScroll(index).hWnd
       
            DoEvents
            Sleep ScrollVelociti
            If ScrollVelociti > 1 Then ScrollVelociti = ScrollVelociti - 1
           
            If index = 0 Then
                mScrollPos = mScrollPos - 1
            Else
                mScrollPos = mScrollPos + 1
            End If
               
            Me.Refresh
            GetCursorPos PT
           
        Loop
       
        DrawArrow index
        IsIn = False
       
        BrakeScroll index '<--- aqui freno del scroll
       
    End If
   
End Sub

Private Sub BrakeScroll(index As Integer)
Dim ScrollVelociti As Long

ScrollVelociti = 1

Do While ScrollVelociti < 100

   DoEvents
   Sleep ScrollVelociti
   ScrollVelociti = ScrollVelociti + 4
   
   Debug.Print ScrollVelociti
   
   If index = 0 Then
      mScrollPos = mScrollPos - 1
   Else
      mScrollPos = mScrollPos + 1
   End If
   
   Me.Refresh

Loop

End Sub

79137913

  • Megabyte
  • ***
  • Mensajes: 185
  • Reputación: +21/-4
  • 4 Esquinas
    • Ver Perfil
    • Eco.Resumen Resumenes Cs. Economicas
Re:Hacer scroll o arrastre tipo movil
« Respuesta #11 en: Noviembre 25, 2011, 09:03:52 am »
HOLA!!!

Me baje el proyecto que hiciste, te salio genial!!!

Me encanto el efecto, FELICITACIONES!

GRACIAS POR LEER!!!
"Como no se puede igualar a Dios, ya he decidido que hacer, ¡SUPERARLO!"
"La peor de las ignorancias es no saber corregirlas"

 79137913                          *Shadow Scouts Team*                                                          Resumenes Cs.Economicas

eligioalmuedo

  • Bytes
  • *
  • Mensajes: 16
  • Reputación: +2/-1
    • Ver Perfil
Re:Hacer scroll o arrastre tipo movil
« Respuesta #12 en: Noviembre 25, 2011, 09:20:50 am »
Muchas gracias compañero
El ayer es historia. El mañana es un misterio. El hoy es un regalo, y por eso le llaman presente

raul338

  • Terabyte
  • *****
  • Mensajes: 894
  • Reputación: +62/-8
  • xD fan!!!!! xD
    • Ver Perfil
    • Raul's Weblog
Re:Hacer scroll o arrastre tipo movil
« Respuesta #13 en: Noviembre 25, 2011, 10:44:27 am »
No lo puedo bajar, ... se me ve mal la pagina.. alguien lo podria subir a otro servidor? Gracias :D

79137913

  • Megabyte
  • ***
  • Mensajes: 185
  • Reputación: +21/-4
  • 4 Esquinas
    • Ver Perfil
    • Eco.Resumen Resumenes Cs. Economicas
Re:Hacer scroll o arrastre tipo movil
« Respuesta #14 en: Noviembre 25, 2011, 10:48:32 am »
"Como no se puede igualar a Dios, ya he decidido que hacer, ¡SUPERARLO!"
"La peor de las ignorancias es no saber corregirlas"

 79137913                          *Shadow Scouts Team*                                                          Resumenes Cs.Economicas