js 实现图片向上滚动的平滑动画效果

最新推荐文章于 2024-04-14 09:51:24 发布

Baobao小包

最新推荐文章于 2024-04-14 09:51:24 发布

阅读量674

点赞数

文章标签： javascript 开发语言前端动画

本文链接：https://blog.csdn.net/forever__fish/article/details/134422856

版权

详细描述：

创建一个 600px 的固定容器，添加一些图片，实现图片向上滚动，滚动完成后，删除最上面的图片。（平滑效果、滚动速度）

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滚动动画</title>
  <style>
    .container {
      height: 600px;
    }

    img {
      display: block;
      height: 600px;
    }
  </style>
</head>

<body>

  <script>
    // 创建一个固定高度的图片滚动容器
    const container = document.createElement('div');
    container.classList.add('container');

    // 将容器添加到 DOM 树中
    document.body.appendChild(container);

    // 创建图片元素
    function createImgElement(src) {
      const img = document.createElement("img");
      img.src = src;
      return img;
    }

    // 生成图片元素并添加到容器中
    const imgs = [
      createImgElement("img1.jpg"),
      createImgElement("img2.jpg"),
      createImgElement("img3.jpg"),
    ];
    const fragment = document.createDocumentFragment()
    imgs.forEach((img) => {
      fragment.appendChild(img);
    });
    container.appendChild(fragment)

    // 生成图片滚动函数
    function scrollImgs(container, imgs, speed) {
      // 定义当前滚动位置
      let currentPosition = 0;
      // 定义滚动动画变量
      let animationFrameId = null;

      function updateAnimate() {
        // 更新滚动位置
        currentPosition -= speed;
        container.style.transform = `translateY(${currentPosition}px)`;

        // 判断滚动动画是否完成
        if (currentPosition <= -imgs[0].height * 3) {
          // 从容器和数组中删除最上面的元素
          container.removeChild(imgs[0]);
          imgs.shift();
          // 停止滚动动画
          cancelAnimationFrame(animationFrameId);
          console.log("滚动完成后图片数组的长度：", imgs.length)
        } else {
          // 请求下一次滚动动画帧
          animationFrameId = requestAnimationFrame(updateAnimate);
        }
      }

      // 初始启动滚动动画
      animationFrameId = requestAnimationFrame(updateAnimate);
    }

    // 控制滚动速度（单位：像素/毫秒）
    const scrollSpeed = 3;

    console.log("滚动开始时图片数组的长度：", imgs.length)

    // 启动图片滚动
    scrollImgs(container, imgs, scrollSpeed);
  </script>
</body>

</html>

注意点：

document.createDocumentFragment()：使用这个方法先创建文档片段，然后遍历完之后再将它添加到 DOM 树中，减少了对 DOM 的操作，提高性能。
requestAnimationFrame()：这个方法用于请求浏览器在下一帧渲染之前执行指定的回调函数，可以实现平滑的动画效果。
cancelAnimationFrame()：使用这个方法停止动画，当滚动完成后，即使停止动画，可以节省资源、避免不必要的更新，以免报错。