Wie in Javascript zu animieren?

Ich habe dieses Beispiel in w3schools gefunden und möchte seine Animation nach meinem Geschmack ändern. Im Grunde hat es zwei divs, eins als Container und das andere ist für die Animation. Ursprünglich kann das animierte div eine Richtung von oben nach unten oder von oben nach links usw. gehen. Aber was ich möchte, ist, sobald es von oben nach unten animiert, möchte ich es von unten nach oben zurück bewegen. Wie erreiche ich das? HierWie in Javascript zu animieren?

ist der Code:

<!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>

Quelle

2017-07-18 RockStar

das ist eine große Referenz von Animationen http://robertpenner.com/easing/ und der Rest https://www.google.es/search?q=robert+penner+ animation + javascript & oq = robert + penner + animation + javascript & aqs = chrome..69i57.6743j0j1 & sourceid = chrome & ie = UTF-8 # q = + animation + javascript –

Sie müssen eine "Richtung" einstellen, sonst, wenn Sie nur die vertikale Position überprüfen, hat es gewonnen arbeite nicht. – evolutionxbox

Sie eine Variable halten zu prüfen, welche Richtung die Box gehen und es basierend auf den Randbedingungen ändern. Wenn du die Position 0 erreichst, kannst du die Richtung nach unten ändern und wenn du die Position 300 erreichst, mach die Richtung nach oben.

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>

Quelle

2017-07-18 08:23:31 Dij

Haben Sie darüber nachgedacht, Keyframes statt js verwenden?

#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>

Quelle

2017-07-18 08:23:39 fen1x

können Sie ändern Sie frame() Funktion Richtung zu überprüfen und dann addieren/subtrahieren Position entsprechend Eg

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'; 
}

Sie diese Arbeit an diesem JSBin finden

Quelle

2017-07-18 08:33:48 Champ

Seine besser, CSS-Animationen zu verwenden, aber wenn Sie auf diese Weise tun möchten, dann müssen Sie setze eine Richtung. Ich ändere deinen Code und füge Richtung hinzu.

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>

Quelle

2017-07-18 08:36:41

Wie in Javascript zu animieren?

Antwort

Verwandte Themen