javascript - 如何打造类似魔兽世界的冷却效果？

Question

我目前正在尝试制作类似于 the ones you can see in World of Warcraft 的冷却效果. (看到上面有 2m 文字的正方形了吗？这个想法是以圆形方式让正方形“变亮”，也在 http://www.youtube.com/watch?v=R51QXmkyelQ 0:23 中说明。)我正在使用 GWT，所以我主要是在寻找一种使用纯 CSS 和/或 javascript 来完成此操作的方法。

为了实现这一点，我只需要能够创建一个类似于 1 中暗区的方形图像。 .然后我可以将此图像叠加到我的主图像上，并使用计时器来产生运动的错觉。

但是我不知道如何创建这样的图像。似乎可以create shapes using CSS only ，但我不明白是否可以以及如何创建我需要的东西。

我也是found something使用 Silverlight，但它不是我的选择。

我不确定我是否足够清楚地表达了我的需求。如果是这样的话，我很乐意补充说明。

提前感谢您的任何提示，
塞巴斯蒂安·特龙普

Answer 1

这是我想出来的。基本上它所做的是，它将一个图像和一个 0.5 不透明度的 Canvas 封装在一个复合小部件中。动画在给定的时间间隔内以圆形方式在 Canvas 上从中心向边缘绘制线条。 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());
}