上下无限移动平台javascripthtmlcss

Question

我正在尝试实现平台的无限上下移动。我怎样才能修改代码来得到这个东西？我只成功了一次 un-down 动作。我知道我可以用 CSS 动画来做到这一点，但我想修改我的代码。

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>

Answer 1

您可以在到达数组末尾后进行布尔值检查，一旦您开始递减 n 变量。这样它将从 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>

Answer 2

函数没有循环，因为您没有重置 n - 在第一次上下移动后，n 超出范围，grid.style.bottom = pixels[n] + 'px'; 尝试将阶梯设置为 undefined +'px' 但失败了，并且酒吧留在原地。

我添加了 n = n % pixels.length; 以在它超出范围时重置 n。

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>

Answer 3

与其按间隔递增，不如根据开始后经过的时间计算位置。

根据你的 pixels 数组和你的间隔，你每 900ms 移动 40px up/down。（10 步 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>

上下无限移动平台javascripthtmlcss

Up and down infinite moving platform javascript html css

javascript

html

move

infinite

platform