 |
|
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Animação, Animações, Técnicas de Animação |
|
Como criar animações em HTML5 + JavaScript usando o método requestAnimationFrame() do objeto windowQuantidade de visualizações: 1756 vezes |
|
|
O método requestAnimationFrame() foi introduzido pela W3C (World Wide Web Consortium) há alguns anos, como forma de padronizar as alternativas que os navegadores mais populares tinham encontrado para tornar as animações mais suaves e sincronizadas com as taxas de redesenho de seus elementos gráficos, evitando o efeito "pisca-pisca" provocado pelos métodos setTimeout() e setInterval() do objeto window. Antes da padronização, porém, o navegador Firefox criou o método window.mozRequestAnimationFrame, o navegador Google Chrome criou o método window.webkitRequestAnimationFrame() e, para tornar as coisas mais complicadas ainda, o Internet Explorer (IE) veio e criou o método msRequestAnimationFrame(). Nem é preciso ser um gênio para imaginar a dor de cabeça que isso gerou, e a quantidade de código necessário para tratar cada navegador individualmente. No momento que escrevo esta dica, todos os navegadores dão suporte ao método window.requestAnimationFrame() da W3C. Dessa forma, a menos que esteja trabalhando com navegadores muito antigos, você não precisará se preocupar com as implementações proprietárias de cada um. Antes da chegada do método requestAnimationFrame(), tínhamos que fazer animações em JavaScript usando os métodos setTimeout() e setInterval(), definindo um tempo em milisegundos para a chamada de alguma função. Isso gerava um efeito desagradável aos olhos, pois nem sempre o tempo de atualização de nossas animações combinava com o momento de redesenho proporcionado pelo navegador. Por isso era comum o efeito "pisca-pisca". Ao usarmos o método requestAnimationFrame() nós obtemos duas vantagens: 1) A atualizações dos elementos de nossas animações é feita em sincronia com o redesenho proporcionado pelo navegador, a saber, 60 frames por segundo; 2) A função de callback definida em nossos códigos não é chamada quando a aba na qual a animação está contida estiver invisível, o que ajuda a poupar recursos e processamento. Então, depois dessa introdução teórica, vamos ver um exemplo. Veja a seguir um trecho de código que mistura e exibe as palavras de uma frase (que na verdade é apenas nomes de linguagens de programação) a cada vez que a função de callback é chamada pelo método requestAnimationFrame():
<!doctype html>
<html>
<head>
<title>Desenvolvimento de Games usando HTML5 e JavaScript</title>
</head>
<body>
<Canvas id="canvas" width="400" height="200"></Canvas>
<script type="text/javascript">
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// serve para controlarmos o redesenho do canvas
var contador = -1;
// função personalizada que permite embaralhar a
// ordem dos elementos de um array
function embaralhar(vetor) {
vetor.sort(() => Math.random() - 0.5);
}
// função que faz a animação
function animar(){
// é a primeira chamada ou já se passaram 50 frames
if((contador == -1) || (contador > 50)){
// a frase cujas palavras serão exibidas
var frase = "HTML5 Java Python Delphi C/C++ CSS";
// vamos dividir a frase em palavras
var partes = frase.split(" ");
// agora embaralhamos as palavras
embaralhar(partes);
// e as juntamos de volta
frase = partes.join(" ");
// limpamos toda a área de desenho
contexto.clearRect(0, 0, canvas.width, canvas.height);
// definimos a cor do texto
contexto.fillStyle = "blue";
// definimos o tamanho e nome da fonte
contexto.font = "15px Arial";
// finalmente escrevemos no canvas
contexto.fillText(frase, 30, 30);
// e zeramos o contador
contador = 0;
}
// aumentados o contador
contador++;
// e fazemos uma nova chamada à função animar()
window.requestAnimationFrame(animar);
}
// fazemos a primeira chamada à função animar()
window.requestAnimationFrame(animar);
</script>
</body>
</html>
Abra esta página HTML no seu navegador e veja o resultado. Você perceberá que as palavras da frase são embaralhadas e animadas de forma suave, sem o efeito "pisca-pisca" que mencionei anteriormente. Observe também que coloquei um contador para diminuir a velocidade da animação. Esse é um recurso que usamos com muita frequência na programação de jogos usando HTML5 e JavaScript. Mas há mais coisas sobre o método requestAnimationFrame(). Não deixe de acompanhar as dicas dessa seção para aprender mais. |
|
 Link para compartilhar na Internet ou com seus amigos: |
|
| Anúncio Patrocinado | |
|
|
C++ ::: Dicas & Truques ::: Strings e Caracteres |
Como retornar o tamanho de uma string em C++ usando a função size()Quantidade de visualizações: 7679 vezes |
|
Nesta dica mostrarei como podemos obter a quantidade de caracteres de uma string em C++ usando a função size() da classe string. Esta função não exige nenhum argumento e retorna um número inteiro contendo a quantidade de caracteres na string. Veja o código C++ completo para o exemplo:
#include <string>
#include <iostream>
using namespace std;
// função principal do programa C++
int main(int argc, char *argv[]){
// vamos declarar um objeto string
string frase = "Gosto de C++";
// vamos obter o tamanho da string
size_t tamanho = frase.size();
// e mostramos o resultado
cout << "A frase possui " << tamanho << " caracteres.";
cout << "\n" << endl;
system("PAUSE"); // pausa o programa
return EXIT_SUCCESS;
}
Ao executarmos este código C++ nós teremos o seguinte resultado: A frase possui 12 caracteres. |
Java ::: Dicas & Truques ::: Trigonometria - Funções Trigonométricas |
Como calcular a área de um círculo em Java dado o raio do círculoQuantidade de visualizações: 36185 vezes |
A área de um círculo pode ser calculada por meio do produto entre a constante PI e a medida do raio ao quadrado (r2). Comece analisando a figura abaixo: Sendo assim, temos a seguinte fórmula:  Onde A é a área, PI equivale a 3,14 (aproximadamente) e r é o raio do círculo. O raio é a medida que vai do centro até um ponto da extremidade do círculo. O diâmetro é a medida equivalente ao dobro da medida do raio, passando pelo centro do círculo e dividindo-o em duas partes. A medida do diâmetro é 2 * Raio. Veja agora um código Java completo que calcula a área de um círculo mediante a informação do raio:
package arquivodecodigos;
import java.util.Scanner;
public class Estudos{
public static void main(String[] args){
double area, raio;
Scanner in = new Scanner(System.in);
System.out.print("Informe o raio do círculo: ");
raio = Float.parseFloat(in.nextLine());
area = Math.PI * Math.pow(raio, 2);
System.out.println("A area do círculo de raio " +
raio + " é igual a " + area);
System.exit(0);
}
}
Ao executarmos este código nós teremos o seguinte resultado: Informe o raio do círculo: 5 A area do círculo de raio 5.0 é igual a 78.53981633974483 A circunferência é um conjunto de pontos que estão a uma mesma distância do centro. Essa distância é conhecida como raio. A circunferência é estudada pela Geometria Analítica e, em geral, em um plano cartesiano. O círculo, que é formado pela circunferência e pelos infinitos pontos que preenchem seu interior, é estudado pela Geometria Plana, pois ele ocupa um espaço e pode ter sua área calculada, diferentemente da circunferência. |
Delphi ::: Dicas & Truques ::: Data e Hora |
Como adicionar ou subtrair dias de uma data em Delphi usando a função IncDay()Quantidade de visualizações: 24342 vezes |
|
Em algumas situações precisamos adicionar ou subtrair dias de uma determinada data. Em Delphi isso pode ser feito com o auxílio da função IncDay() da unit DateUtils. Este função aceita um TDateTime e a quantidade de dias que queremos acrescentar ao TDateTime fornecido como argumento. O retorno será um novo TDateTime com a quantidade de dias acrescida. Veja um trecho de código no qual adicionamos 4 dias à data atual:
procedure TForm1.Button1Click(Sender: TObject);
var
hoje: TDateTime;
begin
// não esqueça de adicionar DateUtils ao seus uses
// vamos obter a data de hoje
hoje := Now;
// vamos exibir a data de hoje
ShowMessage('Hoje é: ' + DateToStr(hoje));
// vamos adicionar 4 dias à data de hoje
hoje := IncDay(hoje, 4);
// vamos exibir o resultado
ShowMessage('Daqui a 4 dias será: ' + DateToStr(hoje));
end;
É possível também usar a função IncDay() para substrair dias de uma data. Para isso só precisamos fornecer uma quantidade negativa de dias. Veja:
procedure TForm1.Button1Click(Sender: TObject);
var
hoje: TDateTime;
begin
// não esqueça de adicionar DateUtils ao seus uses
// vamos obter a data de hoje
hoje := Now;
// vamos exibir a data de hoje
ShowMessage('Hoje é: ' + DateToStr(hoje));
// vamos subtrair 5 dias da data de hoje
hoje := IncDay(hoje, -5);
// vamos exibir o resultado
ShowMessage('Há 5 dias era: ' + DateToStr(hoje));
end;
O valor padrão para o segundo argumento de IncDay() é 1. Para fins de compatibilidade, esta dica foi escrita usando Delphi 2009. |
Java ::: Desafios e Lista de Exercícios Resolvidos ::: Estruturas de Dados - Árvores Binárias e Árvores Binárias de Busca |
Exercícios Resolvidos de Java - Como pesquisar um valor em uma árvore binária de busca usando uma função recursivaQuantidade de visualizações: 3809 vezes |
|
Pergunta/Tarefa: Escreva uma função recursiva em Java que permite pesquisar um valor em uma árvore binária de busca (BST). Se o valor for encontrado, uma referência ao nó da árvore (um objeto da classe NoArvore, por exemplo) deverá ser retornado. Caso contrário, o valor null deverá ser retornado para indicar que não há nós na árvore contendo tal valor. Sua saída deverá ser parecida com: Informe um valor inteiro: 7 Informe um valor inteiro: 1 Informe um valor inteiro: 8 Informe um valor inteiro: 10 Informe um valor inteiro: 4 Informe o valor a ser pesquisado: 3 O valor não foi encontrado na árvore Informe um valor inteiro: 8 Informe um valor inteiro: 2 Informe um valor inteiro: 35 Informe um valor inteiro: 4 Informe um valor inteiro: 7 Informe o valor a ser pesquisado: 4 O valor foi encontrado na árvore Veja a resolução comentada deste exercício usando Java: Código para NoArvore.java:
package estudos;
public class NoArvore {
int valor; // valor armazenado no nó
NoArvore esquerdo; // filho esquerdo
NoArvore direito; // filho direito
// construtor do nó
public NoArvore(int valor){
this.valor = valor;
}
}
Código para ArvoreBinariaBusca.java:
package estudos;
public class ArvoreBinariaBusca {
private NoArvore raiz; // referência para a raiz da árvore
// método usado para inserir um novo nó na árvore
// retorna true se o nó for inserido com sucesso e false
// se o elemento
// não puder ser inserido (no caso de já existir um
// elemento igual)
public boolean inserir(int valor){
// a árvore ainda está vazia?
if(raiz == null){
// vamos criar o primeiro nó e definí-lo como a raiz da árvore
raiz = new NoArvore(valor); // cria um novo nó
}
else{
// localiza o nó pai
NoArvore pai = null;
NoArvore noAtual = raiz; // começa a busca pela raiz
// enquanto o nó atual for diferente de null
while(noAtual != null){
if(valor < noAtual.valor) {
pai = noAtual;
noAtual = noAtual.esquerdo;
}
else if(valor > noAtual.valor){
pai = noAtual;
noAtual = noAtual.direito;
}
else{
return false; // um nó com este valor foi encontrado
}
}
// cria o novo nó e o adiciona ao nó pai
if(valor < pai.valor){
pai.esquerdo = new NoArvore(valor);
}
else{
pai.direito = new NoArvore(valor);
}
}
return true; // retorna true para indicar que o novo nó
// foi inserido
}
// método que permite pesquisar na árvore binária de busca
public NoArvore pesquisar(int valor){
return pesquisar(raiz, valor); // chama a versão recursiva
// do método
}
// sobrecarga do método pesquisar que recebe dois
// parâmetros (esta é a versão recursiva do método)
private NoArvore pesquisar(NoArvore noAtual, int valor){
// o valor pesquisado não foi encontrado....vamos retornar null
if(noAtual == null){
return null;
}
// o valor pesquisado foi encontrado?
if(valor == noAtual.valor){
return noAtual; // retorna o nó atual
}
// ainda não encontramos...vamos disparar uma nova
// chamada para a sub-árvore da esquerda
else if(valor < noAtual.valor){
return pesquisar(noAtual.esquerdo, valor);
}
// ainda não encontramos...vamos disparar uma nova
// chamada para a sub-árvore da direita
else{
return pesquisar(noAtual.direito, valor);
}
}
}
E aqui está o código para a classe que permite testar a árvore:
package estudos;
import java.util.Scanner;
public class Estudos {
public static void main(String[] args) {
Scanner entrada = new Scanner(System.in);
// vamos criar um novo objeto da classe ArvoreBinariaBusca
ArvoreBinariaBusca arvore = new ArvoreBinariaBusca();
// vamos inserir 5 valores na árvore
for(int i = 0; i < 5; i++){
System.out.print("Informe um valor inteiro: ");
int valor = Integer.parseInt(entrada.nextLine());
// vamos inserir o nó e verificar o sucesso da operação
if(!arvore.inserir(valor)){
System.out.println("Erro. Um elemento já contém este valor.");
}
}
// vamos pesquisar um valor na árvore
System.out.print("\nInforme o valor a ser pesquisado: ");
int valorPesquisa = Integer.parseInt(entrada.nextLine());
// obtém um objeto da classe NoArvore a partir do
// método pesquisar() da classe ArvoreBinariaBusca
NoArvore res = arvore.pesquisar(valorPesquisa);
// o valor foi encontrado?
if(res != null){
System.out.println("O valor foi encontrado na árvore");
}
else{
System.out.println("O valor não foi encontrado na árvore");
}
System.out.println("\n");
}
}
|
C# ::: Dicas & Truques ::: Strings e Caracteres |
Como converter uma string em um array de char em C# usando a função ToCharArray()Quantidade de visualizações: 9350 vezes |
|
Nesta dica mostrarei como podemos usar a função ToCharArray() da classe String da linguagem C# para converter todos os caracteres de uma palavra, frase ou texto em um vetor de chars. Em seguida nós usaremos o método Reverse() da classe Array para inverter a ordem dos elementos do vetor. Finalmente nós passamos este vetor para o construtor da classe String para obter a string original novamente, só que desta vez, com a ordem de suas letras invertidas. Veja o código C# completo para o exemplo:
using System;
namespace Estudos {
class Program {
static void Main(string[] args) {
string frase = "Gosto de C#";
Console.WriteLine("Frase original: " + frase);
// obtém um array de caracteres a partir da string
char[] letras = frase.ToCharArray();
Array.Reverse(letras); // inverte o array
// transforma em string novamente
string resultado = new String(letras);
Console.WriteLine("Frase invertida: " + resultado);
Console.WriteLine();
}
}
}
Ao executar este código C# nós teremos o seguinte resultado: Frase original: Gosto de C# Frase invertida: #C ed otsoG |
Desafios, Exercícios e Algoritmos Resolvidos de C# |
Veja mais Dicas e truques de C# |
Dicas e truques de outras linguagens |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
