如何在JavaScript中動畫？

我在w3schools中找到了這個例子，並且想要將它的動畫修改爲我喜歡的。基本上它有兩個div，一個是容器，另一個是動畫。最初動畫div可以從上到下或從上到下等一個方向。但是我想要發生的是，只要它已經從上到下進行動畫，我希望它從下往上移回來。如何實現這一目標？如何在JavaScript中動畫？

下面是代碼：

<!DOCTYPE html> 
<html> 
<style> 
#container { 
width: 400px; 
height: 400px; 
position: relative; 
background: yellow; 
} 
#animate { 
width: 100px; 
height: 100px; 
position: absolute; 
left: 145px; 
background-color: red; 
} 
</style> 
<body> 

<p> 
<button onclick="Move()">Click</button> 
</p> 

<div id ="container"> 
<div id ="animate"></div> 
</div> 

<script> 
function Move() { 
var elem = document.getElementById("animate"); 
var pos = 0; 
var id = setInterval(frame, 5); 
function frame() { 

if (pos < 300) { 
    pos++; 
    elem.style.top = pos + 'px'; 
    elem.style.bottom = pos + 'px'; 
} 

} 
} 
</script> 

</body> 
</html>

來源

2017-07-18 RockStar

這是動畫的一個很大的參考http://robertpenner.com/easing/其餘https://www.google.es/search?q=robert+penner+動畫+ javascript＆oq = robert + penner + animation + javascript＆aqs = chrome..69i57.6743j0j1＆sourceid = chrome＆ie = UTF-8＃q = +動畫+ javascript –

您必須設置一個「方向」，否則如果您只查看垂直位置，沒有工作。 – evolutionxbox

你可以保持一個變量以檢查框會朝哪個方向，改變它的基礎上的邊界條件。就像如果你到達位置0，你可以降低方向，如果你到達位置300，則向上。

function Move() { 
 
var elem = document.getElementById("animate"); 
 
var pos = 0; 
 
var direction = 'down'; 
 
var id = setInterval(frame, 5); 
 
function frame() { 
 

 
if (pos >= 300) { 
 
    direction = 'up'; 
 
} else if (pos <= 0) { 
 
direction = 'down'; 
 
} 
 
if (direction === 'down'){ 
 
    pos++; 
 
} else if (direction === 'up'){ 
 
    pos--; 
 
} 
 
    elem.style.top = pos + 'px'; 
 
    elem.style.bottom = pos + 'px'; 
 

 

 
} 
 
}

#container { 
 
width: 400px; 
 
height: 400px; 
 
position: relative; 
 
background: yellow; 
 
} 
 
#animate { 
 
width: 100px; 
 
height: 100px; 
 
position: absolute; 
 
left: 145px; 
 
background-color: red; 
 
}

<p> 
 
<button onclick="Move()">Click</button> 
 
</p> 
 

 
<div id ="container"> 
 
<div id ="animate"></div> 
 
</div>

來源

2017-07-18 08:23:31 Dij

你有沒有考慮使用關鍵幀，而不是JS？

#container { 
 
    width: 400px; 
 
    height: 400px; 
 
    position: relative; 
 
    background: yellow; 
 
} 
 
#animate { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: absolute; 
 
    left: 145px; 
 
    background-color: red; 
 
    animation: move 3s linear infinite; 
 
} 
 

 
@keyframes move { 
 
    0% { 
 
    top: 0; 
 
    } 
 
    50% { 
 
    top: 300px; 
 
    } 
 
    100% { 
 
    top: 0; 
 
    } 
 
}

<body> 
 
    <div id="container"> 
 
    <div id="animate"></div> 
 
    </div> 
 
</body>

來源

2017-07-18 08:23:39 fen1x

您可以修改您frame()功能檢查方向，然後加/減位置。因此如

function frame() { 

    if(pos >= 300) { 
    dir = 1; 
    }else if (pos <=0) { 
    dir = 0; 
    } 

    if (dir ===0) { 
    pos++; 
    } else { 
    pos--; 
    } 

    elem.style.top = pos + 'px'; 
    elem.style.bottom = pos + 'px'; 
}

您可以找到這方面的工作在這個JSBin

來源

2017-07-18 08:33:48 Champ

其更好地使用CSS動畫，但如果你想這樣做，那麼你必須設定一個方向。我修改你的代碼並在其中添加方向。

function Move() { 
 
var elem = document.getElementById("animate"); 
 
var pos = 0; 
 
var direction = "down"; 
 
var id = setInterval(frame, 5); 
 
function frame() { 
 
if (direction=="down") { 
 
    pos++; 
 
    elem.style.top = pos + 'px'; 
 
    elem.style.bottom = pos + 'px'; 
 
} else { 
 
    pos--; 
 
    elem.style.top = pos + 'px'; 
 
    elem.style.bottom = pos + 'px'; 
 
} 
 
if (pos == 300) { 
 
    direction = "up"; 
 
} 
 
if (pos == 0) { 
 
    direction = "down"; 
 
} 
 
} 
 
}

#container { 
 
width: 400px; 
 
height: 400px; 
 
position: relative; 
 
background: yellow; 
 
} 
 
#animate { 
 
width: 100px; 
 
height: 100px; 
 
position: absolute; 
 
left: 145px; 
 
background-color: red; 
 
}

<p> 
 
<button onclick="Move()">Click</button> 
 
</p> 
 

 
<div id ="container"> 
 
<div id ="animate"></div> 
 
</div>

來源

2017-07-18 08:36:41

如何在JavaScript中動畫？

回答

相關問題