Trabalhando gestos com Hammer.js

Hammer é uma biblioteca JavaScript que dispara eventos para os gestos realizados nas suas aplicações com HTML+JS. O Hammer.js é simples de usar, como muitas bibliotecas ele usa o esquema “jQuery-like”.

Como utilizar o hammer.js?

Para utilizar a biblioteca de gestos precisamos dos seguintes passos, carregar a biblioteca do Hammer disponível no link: http://eightmedia.github.io/hammer.js/.

Além de encontrar a fonte lá você vai encontrar exemplos de como usar a biblioteca. Com os arquivos importados agora vamos ao código, inicialmente selecionamos o elemento o qual vamos “ouvir” os gestos e depois especificamos o gesto que vamos acompanhar.

Exemplo:

var element = document.getElementById('box');
var hammertime = Hammer(element).on("swipe", function(event) {
        	alert('swipe!');
    	});Code language: JavaScript (javascript)

No código acima temos um exemplo que acompanha o movimento de swipe, quando realizado ele dispara um alert. E o que podemos fazer com isso?

Slide de fotos, invocar menus, ações em jogos, mudança de conteúdo. Podemos notar que no código acima recebemos um evento na função chamada pelo Hammer, usaremos o console.log para inspecionar esse item.

Ele retorna um objeto com uma séria de propriedades, no final da lista temos algumas propriedades importantes:

  • type: tipo do evento timeStamp
  • target: onde foi realizado o evento
  • srcElement: O elemento responsável por chamar o evento
  • gesture: um objeto que capta as informações sobre o “toque” realizado pelo usuário esse item detalhamos a seguir.

No objeto gesture temos como pegar a angulação que foi realizado o toque, a velocidade x e y, escala, distância, rotação e direção do toque. É muito informação que pode ser trabalhada.

Exemplo prático com hammer.js

Agora vamos a um evento mais prático:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hammer Tutorial</title>
    </head>
    <body>
        <div id="box">
        	<nav id="menu" class="hide">
        		<ul>
        			<li><a href="#">item 1</a></li>
        			<li><a href="#">item 2</a></li>
        			<li><a href="#">item 3</a></li>
        			<li><a href="#">item 4</a></li>
        		</ul>
        	</nav>
        </div>

        <script type="text/javascript" src="js/hammer.min.js"></script>
        <script type="text/javascript">
        	var element = document.getElementById('box');
			var menu = document.getElementById("menu");

        	Hammer(element).on("swipe", function(event) {
        		//verificamos qual o valor da propriedade direction caso "right"
        		// ele adiciona o class ao menu active
        		// caso o valor do direction for "left" ele adiciona o class "left"
        		if(event.gesture.direction == "right"){
        			menu.className = "active";	
        		}else if(event.gesture.direction == "left"){
        			menu.className = "hide";
        		}
    		});
        </script>
    </body>
</html>Code language: HTML, XML (xml)

No exemplo acima no nosso elemento com id box, adicionamos uma tag nav com id menu esse item que vamos exibir e esconder. No código JavaScript no final do nosso arquivo verificamos no objeto gesture qual o valor do direction, caso right adicionamos o class active, caso contrario adicionamos o class hide a transição fazemo-nos com CSS3 o código mostro a seguir:

#box {
	padding: 0;
	margin: 10%;
	width: 80%;
	height: 300px;
	background-color: green;
	display: block;
	position: relative;
	overflow: hidden;
}

#menu {
	width: 200px;
	height: 100%;
	background-color: yellow;
	margin: 0;
	position:absolute;
	transition:  left 300ms linear;
}

#menu.hide{
	left: -250px;
}

#menu.active{
	left:0;
}Code language: CSS (css)

Um exemplo simples, mas muito usado em muitas aplicações. O exemplo completo desse tutorial você pode conferir no GitHub: https://github.com/fellyph/Tutorial-bbUI/tree/master/hammer/www


Publicado

em

, ,

por

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *