WoW風のクールダウン効果の作成方法は？

Question

私は現在、クールダウン効果をthe ones you can see in World of Warcraftに似せようとしています。 （2mテキストの正方形を参照してください。正方形の「明るく」を円形にすることも考えています（0：23のhttp://www.youtube.com/watch?v=R51QXmkyelQで示されています）。私はGWTを使用しているので、私は主に純粋なCSSやjavascriptを使ってこれを行う手段を探しています。

これを達成するには、暗い領域に似た正方形の画像を1に作成する必要があります。このイメージをオーバーレイでメインイメージに適用し、タイマーを使用してmouvementの錯覚を作ります。

しかし、私はそのようなイメージを作成する方法については迷っています。 create shapes using CSS onlyが可能かもしれませんが、もし私が必要なものをつくることが可能であったなら、私は理解できませんでした。

また、Silverlightを使用するfound somethingでも、私にとってはオプションではありません。

私は自分の必要性を十分に明確に表現しているかどうかはわかりません。それが事実ならば、私は説明を追加することを喜ばしく思います。任意のヒントを事前に

おかげで、
セバスチャン・Tromp

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

Answer 2

あなたはまたexample 3

でJquery rotate

ルック使用することができます をあなたは少しのパイのスライス（に四角形を分割することができ少し見えにくいですが、このようにpizza）。それぞれに透明な画像を作成し、jqueryを使用して順に表示/非表示にします。おそらく、これはおそらく最も簡単で最速の解決策です。

Answer 3

にonUpdateためpistolPantiesによって提案された解決策の別のバリエーション（ ）方法：

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

利点は、完全な部分を白としてレンダリングして塗りつぶすことです。これにより、領域が常に適切に着色され、ブラウザのスローダウンに対してより弾力性が確保されます。

Answer 4

これは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>