Algoritmo para implementar rolagem cinética

Question

Quais são alguns bons algoritmos para a criação de uma implementação de rolagem cinética? O recurso seria testado em uma lista de UI personalizada. Enquanto eu estou alvejando dispositivos móveis (aqueles que não têm esse recurso built-in), qualquer algoritmo ou código exemplo do campo de programação diferentes podem também terno.

Answer 1

Eu implementei um eu mesmo recentemente. Estes são os passos que tomou.

1. Você precisa medir a velocidade do cursor (ou cursor do mouse ou dedo)
2. Implementar um loop simples Física de Partículas. Informações sobre como fazer isso podem ser encontrados aqui
3. Dê seu partícula "limites" usando matemática derivada da largura do seu plano de rolagem, e a largura de sua janela
4. continuamente Adicionar a diferença entre a velocidade do mouse, a velocidade da partícula, a velocidade da partícula, então velocidade "partidas" do partículas a velocidade do rato durante o tempo que ele está se movendo.
5. parar de fazer o passo 4, logo que o usuário levanta o seu dedo. O loop física cuida de inércia.
6. Adicione seus floreios pessoais, como margens "adesivos", e suavizar a rolagem pontos "âncora" que operam no paradoxo de Zenão para calcular movimento.
7. eu quase esqueci:. Tome as coordenadas derivadas de cima, e usá-lo como a localização do seu plano de rolagem

Eu provavelmente open source este código em breve. Quanto tempo você precisa disso?

edit: mudou o link. Desculpe, apontou para um pouco a página errada. edit2: ou não? De qualquer forma, página original que eu ligado foi primeiro link na página actualmente ligado.

Answer 2

Uma vez que este foi originalmente solicitado, tenho uma vez, leia atentamente o código fonte para pastrykit, o quadro em que a Apple tem exatamente duplicado sua rolagem cinética em javascript. Não há física de partículas loop- A velocidade do toque é medido no momento exacto em que o dedo é levantado. Desse ponto em diante, o livro é animado usando uma função de atenuação simples que usa a velocidade como um parâmetro de entrada.

Answer 3

Acabei de adicionar um widget scroller ao meu quadro GUI móvel, então eu pensei que iria partilhar a minha solução aqui.

Uma vez que esta é uma questão bastante complexa, decidi dividi-lo em pequenos subtasks pouco independentes, como segue:

1. Funcionalidade básica rolagem : esta tarefa consistia em lidar com eventos de arrastar da forma mais simples, que é rolando o conteúdo de acordo com a distância ea direção do arrasto. Este foi relativamente simples de implementar, o único aspecto complicado era saber quando começar uma operação contra o arrasto quando passar por um evento da torneira para um widget filho dentro da área de rolagem.

2. Scroll inércia : este foi o maior desafio. A idéia aqui é que a rolagem deve continuar por algum tempo depois que o usuário levanta o dedo, desacelerando até parar completamente. Por isso eu precisava ter uma idéia da velocidade de rolagem. Infelizmente, não é preciso para calcular a velocidade de uma única amostra, por isso, enquanto o usuário estiver rolando eu gravar os últimos eventos de movimento N em um buffer circular, juntamente com a hora em que cada evento ocorreu. Eu encontrei N = 4 a funcionar muito bem no iPhone e no HP TouchPad. Quando o dedo é levantado posso calcular uma velocidade de início aproximado para a rolagem inercial do movimento gravada. I definido um coeficiente de aceleração negativa e utilizadas fórmulas padrão de movimento (ver aqui ) para permitir que o deslocamento para baixo fieira agradável. Se a posição de rolagem atinge uma borda enquanto ainda em movimento Eu só repor a velocidade de 0 a impedi-lo de sair do intervalo (a parada abrupta é dirigida seguinte).

3. flexível rolagem limites : em vez de ir para uma parada abrupta quando o livro chega ao fim eu queria o widget para rolar alguns, mas a resistência oferta. Para esta I extended o intervalo de deslocamento permitido em ambas as extremidades por uma quantidade que I definido como uma função das dimensões do elemento. Descobri que a adição de metade da largura ou altura em cada extremidade funcionou muito bem. O truque para dar a rolagem a sensação de que ele está oferecendo alguma resistência foi para ajustar as posições de rolagem exibidos quando eles estão fora de alcance. Eu usei um mais uma função de desaceleração dimensionamento para baixo para isso (há algumas boas funções de atenuação aqui ).

4. comportamento Primavera : já que agora é possível rolar após o intervalo válido, eu precisava de uma maneira de trazer o de volta scroller para uma posição válida se o usuário deixou fora do intervalo. Isto é conseguido através do ajuste da compensação quando o scroller trata de uma parada em um fora de posição intervalo de rolagem. A função de ajuste que eu encontrei para dar uma aparência agradável elástico foi dividir a distância da posição atual para a posição desejada por uma constante e movendo o compensado por esse montante. Quanto maior a constante o movimento mais lento.

5. As barras de rolagem :. O toque final foi adicionar sobreposição barras de rolagem, que desaparecem quando a rolagem começa e fade out quando termina

Answer 4

Você já olhou para funções de atenuação de Robert Penner?

http://www.robertpenner.com/easing/

IIRC estes eram originalmente para Actionscript e foram em torno de um longo tempo.

Answer 5

Bem, eu acho que seria algo como a) obter a velocidade de quão rápido usuário rolado b) quando ele deixa seu dedo, auto percorrer a lista, mas com uma velocidade decrescente com uma velocidade inicial de que o usuário tinha.