-
Leituras: 274

Explorámos o potencial do Canvas HTML5 e as primeiras experiências prometem!

Apesar de já estar entre nós há alguns anos, foi desde 2015 que comecei a ver uma maior proliferação do uso do Canvas HTML5. Há cada vez mais developers a apostarem nesta tecnologia e têm bons motivos para fazê-lo. Com o uso do Javascript, é possível desenhar linhas, formas geométricas, texto e gradientes. Outra característica importante é que permite criar animações, o que o torna numa ferramenta essencial para os UX designers, que por sua vez procuram criar aplicações Web mais interativas.

No passado já tínhamos feito algumas experiências, mas com vários estudos a considerarem que será uma das grandes tendências para 2017, sentimos que tinha chegado a hora de aprofundarmos o nosso know-how e mergulharmos mais a fundo no vasto manto de possibilidades que o Canvas HTML5 tem para oferecer. Começamos então a desenvolver algumas animações básicas que respondessem aos movimentos do cursor do rato, de forma a proporcionar alguma interatividade com os utilizadores.

Eis algumas das experiências que "cozinhámos" no nosso laboratório.

1. Canvas Mouse Bubbles

Nesta animação, criamos um efeito de bolhas flutuantes que nascem a partir das coordenadas do cursor do rato e que se elevam até se desvanecerem. Cada bolha tem um tempo de vida de 1000 milisegundos e é com base neste fator que a sua opacidade é calculada, desde o momento do seu nascimento até à sua morte.

2. Canvas Moving Dots

Esta experiência acaba por ser uma variação do Canvas Mouse Bubbles, mas neste caso, a animação é iniciada logo que a página é carregada. O utilizador continua a poder interagir com a animação, fazendo as bolhas aumentarem sempre que se aproximam do cursor do rato.

3. Canvas Triangles Background

De todas, esta é a animação mais complexa que produzimos. Inspirados pela versatilidade do Motion Graphics, quissemos descobrir se seria possível criar animações mais elaboradas, recorrendo apenas a tecnologias baseadas na Web. A principal vantagem relativamente a um vídeo é que podemos programar a animação de forma a que o utilizador possa interagir com ela. Neste caso, a cor dos limites dos triângulos que se encontram nas proximidades do cursor e a sua opacidade alteram-se à medida que movemos o cursor do rato pelo canvas.

Subscreva a nossa newsletter

Receba atualizações sobre os nossos projetos e serviços