Comment animer en javascript?

J'ai trouvé cet exemple dans w3schools et je veux modifier son animation à mon goût. Fondamentalement, il a deux divs, l'un comme un conteneur et l'autre est pour l'animation. A l'origine, la div animée peut aller d'une direction de haut en bas ou de haut en bas, etc. Mais ce que je veux faire, c'est que dès qu'elle s'anime déjà de haut en bas, je veux qu'elle revienne de bas en haut. Comment y parvenir?Comment animer en javascript?

Voici le 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>

Source

2017-07-18 RockStar

c'est une grande référence des animations http://robertpenner.com/easing/ et le reste 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 –

Vous devez définir une "direction", sinon si vous ne vérifiez que la position verticale, elle gagne ne fonctionne pas. – evolutionxbox

vous pouvez garder une variable pour vérifier dans quelle direction la boîte va et changer en fonction des conditions aux limites. Comme si vous atteignez la position 0, vous pouvez faire descendre la direction et si vous atteignez la position 300, faites monter la direction.

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>

Source

2017-07-18 08:23:31 Dij

Avez-vous envisagé d'utiliser des images clés au lieu de 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>

Source

2017-07-18 08:23:39 fen1x

Vous pouvez vous modifier la fonction frame() pour vérifier la direction et ajoutez/la position Soustraire en conséquence Par exemple

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

Vous pouvez trouver ce travail sur cette JSBin

Source

2017-07-18 08:33:48 Champ

Son préférable d'utiliser des animations CSS, mais si vous voulez faire de cette façon, alors vous devez définir une direction. Je modifie votre code et y ajoute une direction.

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>

Source

2017-07-18 08:36:41

Comment animer en javascript?

Répondre

Questions connexes