如何制造类似魔兽般的冷却效果？

Question

我目前正试图制作类似于"魔兽世界"中可以看到的冷却效果.(看到上面有2米文字的广场？想法是以圆形的方式让方形''变亮'',也在http://www.youtube.com/watch?v=R51QXmkyelQ 0:23中说明).我正在使用GWT,所以我主要是寻找使用纯CSS和/或javascript来实现这一目标的方法.

为了达到这个目的,我只需要能够创建一个类似于1中暗区的方形图像.然后我可以将这个图像叠加到我的主图像中,并使用计时器来制作假象.

但是我不知道如何创建这样的图像.似乎可以仅使用CSS创建形状,但我无法理解是否以及如何创建我需要的东西是可能的.

我也发现了一些使用Silverlight的东西,但它不是我的选择.

我不确定我是否表达了我的需要.如果是这种情况,我会非常乐意添加说明.

提前感谢任何提示,
SébastienTromp

Answer 1

这就是我提出的.基本上它的作用是,它在一个复合小部件中将一个图像和一个0.5不透明画布相互封装在一起.动画在给定时间间隔内以圆形方式从画布中心向边缘绘制画布上的线条.Canvas有一个clickHandler来启动动画.希望能帮助到你.它使用GWT Canvas,因此可能并非所有浏览器都支持此小部件.

类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);
    }
}

类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);
    }
}

最后onModuleLoad包装起来:

    public void onModuleLoad() {
    RootPanel.get().add(new CoolDownWidget());
}