如何在 React 的溢出 div 中向下和向上滚动无限动画？

Question

基本上，我有一个固定高度的项目溢出列表，所以它总是能够滚动。

因此溢出 div 将向下滚动其内容，例如在 4 秒内延迟 0.5 秒，然后在 4 秒内向上滚动其内容并延迟 0.5 秒。这将是一个无限循环动画。

我知道的唯一一件事就是使用 scrollTop 使其对 react 起作用。

我正在使用来自https://usehooks.com/useAnimation/ 的 useAnimation。

以下是我的尝试。可能是我的逻辑有问题，需要改进，目前只能向下滚动，向上滚动会破坏代码

当前对代码框的尝试：https://codesandbox.io/s/useanimation-ks9nd

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [scrollValue, setScrollValue] = useState(0);
  const scrollListRef = useRef(null);
  const [scrollState, setScrollState] = useState("down");
  const [scrollHeight, setScrollHeight] = useState(0);
  const [offsetHeight, setOffsetHeight] = useState(0);

  useEffect(() => {
    if (scrollListRef.current !== null) {
      setScrollHeight(scrollListRef.current.scrollHeight);
      setOffsetHeight(scrollListRef.current.offsetHeight);
    }
  }, []);
  useEffect(() => {
    if (scrollValue === 0) {
      setScrollState("down");
    } else if (scrollValue === scrollHeight - offsetHeight) {
      console.log("state up ne");
      setScrollState("up");
    }
  }, [offsetHeight, scrollHeight, scrollValue]);

  let durationTime = 4000; // seconds
  const animationDown = useAnimation("linear", durationTime / 2, 500);
  let animationUp = useAnimation("linear", durationTime / 2, 500);

  useEffect(() => {
    let scrollMax = scrollHeight - offsetHeight;
    if (scrollState === "down") {
      let value = animationDown * scrollMax;
      setScrollValue(value);
    } else if (scrollState === "up") {
      let value = scrollMax - animationUp * scrollMax;
      // setScrollValue(value)
    }
  }, [animationDown, animationUp, offsetHeight, scrollHeight, scrollState]);

  useEffect(() => {
    let ele = document.getElementById("locationsListScroll");
    ele.scrollTop = scrollValue;
  }, [scrollValue]);

  const lists = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  let ulStyle = {
    padding: 0,
    position: "relative",
    marginLeft: "50%",
    marginTop: "3rem",
    transform: "translate(-25%)",
    maxHeight: 200,
    overflow: "auto"
  };
  let liStyle = {
    listStyleType: "none",
    height: 80,
    width: 80,
    display: "flex",
    border: "1px solid black",
    justifyContent: "center",
    alignItems: "center"
  };
  return (
    <div style={{ overflow: "hidden" }}>
      <ul
        ref={scrollListRef}
        id="locationsListScroll"
        className="row locations-list"
        style={ulStyle}
      >
        {lists.map((item, i) => (
          <li style={liStyle} key={i}>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
}
function useAnimationTimer(duration = 1000, delay = 0) {
  const [elapsed, setTime] = useState(0);

  useEffect(
    () => {
      let animationFrame, timerStop, start;

      // Function to be executed on each animation frame
      function onFrame() {
        setTime(Date.now() - start);
        loop();
      }

      // Call onFrame() on next animation frame
      function loop() {
        animationFrame = requestAnimationFrame(onFrame);
      }

      function onStart() {
        // Set a timeout to stop things when duration time elapses
        timerStop = setTimeout(() => {
          cancelAnimationFrame(animationFrame);
          setTime(Date.now() - start);
        }, duration);

        // Start the loop
        start = Date.now();
        loop();
      }

      // Start after specified delay (defaults to 0)
      const timerDelay = setTimeout(onStart, delay);

      // Clean things up
      return () => {
        clearTimeout(timerStop);
        clearTimeout(timerDelay);
        cancelAnimationFrame(animationFrame);
      };
    },
    [duration, delay] // Only re-run effect if duration or delay changes
  );

  return elapsed;
}

function useAnimation(easingName = "linear", duration = 500, delay = 0) {
  // The useAnimationTimer hook calls useState every animation frame ...
  // ... giving us elapsed time and causing a rerender as frequently ...
  // ... as possible for a smooth animation.
  const elapsed = useAnimationTimer(duration, delay);
  // Amount of specified duration elapsed on a scale from 0 - 1
  const n = Math.min(1, elapsed / duration);
  // Return altered value based on our specified easing function
  return easing[easingName](n);
}

// Some easing functions copied from:
// https://github.com/streamich/ts-easing/blob/master/src/index.ts
// Hardcode here or pull in a dependency
const easing = {
  linear: n => n,
  elastic: n =>
    n * (33 * n * n * n * n - 106 * n * n * n + 126 * n * n - 67 * n + 15),
  inExpo: n => Math.pow(2, 10 * (n - 1))
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

您的逻辑的核心问题是animationUp 挂钩将立即与animationDown 一起启动。

您说过，这将是一个无限循环动画，但我们都知道钩子必须在组件的根级别初始化。因此，我们不能将您的方法与动画挂钩的两个单独实例一起使用。每次当我们到达当前动画的finish时，我们都需要以某种方式重置动画钩子。

相反，我们可以使用重新初始化的 useAnimationTimer 依赖项的现有行为 - 只有在持续时间或延迟更改时才会重新运行效果。它看起来像一个黑客，这是绝对必须改进的。还有一个更重要的修改 - 将animationState 添加到原始动画计时器中，这样它就可以为我们提供确切的动画检查点。

工作示例：codesandbox