利用gsap和canvas实现序列帧

最新推荐文章于 2024-05-23 23:33:04 发布

峥峥不爱喝奶茶

最新推荐文章于 2024-05-23 23:33:04 发布

阅读量381

点赞数 7

文章标签：前端 javascript 数据库

本文链接：https://blog.csdn.net/weixin_51055997/article/details/136261638

版权

function imageSequence(config) {
  if (config.full) {
    setCanvas($(config.canvas), config.top);
  }

  let playhead = { frame: 0 },
    canvas =
      gsap.utils.toArray(config.canvas)[0] ||
      console.warn("canvas not defined"),
    ctx = canvas.getContext("2d"),
    curFrame = -1,
    onUpdate = config.onUpdate,
    images,
    updateImage = function () {
      let frame = Math.round(playhead.frame);
      if (frame !== curFrame) {
        // only draw if necessary
        config.clear && ctx.clearRect(0, 0, canvas.width, canvas.height);
        const img = images[Math.round(playhead.frame)];
        let dx, dy, dw, dh;
        let imgRatio = img.width / img.height;
        let canvasRatio = canvas.width / canvas.height;

        if (config.objectFit === "contain") {
          if (imgRatio <= canvasRatio) {
            dw = imgRatio * canvas.height;
            dh = canvas.height;
            dx = (canvas.width - dw) / 2;
            dy = 0;
          } else {
            dw = canvas.width;
            dh = dw / imgRatio;
            dx = 0;
            dy = (canvas.height - dh) / 2;
          }
          ctx.drawImage(img, 0, 0, img.width, img.height, dx, dy, dw, dh);
        } else {
          if (imgRatio <= canvasRatio) {
            dw = img.width;
            dh = img.width / canvasRatio;
            dx = 0;
            dy = (img.height - dh) / 2;
          } else {
            dw = img.height * canvasRatio;
            dh = img.height;
            dx = (img.width - dw) / 2;
            dy = 0;
          }
          ctx.drawImage(img, dx, dy, dw, dh, 0, 0, canvas.width, canvas.height);
        }

        curFrame = frame;
        onUpdate && onUpdate.call(this, frame, images[frame]);
      }
    };

  window.addEventListener(
    "resize",
    debounce(() => {
      setCanvas($(config.canvas), config.top);
    }, 300),
    false
  );

  images = config.urls.map((url, i) => {
    let img = new Image();
    img.src = url;
    i || (img.onload = updateImage);
    return img;
  });
  return gsap.to(playhead, {
    frame: images.length - 1,
    ease: "none",
    onUpdate: updateImage,
    duration: images.length / (config.fps || 30),
    paused: !!config.paused,
    scrollTrigger: config.scrollTrigger,
    onComplete: config.onComplete,
  });
}

function setCanvas(canvas, top) {
  const width = window.innerWidth;

  const fullHeight = window.innerWidth < 750 ? $($.CN(`.section-third .page-stickybox`)).height() : window.innerHeight;
  
  const height = top
    ? fullHeight - (window.innerWidth < 1600 ? 50 : 60)
    : fullHeight;

  const dpr = window.devicePixelRatio;

  canvas.attr("width", Math.round(width * dpr));
  canvas.attr("height", Math.round(height * dpr));
  canvas.css("width", `${width}px`);
  canvas.css("height", `${height}px`);
}

function section1Animation() {
  let frameCount1 = 62,
    urls1 = new Array(frameCount1)
      .fill()
      .map((o, i) => `${BASE_URL}files/${PREFIXER}C01_v5_${i + 1}.png`);

  const images = imageSequence({
    urls: urls1,
    canvas: "#image-sequence1",
    clear: true,
    full: true,
    objectFit: "cover"
  });
}