Das habe ich mir ausgedacht. Im Grunde, was es tut, ist, es kapselt ein Bild und eine 0,5 Deckkraft Leinwand über einander in einem zusammengesetzten Widget. Die Animation zeichnet Linien auf der Leinwand von der Mitte zu den Rändern in einer kreisförmigen Weise in einem bestimmten Zeitintervall. Canvas hat einen clickHandler, um die Animation zu starten. Hoffentlich hilft das. Es verwendet GWT Canvas, so dass dieses Widget möglicherweise nicht von allen Browsern unterstützt wird.
Klasse CoolDownAnimation :
public class CoolDownAnimation extends Animation {
Canvas canvas;
Context2d context;
int centerX;
int centerY;
static final CssColor BLACK = CssColor.make("rgba(0,0,0,0.6)");
static final CssColor WHITE = CssColor.make("rgba(255,255,255,0.6)");
public CoolDownAnimation(Canvas canvas) {
this.canvas = canvas;
canvas.setCoordinateSpaceHeight(20);
canvas.setCoordinateSpaceWidth(20);
canvas.getElement().getStyle().setOpacity(0.5);
this.context = canvas.getContext2d();
centerX = canvas.getCoordinateSpaceWidth() / 2;
centerY = canvas.getCoordinateSpaceHeight() / 2;
}
@Override
protected void onStart() {
context.beginPath();
context.setStrokeStyle(BLACK);
context.fillRect(0, 0, centerX * 2, centerY * 2);
context.setStrokeStyle(WHITE);
super.onStart();
}
@Override
protected void onUpdate(double progress) {
context.moveTo(centerX, centerY);
context.lineTo(
centerX + 2 * centerX * Math.cos((progress * Math.PI * 2)-Math.PI/2),
centerY + 2 * centerY * Math.sin((progress * Math.PI * 2)-Math.PI/2));
context.stroke();
}
@Override
protected void onComplete() {
super.onComplete();
context.closePath();
context.clearRect(0, 0, centerX*2, centerY*2);
}
}
Klasse CoolDownWidget :
public class CoolDownWidget extends Composite {
private CoolDownAnimation coolDown;
private AbsolutePanel wrapper;
private Image image;
private Canvas canvas;
private int sizeX = 50;
private int sizeY = 50;
private int coolDownDuration = 5000;
public CoolDownWidget(){
canvas = Canvas.createIfSupported();
if (canvas==null){
Window.alert("Fail! You dont have canvas support");
}
canvas.getElement().getStyle().setOpacity(0.5);
canvas.setPixelSize(sizeX,sizeY);
coolDown = new CoolDownAnimation(canvas);
image = new Image("images/icon.png");
image.setPixelSize(sizeX, sizeY);
canvas.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
coolDown.cancel();
coolDown.run(coolDownDuration);
}
});
wrapper = new AbsolutePanel();
wrapper.setPixelSize(sizeX, sizeY);
wrapper.add(image, 0, 0);
wrapper.add(canvas,0,0);
initWidget(wrapper);
}
}
schließlich onModuleLoad, um die Sache abzuschließen:
public void onModuleLoad() {
RootPanel.get().add(new CoolDownWidget());
}
