Com a proliferação de telas sensíveis ao toque, a questão das combinações de gestos na tecnologia de computador está se tornando especialmente relevante. O multitoque permite que os usuários movam facilmente objetos virtuais na tela com movimentos simples dos dedos. A maioria das principais ações em dispositivos de toque estão intimamente relacionadas aos gestos, eles fundamentam a interação com dispositivos móveis e tablets. Os gestos consistem em mecânica tátil (o que os dedos do usuário fazem em sua tela sensível ao toque) e atividade tátil subsequente (o resultado da mecânica tátil).

O que se segue é uma coleção de informações necessárias que revelam as principais características das manipulações sensoriais sobre dispositivos móveisoh. E também existem variações vetoriais gratuitas de gestos que você pode usar em seu trabalho.

Mecânica tátil e atividade tátil

Existem muitos tipos de mecânica tátil. Abaixo estão os gestos mais comuns.

Comovente tela de toque é o gesto mais popular e básico. Na verdade, é feito diariamente quando você toca na tela para iniciar aplicativos, o email ou qualquer outro serviço semelhante. Um único toque é caracterizado simplesmente por pressionar a tela com um dedo.

Toque duplo tela de toque é o próximo gesto mais comum. O duplo toque é realizado com um rápido “clique” duplo do dedo na tela do aparelho. Normalmente usado para ampliar uma imagem ou uma área de texto em uma tela.

Escorregar também bem conhecido pelo usuário médio. Esta ação é realizada tocando e arrastando o dedo pela superfície da tela. Um excelente exemplo é bloquear um telefone conectando o dedo a pontos específicos na tela para bloquear ou desbloquear.

Arrastando tem quase a mesma mecânica tátil que a ação descrita no caso anterior. A principal diferença é a velocidade das operações.

Swiping combina deslizar e arrastar. Nesse caso, a mecânica tátil não difere muito do arrasto, exceto na velocidade. Deslizar o dedo se move muito rapidamente, como se você tivesse que rolar a tela para remover a imagem do perfil / avatar / aplicativo.

Pressão longa envolve tocar em um elemento da tela e manter o dedo sobre ele por algum tempo. O resultado dessa mecânica tátil pode ser abrir uma janela para copiar um trecho de texto, etc ...

Mantenha pressionado e arraste envolve pressionar e segurar o dedo na tela, seguido por um movimento ao longo de sua superfície. É usado para alterar a ordem dos ícones do aplicativo, etc.

Toque duas vezes e arraste - esta combinação de gestos é um pouco mais complicada. É necessário pressionar em uma área da tela, levantar o dedo da superfície e pressionar novamente com mais movimentos do dedo sobre a superfície da tela até a área de interesse. Esta mecânica tátil pode ser usada quando você precisa aumentar o zoom no conteúdo em uma área da tela e, em seguida, diminuir o zoom em outra.

Mixing / Breeding incluem a pressão simultânea com dois dedos localizados próximos ou a alguma distância um do outro, com sua posterior separação ou convergência. O gesto termina levantando seus dedos acima da superfície da tela. Normalmente, o resultado dessa mecânica é aumentar ou diminuir o zoom.

Toque uma vez com dois dedos - pressionar, que é realizado com dois dedos ao mesmo tempo. Isso é seguido por um levantamento imediato de ambos os dedos. O gesto geralmente serve para diminuir o zoom.

Arrastar, arrastar ou deslizar com dois dedos - esses gestos requerem o uso de dois dedos, quando o usuário toca a tela, "desliza" sobre ela e os levanta acima da tela. Os gestos podem ser usados \u200b\u200bpara selecionar vários itens, inclinar ou rolar.

Mantenha pressionado e arraste com dois dedos realizado pressionando com dois dedos na área da tela, segurando-os e movendo-os para a área desejada da tela, levantando ainda mais acima da superfície de toque. Este mecanismo tátil é eficaz ao trabalhar com uma interface que precisa reorganizar os itens da lista ou a ordem dos ícones e imagens.

Clique duas vezes com dois dedos realizada por duas pressões curtas consecutivas com dois dedos na tela. Basicamente, esse gesto serve para diminuir o zoom de uma imagem.

Virar ou rotação usado no trabalho com animação e imagens em dispositivos móveis. É necessário pressionar com dois dedos na tela de lados diferentes do objeto central e, girando os dedos em uma órbita ao redor do objeto, girá-lo. O gesto termina tradicionalmente - afastando os dedos da tela de toque. A rotação também é útil ao trabalhar com um mapa do Google, quando ele precisa ser girado horizontalmente para maior conveniência.

Quase todo o conceito de trabalhar com interfaces em dispositivos de toque é baseado no uso de gestos. Com uma área de tela móvel suficientemente limitada, os designers e desenvolvedores precisam usar a mecânica tátil da maneira mais racional e razoável. Para interagir efetivamente com um dispositivo, os gestos devem ser intuitivos e associados à atividade tátil associada.

Vetor de mecânica tátil

Abaixo está uma coleção gratuita de conjuntos de gestos vetoriais. Eles são adequados não apenas para desenvolver o design de interfaces de dispositivos multitoque e promover aplicações Móveis, mas também pode ser usado como ícones, ponteiros, etc.

Os dispositivos Android usam uma tela sensível ao toque. Para usuários que estão acostumados com controles de botão de pressão, pode ser difícil converter para operação com tela de toque.

O controle por botão de pressão usa um teclado e mouse, enquanto a tela de toque é controlada com os dedos ou com uma caneta.

Por um lado, os controles de gestos parecem um pouco primitivos. Por outro lado, os gestos do Android abrem novos horizontes para vários programas, o que seria muito difícil ou impossível de implementar na versão de botão.

O controle da tela de toque é que ela responde ao toque com seus dedos ou caneta e, se necessário, repete esses movimentos com exatidão. Se o dispositivo reconhece toques ou movimentos como comandos, eles são executados exatamente como comandos. A tarefa do usuário é simples - dominar o pressionamento da tela de toque para que conduzam à execução daqueles comandos que serão compreendidos pelo dispositivo e que o usuário precisa.

Vejamos as sete técnicas principais usadas em telas sensíveis ao toque. Os gestos do Android podem ser os seguintes:

1. Toque (empurre)

Tocar (ou pressionar) é a ação principal mais comumente usada em telas sensíveis ao toque.

O toque é necessário em muitos casos:

• para habilitar funções,
• para executar qualquer aplicativo,
• ativação deste ou daquele parâmetro, elemento,
• para selecionar o ícone desejado ou o parâmetro correspondente na lista,
• para inserir texto
• etc.

O toque é simples. É fácil tocar com o dedo ou a caneta no local desejado da tela, por exemplo, tocar no ícone do aplicativo desejado.

Para inserir o texto, basta tocar no campo necessário, o teclado virtual aparecerá automaticamente, você pode digitar o texto tocando nas teclas com os caracteres desejados.

Lembro-me involuntariamente de quantos anos atrás fui ao terminal, apertei os botões do terminal para colocar dinheiro celular... Em geral, fiz tudo como de costume, mas nada aconteceu no terminal, o terminal não respondeu aos botões. Então fiz 3 ou 4 abordagens ao terminal em dias diferentes com resultado zero. Num dia bom, um jovem, que estava na fila do terminal atrás de mim, disse: “E se você apertar o dedo na tela? E aqui está, felicidade: pressionei meu dedo na tela e o terminal começou a responder ao pressionar, deu tudo certo. Foi assim que encontrei a tela de toque pela primeira vez.

2. Toque duplo

O toque duplo (ou toque duplo) é usado para fazer zoom rapidamente, para iniciar alguns aplicativos e outras ações.

Para alterar a escala, por exemplo, ao visualizar uma página da web, você precisa tocar rapidamente na tela 2 vezes com um intervalo mínimo. Para retornar ao estado anterior, você precisa tocar duas vezes na tela novamente.

Um toque duplo ativa a opção correspondente, um segundo toque duplo cancela a mesma opção.

Se você comparar o Android com o Windows, tocar duas vezes no Android é algo semelhante a clicar duas vezes no botão esquerdo do Windows.

3. Toque sem soltar

Pressionar (tocar) enquanto segura é usado para abrir opções adicionais, se houver.

Você precisa tocar na área desejada da tela e segurar o dedo por alguns segundos. No momento de tocar e segurar, nada acontece, e a princípio isso pode causar alguma surpresa. Mas assim que você soltar o dedo, um menu adicional aparecerá imediatamente ou outra ação ocorrerá como resultado de tocar e segurar.

Esta ação é muito semelhante a clicar com o botão direito do mouse no Windows, quando após clicar com o botão direito em um objeto, um chamado menu de contexto aparece com opções de objeto adicionais.

4. Deslize (deslize)

Deslizar também pode ser chamado de deslizar ou rolar. Tendo tocado levemente a tela, sem soltar o dedo, deslize o dedo de cima para baixo, de baixo para cima, da esquerda para a direita ou da direita para a esquerda, ou seja, como se para tirar a “poeira da tela” na direção desejada.

Deslizar (rolar) é usado para alternar entre as páginas na área de trabalho, para rolar por várias listas, etc. Dependendo da configuração de bloqueio de tela do Android, pode ser que deslizar obliquamente (diagonalmente) signifique desbloquear a tela - tal deslizar oblíquo também é aplicado, e não apenas os movimentos de baixo para cima ou da direita para a esquerda.

Quando precisei enviar uma mensagem em russo pela primeira vez no meu smartphone, para isso tive que mudar o layout de inglês para russo no teclado virtual. Tentei todas as opções, até entrei nas configurações de idioma - não funcionou de forma alguma: o layout em inglês estava "enraizado no lugar". Fui solicitado a apenas acenar ligeiramente com o dedo sobre a barra de espaço da esquerda para a direita. Aliás, vi a inscrição "English" na barra de espaço do teclado virtual, apertei, mas não adiantou. E assim que ela acenou com o dedo sobre o espaço, o layout mudou imediatamente para o russo. Aqui está, deslize, funciona!

5. Arraste (arraste e solte)

Arrastar e soltar (ou arrastar e soltar) é necessário para mover aplicativos pela tela e para mover pastas, ícones e muito mais.

Você precisa tocar no elemento desejado, esperar que ele seja selecionado e, em seguida, sem soltar o dedo, mova este elemento (pasta, arquivo, ícone, etc.) para o ponto desejado na tela de toque.

6. Beliscando e abrindo os dedos

Uma função simples e útil para alterar a escala do que é exibido na tela: imagem, texto, mapa, diagrama, etc. Você pode aumentar a escala e, se necessário, reduzi-la novamente.

Para fazer isso, você precisa tocar na tela com dois dedos (ou vários) ao mesmo tempo e, sem levantar os dedos da tela, afaste-os. A escala aumentará proporcionalmente.

Se você tocar na tela com dois dedos (ou vários) e, sem levantá-los da tela, aproxime-os, a escala diminuirá.

7. Alterar a orientação da tela

A orientação retrato (vertical) é conveniente para a leitura de livros. A orientação horizontal (horizontal) é boa para assistir a vídeos e vários mapas. Tudo isso, claro, não é para todos, cada um escolhe por si qual orientação é melhor neste ou naquele caso.

Para mudar a orientação de um para o outro, basta girar o smartphone. Neste caso, a função de rotação da tela deve ser ativada nos parâmetros da tela. Se a função for desativada, a imagem não será girada.

Estas estão longe de todas as variantes possíveis de gestos, mas talvez as mais básicas e frequentemente utilizadas. Outros gestos, como girar em um círculo, etc. são usados \u200b\u200bcom menos frequência e esses gestos podem não funcionar em todos os programas. Via de regra, esses gestos são suficientes para todas as ocasiões, ou quase tudo.

Eles são dominados com facilidade e rapidez, primeiro você precisa praticar um pouco. Os gestos são logicamente compreensíveis, você espera exatamente essa ação deles. A menos que tocar e segurar seja um pouco anormal. O resto dos gestos são intuitivos. Portanto, eles são fáceis de lembrar.

P.S. Confira outros materiais:

Obtenha os artigos de informática mais recentes diretamente na sua caixa de entrada.
Já mais 3.000 assinantes

.

Esses dias não são novidade, você pode vê-los em qualquer lugar Há muitos anos os utilizamos em caixas eletrônicos e terminais de pagamento. Em alguns supermercados, você pode pedir diferentes refeições pressionando os botões do menu de toque. Portanto, em geral, a tela sensível ao toque do iPad não deve ser desconhecida para você.

Mas usar o iPad requer mais do que apenas um toque. Você pressiona, toca duas vezes, pressiona e mantém os botões, passa o dedo e arrasta ícones, desliza os dedos pela tela. Que tipo de movimento você fará e quando - depende do que você deseja fazer. Já descrevemos os principais, este artigo irá ajudá-lo a descobrir isso no iPad.

Às vezes, pode haver problemas com as telas sensíveis ao toque de dispositivos móveis. Eles podem ser causados \u200b\u200bpor uma falha de hardware; nesse caso, você precisa entrar em contato com um centro de serviço, onde poderá sempre consertar seu gadget favorito.

Você aprenderá como fazer a dança dos dedos para que o iPad responda a todos os seus comandos. Você também dominará alguns atalhos de teclado e aprenderá como usar os dedos para encontrar coisas no iPad. Portanto, estique as mãos e comece.

O "cérebro" do iPad é sistema operacional - inteligente o suficiente para responder a uma série de toques diferentes.

Os movimentos dos dedos dependem do que você deseja fazer. As seguintes ações são possíveis.

• Clicando. Use a ponta do dedo para pressionar levemente o ícone, atalho, título da música ou controle que você vê na tela. O iPad não é uma calculadora tosca, então você não precisa pressionar muito, apenas um leve toque.
• Arraste e solte. Pressione o dedo contra o vidro e deslize-o para o lado para navegar para diferentes partes da tela. Isso permite que você controle os controles de volume e navegue pelas fotos. Arrastar com dois dedos move a janela na janela (por exemplo, a janela flutuante que aparece na janela do Facebook quando você abre sua lista de amigos).
• Movendo. Mover é semelhante a arrastar, exceto que é usado para apenas um controle - o botão Desbloquear / Confirmar. É na "trilha" onde você move o controle deslizante para tirar o iPad do modo de espera ou confirmar se ele está completamente desligado.
• Rolando. Deslize a tela para cima ou para baixo de forma fácil e rápida e navegue na página da web ou lista de músicas na direção de deslizar. Quanto mais rápido você rolar, mais rápido a tela rola. Em um álbum de fotos, deslize rapidamente de um lado para o outro para alternar as imagens na tela.
• Apertando e abrindo os dedos. Para ampliar parte de uma imagem, documento ou página da web, coloque o polegar e o indicador juntos, coloque-os na tela e, em seguida, afaste-os. Para diminuir o zoom, coloque seus dedos abertos na tela e junte-os.
• Toque duplo. Duas prensas consecutivas são necessárias em várias situações. Primeiro, é uma maneira rápida de ampliar uma foto ou página da web. Em segundo lugar, se você estiver assistindo a um vídeo, permite alternar a proporção entre largura e altura. No modo de tela inteira (ilustrado à esquerda), as bordas do quadro são cortadas. A visualização widescreen (ilustrada à direita) é a preferida dos espectadores porque faz com que o filme tenha a aparência exata do diretor.

Ao desenvolver aplicativos para Android e iPhone com iPad (IOS) usando apenas tecnologias da web, mais cedo ou mais tarde cada desenvolvedor enfrenta a questão de implementar e usar ações multitoque complexas em seu jogo ou aplicativo, como deslizar, pinçar, bem como processar um toque longo (longo toque com um dedo sem movimento) e arraste "n" e solte.

Neste artigo, veremos maneiras de lidar com eventos de toque de complexidade variável em um evento Javascript "ah, sem bibliotecas de terceiros (basta usar jQuery min).

Vou fazer uma reserva imediatamente que usarei jQuery apenas para desativar o comportamento do navegador padrão para um evento. Não gosto desta biblioteca, então tudo será escrito em Vanilla JS.

Então, vamos começar com a teoria e realmente tocar em quais eventos devem ser usados \u200b\u200bao criar um aplicativo ou jogo.

No total, são usados \u200b\u200b3 eventos principais:

touchstart - tocou na tela

toque final - O dedo foi removido

mover-se - Mova o dedo

Se para obter o elemento sobre o qual o mouse se moveu ou se moveu bastava chamar event.target, então com os eventos de toque nem tudo é tão simples.

Cada toque deve ser identificado. E para isso, são utilizadas listas:

toques - Todos os dedos que estão interagindo com a tela ("tocaram" a tela)

targetTouches - Lista de dedos que interagem com o elemento

alterado Toques - Lista de dedos que participam do evento atual. Se, por exemplo, este for um evento touchend, a lista conterá o dedo que foi removido (mesmo se os outros 4 dedos ainda estiverem na tela).

Para facilitar a compreensão, esta é a situação:

Eu coloco um dedo na tela e todas as 3 listas têm um item.

Coloquei o segundo dedo e agora o toques tem 2 elementos, o targetTouches terá 2 elementos, se eu colocar o segundo dedo no mesmo elemento HTML do primeiro, e o changesTouches, por sua vez, terá apenas o segundo dedo, pois foi ele quem causou o evento.

Se eu colocar 2 dedos na tela de uma vez, então o changedTouches terá 2 elementos (um para cada dedo).

Se eu começar a mover meus dedos pela tela, apenas a lista de toques alterados diminuirá. O número de elementos que ele conterá será igual ao número de dedos envolvidos no movimento (pelo menos 1).

Se eu levantar meu dedo, as listas de toques, targetTouches estão vazias por um elemento, e changedTouches conterá o dedo, uma vez que disparou o evento (touchend)

Quando eu removo o último dedo, as listas de toques, targetTouches não conterão nada, e changedTouches terá informações sobre esse mesmo dedo.

Agora é hora de descobrir exatamente quais informações podemos obter sobre o dedo:

identificador - ID único de toque

alvo - O próprio objeto em que tocamos

PageX, PageY - Coordenadas de toque na página

Você pode ver o ID único de um único toque ligando event.touches.identifier, mas no IOS, se não me engano, você precisa fazer isso event.originalEvent.touches.identifier.

Bem, o que eu já ensinei a você, agora é a hora de passar à prática.

Antes de começarmos, existem algumas coisas que você precisa aprender. Em cada jogo, aplicativo que você fará no Android e IOS, você deve desativar a reação padrão do componente WebView aos eventos. Para isso, conectamos o jQuery (eu não poderia fazer o que as funções fazem no Pure JS event.preventDefault () e event.stopPropagation ()).

Portanto, você precisa colocar o seguinte em seu código JS:

event.preventDefault ();
event.stopPropagation ();

), falso);

event.preventDefault ();
event.stopPropagation ();
/ * Seu código de manipulação de eventos aqui * /
), falso);

event.preventDefault ();
event.stopPropagation ();
/ * Seu código de manipulação de eventos aqui * /
), falso);

Isso deve ser feito, porque muitos dispositivos sem isso têm freios e falhas significativas e animação brusca.

Distraído. Vamos continuar.

Com o conhecimento adquirido, vamos descrever todas as interações básicas de toque com a tela e os elementos.

Toque

Este evento é executado simplesmente quando colocamos nosso dedo na tela e o removemos.

var myclick \u003d event.targetTouches; / * Seu código * /
}
), falso);

Por exemplo, em uma variável myclick conterá seu toque.

Toque longo

Embora não seja frequente, há situações em que, em um aplicativo ou jogo para celular, você precisa capturar a ação de um toque longo em um objeto. Vamos dar uma olhada em como fazer um toque longo em Javascript para telas sensíveis ao toque de smartphones móveis e, claro, tablets.

Implementação 1:

var ldelay;
var betw \u003d ();
document.addEventListener ("touchstart", função (evento) (
event.preventDefault ();
event.stopPropagation ();
ldelay \u003d nova data ();
betw.x \u003d event.changedTouches.pageX;
betw.y \u003d event.changedTouches.pageY;
), falso);
/ * Solte o dedo * /
document.addEventListener ("touchend", função (evento) (
var pdelay \u003d new Date ();
if (event.changedTouches.pageX \u003d\u003d betw.x &&
event.changedTouches.pageY \u003d\u003d betw.y &&
(pdelay.getTime () - ldelay.getTime ())\u003e 800) (
/ * Seu código aqui * /
}
), falso);

Esta é a primeira implementação javascript do Long Tap. A lógica é a seguinte: pegamos o toque, medimos o tempo desse evento, pegamos o release, medimos o tempo do release, subtraímos o primeiro tempo do segundo e verificamos se a posição do dedo na tela mudou. Se o dedo estiver no mesmo lugar e mais de 800 milissegundos se passaram, executamos ações de toque longo.

Agora vamos decompor a segunda implementação com uma lógica ligeiramente diferente:

Implementação 2:

var lttimer;
document.addEventListener ("touchstart", função (evento) (
event.preventDefault ();
event.stopPropagation ();
lttimer \u003d setTimeout (longTouch, 800);
), falso);
document.addEventListener ("touchmove", função (evento) (
event.preventDefault ();
event.stopPropagation ();
clearTimeout (lttimer);
), falso);
document.addEventListener ("touchend", função (evento) (
clearTimeout (lttimer);
), falso);
function longTouch () (/ * Seu código * /)

A implementação acima do evento Long Tap em Javascript é mais correta e é mais frequentemente usada em aplicativos móveis. Sua principal diferença em relação à implementação anterior é que não espera a liberação do dedo e, caso o dedo não se mova, aciona o evento Long Tap, que deve ser colocado na função longTouch. longTouch.

Deslize

É hora de falar sobre paginação na tela de um smartphone ou tablet. Deslizar é bastante comum na construção de aplicativos principalmente móveis, portanto, mais cedo ou mais tarde, todo criador de aplicativos terá que lidar com isso.

Se você não quiser se incomodar e precisar apenas da funcionalidade de deslizar no aplicativo móvel, você pode ler sobre isso no final da página.

Se você é um desenvolvedor hardcore - vamos lá!

Implementação 1:

var initialPoint;
var finalPoint;
document.addEventListener ("touchstart", função (evento) (
event.preventDefault ();
event.stopPropagation ();
initialPoint \u003d event.changedTouches;
), falso);
document.addEventListener ("touchend", função (evento) (
event.preventDefault ();
event.stopPropagation ();
finalPoint \u003d event.changedTouches;
var xAbs \u003d Math.abs (initialPoint.pageX - finalPoint.pageX);
var yAbs \u003d Math.abs (initialPoint.pageY - finalPoint.pageY);
if (xAbs\u003e 20 || yAbs\u003e 20) (
if (xAbs\u003e yAbs) (
if (finalPoint.pageX< initialPoint.pageX){
/ * DESLIZE PARA A ESQUERDA * /)
outro (
/ * DESLIZA PARA A DIREITA * /)
}
outro (
if (finalPoint.pageY< initialPoint.pageY){
/ * DESLIZE PARA CIMA * /)
outro (
/ * DESLIZE PARA BAIXO * /)
}
}
), falso);

Esta é a nossa primeira implementação de swipe em Javascript. A peculiaridade dessa implementação é que o evento é contabilizado como um deslize ao soltar o dedo participando do evento. Este golpe pode ser usado em algumas tarefas. Não se esqueça de desligar o comportamento padrão do navegador para eventos de toque nesta e em muitas outras medidas (eu escrevi sobre isso acima), eu geralmente não as escrevo nos exemplos dados, mas não se esqueça.

E agora vamos dar uma olhada em outra - implementação clássica, quando o deslize precisa ser lido em tempo real, por exemplo, ao virar uma página:

var startPoint \u003d ();
var nowPoint;
var ldelay;
document.addEventListener ("touchstart", função (evento) (
event.preventDefault ();
event.stopPropagation ();
startPoint.x \u003d event.changedTouches.pageX;
startPoint.y \u003d event.changedTouches.pageY;
ldelay \u003d nova data ();
), falso);
/ * Capte o movimento com o dedo * /
document.addEventListener ("touchmove", função (evento) (
event.preventDefault ();
event.stopPropagation ();
var otk \u003d ();

otk.x \u003d nowPoint.pageX-startPoint.x;
/ * Processar os dados * /
/*Por exemplo*/
if (Math.abs (otk.x)\u003e 200) (
if (otk.x<0){/*СВАЙП ВЛЕВО(ПРЕД.СТРАНИЦА)*/}
if (otk.x\u003e 0) (/ * SWIPE RIGHT (PRÓXIMA PÁGINA) * /)
startPoint \u003d (x: nowPoint.pageX, y: nowPoint.pageY);
}
), falso);
/ * Solte o dedo * /
document.addEventListener ("touchend", função (evento) (
var pdelay \u003d new Date ();
nowPoint \u003d event.changedTouches;
var xAbs \u003d Math.abs (startPoint.x - nowPoint.pageX);
var yAbs \u003d Math.abs (startPoint.y - nowPoint.pageY);
if ((xAbs\u003e 20 || yAbs\u003e 20) && (pdelay.getTime () - ldelay.getTime ())<200) {
if (xAbs\u003e yAbs) (
if (nowPoint.pageX< startPoint.x){/*СВАЙП ВЛЕВО*/}
mais (/ * SWIPE RIGHT * /)
}
outro (
if (nowPoint.pageY< startPoint.y){/*СВАЙП ВВЕРХ*/}
senão (/ * DESLIZE PARA BAIXO * /)
}
}
), falso);

Nesse método, fomos um pouco diferente e usamos parcialmente o princípio da primeira implementação. Logicamente, esse é um golpe um pouco mais complexo. Onde / * Processa os dados * / é comentado, você deve usar as coordenadas do dedo que passa. Por exemplo, pode ser uma animação de virar a página e quanto mais à esquerda do dedo, mais a página é virada. Por exemplo, estamos naquela parte do ouvinte de evento mover-se rastreou apenas a coordenada x, y - aparafusada de forma semelhante. Em uma variável otk.x a posição atual do dedo em relação ao ponto em que tocou pela primeira vez no eran é armazenada. Se o dedo estiver à esquerda deste ponto, então a variável tem valor negativo, se à direita é positiva.

Por exemplo, definimos uma condição quando o dedo se move mais de 200 pixels para a esquerda ou direita do ponto de toque - contamos o toque. Para que serve? Por exemplo, assim que o usuário tocou e começou a mover o dedo, mostre a ele uma virada de página suave que segue seu dedo, e assim que o dedo ultrapassar 200 pixels, a animação final é executada e a página é virada. Esta é uma das maneiras possíveis de usar esse golpe.

Mas por que então o evento toque final você pergunta ... Às vezes, o usuário não quer mover o dedo uma certa distância para deslizar e em muitos aplicativos deslizar é usado como uma reação para mover rapidamente o dedo pela tela por uma curta distância. Isso é o que aplicamos no listener do último evento.

Arraste e solte

Freqüentemente, em interfaces de aplicativos e em jogos, você deve arrastar um dos elementos com o dedo até um determinado lugar. Vamos fazer isso em javascript para telas sensíveis ao toque. Vamos começar:

var obj \u003d document.getElementById ("sat");
/ * Catch touch * /
obj.addEventListener ("touchstart", função (evento) (
if (event.targetTouches.length \u003d\u003d 1) (
var touch \u003d event.targetTouches;
touchOffsetX \u003d touch.pageX - touch.target.offsetLeft;
touchOffsetY \u003d touch.pageY - touch.target.offsetTop;
}
), falso);
/ * Mova o objeto * /
obj.addEventListener ("touchmove", função (evento) (
if (event.targetTouches.length \u003d\u003d 1) (
var touch \u003d event.targetTouches;
obj.style.left \u003d touch.pageX-touchOffsetX + "px";
obj.style.top \u003d touch.pageY-touchOffsetY + "px";
}
), falso);

Como você pode ver, isso não é todo o código, até agora conseguimos arrastar sem soltar "a. Você provavelmente já percebeu que o movimento do elemento é feito basicamente com parâmetros css esquerda e topo... Em vez dessas duas linhas, que são responsáveis \u200b\u200bpor mover o objeto pela tela, você pode colocar:

obj.style.WebkitTransform \u003d "translate (" + (touch.pageX-touchOffsetX) + "px," + (touch.pageY-touchOffsetY) + "px)";

Essa. uso CSS3, mas no meu caso não percebi ganho de performance, portanto melhor topo e esquerda... Com este código, você pode mover um objeto pelo campo, mas liberá-lo em um local específico não será contado. Para implementar isso, adicione um manipulador touchend ao objeto com o código apropriado dentro:

var tarobj \u003d document.getElementById ("dro");
obj.addEventListener ("touchend", função (evento) (
if (event.changedTouches.length \u003d\u003d 1) (
var tarWidth \u003d tarobj.offsetWidth;
var tarHeight \u003d tarobj.offsetHeight;
var tarX \u003d tarobj.offsetLeft;
var tarY \u003d tarobj.offsetTop;
e se (
(event.changedTouches.pageX\u003e tarX) &&
(event.changedTouches.pageX< (tarX + tarWidth)) &&
(event.changedTouches.pageY\u003e tarY) &&
(event.changedTouches.pageY< (tarY + tarHeight))){
/ * Estamos em um objeto tarobj * /
}
}
), falso);

Para que tudo funcione, especifique seu objeto em uma variável tarobj e você será feliz.

Pitch

É hora de lembrar a famosa beliscada que Steve Jobs mostrou pela primeira vez quando apresentou o primeiro iPhone. É esse movimento de dois dedos entre si ou um do outro que é chamado de beliscão. Normalmente, esse gesto é usado para aumentar ou diminuir algo.

No exemplo abaixo, os pontos principais são marcados com comentários (para que o código não se funda em um mingau de trigo completo):

/ * Defina algumas variáveis \u200b\u200b* /
var objzoom \u003d document.getElementById ("dro");
escala de var \u003d falso;
var dist \u003d 0;
var fator_escala \u003d 1,0;
var curr_scale \u003d 1.0;
var max_zoom \u003d 8.0;
var min_zoom \u003d 0,5
/ * Escreva uma função que determina a distância entre os dedos * /
distância da função (p1, p2) (
return (Math.sqrt (Math.pow ((p1.clientX - p2.clientX), 2) + Math.pow ((p1.clientY - p2.clientY), 2)));
}
/ * Pegue o começo do toque * /
objzoom.addEventListener ("touchstart", function (evt) (
evt.preventDefault ();
var tt \u003d evt.targetTouches;
if (tt.length\u003e \u003d 2) (
dist \u003d distância (tt, tt);
escala \u003d verdadeiro;
) outro (
escala \u003d falso;
}
), falso);
/ * Capture o zoom * /
objzoom.addEventListener ("touchmove", function (evt) (
evt.preventDefault ();
var tt \u003d evt.targetTouches;
if (escala) (
curr_scale \u003d distance (tt, tt) / dist * scale_factor;
objzoom.style.WebkitTransform \u003d "scale (" + curr_scale + "," + curr_scale + ")";
}
), falso);
/ * Pegue o fim do toque * /
objzoom.addEventListener ("touchend", function (evt) (
var tt \u003d evt.targetTouches;
if (tt.length< 2) {
escala \u003d falso;
if (curr_scale< min_zoom) {
scale_factor \u003d min_zoom;
) outro (
if (curr_scale\u003e max_zoom) (
scale_factor \u003d max_zoom;
) outro (
scale_factor \u003d curr_scale;
}
}
objzoom.style.WebkitTransform \u003d "scale (" + scale_factor + "," + scale_factor + ")";
) outro (
escala \u003d verdadeiro;
}
), falso);

No exemplo, usamos um objeto com id para o teste dro, você pode usar seu objeto gravando-o em uma variável objzoom... Nas variáveis, você pode alterar os dados, por exemplo, zoom máximo ou mínimo.

Deslizando imagens e HTML

Já descrevemos acima como fazer um deslize com base no qual você pode deslizar imagens ou seus dados em código HTML. No entanto, alguns podem não ficar satisfeitos com isso, e se você está entre aqueles que desejam obter o resultado mais fácil e rápido sem entrar em detalhes, esta subseção é para você.

Em primeiro lugar, notamos um desenvolvimento JS gratuito chamado Fotorama, que é muito funcional e útil para desenvolvedores móveis que desejam usar slides.

Há também um belo controle deslizante de imagem.

Além de criar manualmente um shell de toque para um aplicativo ou jogo, você pode usar uma estrutura. Aqui está uma lista de estruturas Sencha Touch, jQ Touch e jQuery Mobile populares neste tópico.

A última questão é a questão da compatibilidade de tudo isso com as plataformas móveis. Bem, toque em suporte Android 2.3-4.X e IOS. Mas o multitoque é compatível com todos, exceto Android 2.3.

Não se esqueça de que vale a pena colocar manipuladores em objetos HTML quando eles já forem conhecidos, ou seja, no evento window.onload ou DOMContentLoaded.

Se você tem algo a acrescentar ao artigo - escreva nos comentários.