我目前正在試圖製作類似於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，但它不是我的選擇。
我不確定我是否足夠清楚地表達了我的需求。如果是這樣的話，我會很樂意補充澄清。
預先感謝任何提示，
塞巴斯蒂安·特龍普
這就是我想出來的。基本上它所做的就是將一個圖像和一個0.5不透明畫布封裝在一個複合小部件的頂部。動畫在給定的時間間隔內以圓形方式在畫布上從中心向邊緣繪製線條。畫布有一個clickHandler來啓動動畫。希望能幫助到你。它使用GWT畫布，所以這個小部件可能不支持所有的瀏覽器。
類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());
}
你可以使用Jquery rotate
或者： 你可以劃分方成小餅狀切片（有點難以看到，但像這樣pizza）。爲每個人製作透明圖片，並使用jquery逐個顯示/隱藏它們。這可能是最簡單和最快的解決方案。
事實上，冷卻效果並不是真正的旋轉圖像。它給人留下了譁然的印象，但我更願意將其看作是擴展中的圖像（角度從0開始 - 在整個圖像上覆蓋並且增長;當在360度時，圖像再次變亮時，覆蓋不是可見了） –
事實上，餅片可以工作。我需要創建足夠小的切片以給予持續進展的印象，但它可以做到這一點。我會試一試。 –
或創建一個並使用jquery生成副本並將jqueryrotate旋轉到位。你可能會在邊緣出現毛刺，但是...（如果你在Photoshop中分別製作每張圖像，你可以避免） – joon
由用於的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();
它的優點是它將整個部分分隔爲白色並填充。這可以確保該區域始終具有適當的顏色 - 從而可以更好地適應瀏覽器速度慢的情況。
這是一個使用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>
這正是我一直在尋找的。非常感謝:) –