Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Efeito de explosão para imagens em Java ME

From 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 13:15.
217 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×