Estoy tratando de realizar un movimiento infinito hacia arriba y hacia abajo de la plataforma. ¿Cómo puedo modificar el código para obtener esto? Solo he logrado tener un solo movimiento de bajada. Sé que podría hacer esto con animaciones CSS pero me gustaría modificar mi código.
var n = 0; var grid = document.querySelector('.grid'); function move() { const pixels = [200, 196, 192, 188, 184, 180, 176, 172, 168, 164, 160, 164, 168, 172, 176, 180]; const style = grid.style.bottom const computedStyle = window.getComputedStyle(grid) console.log('bottom from computed style', computedStyle.bottom) grid.style.bottom = pixels[n] + 'px'; n++; } move(); setInterval(move, 90); .grid { background-color: blue; height: 20px; width: 100px; left: 100px; bottom: 200px; position: absolute; } <div class="grid"></div>La función no está en bucle porque no está restableciendo n: después del primer movimiento hacia arriba y hacia abajo, n sale de los límites, grid.style.bottom = pixels[n] + 'px'; intenta establecer el estilo en undefined +'px' y falla, y la barra permanece donde está.
n = n % pixels.length; para restablecer n una vez que se salga de los límites.
var n = 0; var grid = document.querySelector('.grid'); function move() { const pixels = [200, 196, 192, 188, 184, 180, 176, 172, 168, 164, 160, 164, 168, 172, 176, 180]; const style = grid.style.bottom const computedStyle = window.getComputedStyle(grid) console.log('bottom from computed style', computedStyle.bottom) n = n % pixels.length; grid.style.bottom = pixels[n] + 'px'; n++; } move(); setInterval(move, 90); .grid { background-color: blue; height: 20px; width: 100px; left: 100px; bottom: 200px; position: absolute; } <div class="grid"></div>Puede tener una verificación booleana una vez que llegue al final de su matriz y una vez que lo haga, comience a disminuir su variable n . De esta forma irá de 200px -> 180px -> 200px
let grid = document.querySelector(".grid"); let n = 0; let bool = true function move() { const pixels = [200, 196, 192, 188, 184, 180, 176, 172, 168, 164, 160, 164, 168, 172, 176, 180] const style = grid.style.bottom; const computedStyle = window.getComputedStyle(grid); console.log("bottom from computed style", computedStyle.bottom); grid.style.bottom = pixels[n] + "px"; if(n === pixels.length - 1 ){ bool = false } else if(n === 0){ bool = true } bool ? n++ : n-- } move(); setInterval(move, 90); .grid { background-color: blue; height: 20px; width: 100px; left: 100px; bottom: 200px; position: absolute; } <div class="grid"></div>En lugar de incrementar en un intervalo, calcule mejor la posición en función del tiempo transcurrido desde el inicio.
De acuerdo con su matriz de pixels y su intervalo, se mueve 40px arriba/abajo cada 900ms . (10 pasos de 4px / 90ms)
const start = Date.now() function move(){ const time = Date.now() - start; let t = time / 900; // the time passed in terms of up/down strokes // t = t % 1; // turns this into a sawtooth pattern, just up-strokes // not what we want, we want every other stroke to be a down-stroke. t = t&1 ? // every other stroke (1 - t%1) : // move down (t%1); // otherwise mode up // now we have out position as a percentage value 0..1; // let's compute the pixels. const pos = 200 - 40*t; // start at 200px and travel a fraction of 40px down. grid.style.bottom = pos + "px"; // rAF is way smoother than your 90ms interval. requestAnimationFrame(move); } move(); const DURATION = 900; const grid = document.querySelector('.grid'); const start = 0; function move() { let t = (Date.now() - start) / 900; t = t&1 ? 1-t%1 : t%1; // zig-zag //t = t%1; // sawtooth; try this instead of the zig-zag and see/understand the difference. //add some easing; try it. //t = t*t*(3-2*t); grid.style.bottom = 200 - 40*t + "px"; requestAnimationFrame(move); } move(); .grid { background-color: blue; height: 20px; width: 100px; left: 100px; bottom: 200px; position: absolute; } <div class="grid"></div>