Question

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

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

然而，我不知道如何创建这样的图像。 create shapes using CSS only似乎有可能，但我无法理解是否以及如何创造我需要的东西。

我也found something使用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);
    }
}

Class 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());
}

Answer 2

这是一个使用jquery的javascript / css版本。

查找实时版本http://codepen.io/anon/pen/aZzNbY。

    <html>
      <head>
          <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
          <style type="text/css">
            .box{
                width:128px;
                height:128px;
                background-color:black;
                overflow:hidden;
                padding:5px;
                border:4px solid #ddd;
                border-radius:12px;
                position:relative;
            }

            input[type="submit"] {
                width: 100%;
                height: 100%;
                border: 0;
                background: url('http://icons.iconseeker.com/png/fullsize/smoothicons-12/warcraft-1.png') no-repeat ;
            }

            .cooldown{
                position:absolute;
                top:5%;
                left:5%;
                width:90%;
                height:90%;
                overflow:hidden;
                opacity:0;
            }   

            .cooldown-half{
                width:50%;
                height:100%;
                overflow:hidden;
                position:relative;
                float:left;
            }

            .cooldown-half-rotator{
                width:200%;
                height:200%;
                top:-50%;
                position:absolute;
                background-color:rgba(1,1,1,0.5);
            }

            .cooldown-half-rotator-right{
                transform-origin:left center;
            }

            .cooldown-half-rotator-left{
                right:0;
                transform-origin:right center;
            }


          </style>
      </head>
      <body>
          <div class='box'>
              <input   type="submit" value="" ><div></div></input>
              <div class='cooldown'>

                  <div class='cooldown-half'>
                      <div class='cooldown-half-rotator cooldown-half-rotator-left'>
                      </div>                         
                  </div>            
                  <div class='cooldown-half'>
                      <div class='cooldown-half-rotator cooldown-half-rotator-right'>           
                      </div>                              
                  </div>            

              </div>
          </div>
          Click me

          <script>
              function setCooldown( time, stopper ){
                    $(".cooldown").css({"opacity":1});
                        $(".cooldown-half-rotator-right").css({
                            "transform":"rotate(180deg)",
                            "transition":"transform "+(time/2000)+"s",
                            "transition-timing-function":"linear"
                        });
                        setTimeout( function(){
                            $(".cooldown-half-rotator-left").css({
                                "transform":"rotate(180deg)",
                                "transition":"transform "+(time/2000)+"s",
                                "transition-timing-function":"linear"
                            });
                            setTimeout( function(){
                                $(".cooldown-half-rotator-right").css({"transform":"rotate(0deg)","transition":"transform 0s"});
                                $(".cooldown-half-rotator-left").css({"transform":"rotate(0deg)","transition":"transform 0s"});
                                $(".cooldown").css({"opacity":0});
                            }, time/2 );
                        }, time/2 );
              }
              window.onload = function(){
                  $(".box").click(function(){                        
                      setCooldown( 3000 );
                  });
              }
          </script>
      </body>
    </html>

Answer 3

您可以使用Jquery rotate

查看example 3

<强>可替换地：你可以将正方形划分为小切片（有点难以看到，但像这样pizza）。为每个图像制作透明图像，然后使用jquery逐个显示/隐藏它们。这可能是最简单，最快速的解决方案。

Answer 4

pistolPanties为onUpdate（）方法提出的解决方案的另一个变体：

this.context.clearRect(0, 0, this.width, this.height);

// Black background
this.context.setFillStyle(BLACK);
this.context.fillRect(0, 0, this.width, this.height);

// White to show the progress
this.context.setFillStyle(WHITE);
this.context.beginPath();
this.context.moveTo(this.centerX, this.centerY);
this.context.arc(this.centerX, this.centerY, this.width, -Math.PI / 2, 2 * Math.PI * progress - Math.PI / 2, false);
this.context.lineTo(this.centerX, this.centerY);
this.context.fill();
this.context.closePath();

它的优点是它将整个部分定界为渲染为白色并填充它。这样可以确保区域始终处于正确的颜色 - 从而更加适应浏览器的减速。

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

4 个答案: