×
Namespaces

Variants
Actions
Revision as of 16:15, 1 December 2013 by lpvalente (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Efeito de explosão para imagens em Java ME

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

Exemplo de código
Artigo
Tradução:
Por maiconherverton
Última alteração feita por lpvalente em 01 Dec 2013

Contents

Introdução

A classe ExplodingImage pode ser usada para se criar um efeito de "explosão de imagens".


J2me image explode.png
Você pode ver o efeito em ação aqui: Imagem em J2ME efeito de explosão em ação.

Código fonte: Classe ExplodingImage

Vamos começar com a nossa classe!

import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Image;
 
public class ExplodingImage
{
}

Começamos definindo algumas propriedades úteis:

//força do efeito
public static final int DEFAULT_LEVEL = 7;
public int level = 7;
 
//peças horizontal e vertical da imagem explodida
public int vPieces = 4;
public int hPieces = 8;
 
//A instância da imagem
Image image = null;
 
//Propriedades da imagem
int imageWidth = 0;
int imageHeight = 0;
 
//tempo do efeito, duração e início
long duration = 0;
long startTime = 0;
 
//Estado das propriedades do efeito
public boolean exploding = false;
public boolean ended = false;

Agora podemos definir o construtor da classe ExplodingImage, que vai aceitar os seguintes argumentos:

  • uma instância de uma Imagem
  • um nível que indica a intensidade do efeito
  • 2 int indicando a horizontal e a vertical da imagem que explodiu
public ExplodingImage(Image image, int level, int hPieces, int vPieces)
{
this.level = level;
this.hPieces = hPieces;
this.vPieces = vPieces;
 
this.image = image;
 
this.imageWidth = image.getWidth();
this.imageHeight = image.getHeight();
}

Agora, vamos definir o método explode, que será usado para iniciar o efeito

public void explode(long duration)
{
this.duration = duration;
this.startTime = System.currentTimeMillis();
 
ended = false;
exploding = true;
}

Finalmente, estamos prontos para desenhar a nossa imagem!

public void paint(Graphics g, int x, int y, int constraints)
{
// se a imagem explodiu não pintá-la
if(ended)
{
return;
}
 
if(!exploding)
{
g.drawImage(image, x, y, constraints);
}
else
{
//cache anterior da propriedade clipping
int cx, cy, cw, ch;
 
cx = g.getClipX();
cy = g.getClipY();
cw = g.getClipWidth();
ch = g.getClipHeight();
 
//Agora devemos normalizar as coordenadas de acordo com as restrições Gráficas
int translateX = (constraints & Graphics.RIGHT) > 0 ? x - imageWidth :
((constraints & Graphics.HCENTER) > 0 ? x - imageWidth / 2 :
x);
int translateY = (constraints & Graphics.BOTTOM) > 0 ? y - imageHeight :
((constraints & Graphics.VCENTER) > 0 ? y - imageHeight / 2 :
y);
 
g.translate(translateX, translateY);
 
//Agora vamos buscar se muito tempo se passou desde o início
long timeDiff = System.currentTimeMillis() - startTime;
 
//e se o efeito terminou
if(timeDiff > duration)
{
timeDiff = duration;
 
ended = true;
 
exploding = false;
}
 
//e vamos pintar as peças únicas!
int perc = (int)(100 * timeDiff / duration);
 
int pieceEndX = 0;
int pieceEndY = 0;
int pieceX = 0;
int pieceY = 0;
int pieceWidth = imageWidth / hPieces;
int pieceHeight = imageHeight / vPieces;
 
int centerX = (imageWidth - pieceWidth) / 2;
int centerY = (imageHeight - pieceHeight) / 2;
 
for(int i = 0; i < hPieces; i++)
{
for(int j = 0; j < vPieces; j++)
{
pieceEndX = i * pieceWidth + (i * pieceWidth - centerX) * level;
pieceEndY = j * pieceHeight + (j * pieceHeight - centerY) * level;
 
pieceX = i * pieceWidth + (pieceEndX - i * pieceWidth) * perc / 100;
pieceY = j * pieceHeight + (pieceEndY - j * pieceHeight) * perc / 100;
 
g.setClip(pieceX, pieceY, pieceWidth, pieceHeight);
 
g.drawImage(image, pieceX - i * pieceWidth, pieceY - j * pieceHeight, Graphics.TOP | Graphics.LEFT);
}
}
 
//Vamos traduzir para anterior e restaurar o clipping anterior
g.translate(- translateX, - translateY);
 
g.setClip(cx, cy, cw, ch);
}
}

Código fonte: o uso da amostra

Você pode começar a instanciar um ExplodingImage desta forma:

Image sourceImage = Image.createImage("/image.png");
 
ExplodingImage image = new ExplodingImage(sourceImage, 5, 8, 8);

Then start exploding with the explode() method:

image.explode(2000L);

And paint it with its paint() method:

image.paint(g, 50, 50, Graphics.HCENTER | Graphics.VCENTER);

E, finalmente, para verificar se o efeito de explodir terminou, você pode verificar as propriedades ended:

if(image.ended)
{
//fim do efeito
}

Download

Você pode baixar o código fonte completo, juntamente com uma classe ExplodingImage usando Canvas, : [[Media:J2me_image_explode_effect.zip|Image| aqui ]

This page was last modified on 1 December 2013, at 16:15.
83 page views in the last 30 days.
×