如何在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中动画？

回答

相关问题