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

Question

Basically, I have an overflow list of items with fixed height, so it's always be able to scroll.

So the overflow div will scroll down its content, for example in 4 seconds with 0.5 second delay then scroll up its content in 4 seconds with 0.5 second delay. It will be an infinite loop animation.

The only thing that I know is to use scrollTop to make that works on react.

I'm using useAnimation from https://usehooks.com/useAnimation/ .

Below is my attempt. Probably my logic is wrong and need some improvements, currently it only scrolls down, scrolls up will break the code

Current attempt on codesandbox: 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

The core problem of your logic is that the animationUp hook will immediately starts along with the animationDown .

You said, that It will be an infinite loop animation , but as we all know hooks must be initialized on the root level of the component . So we can't use your approach with two separate instance of the animation hooks. We need to somehow reset the animation hook every time when we reach the finish of the current animation.

Instead we can use the existing behavior of the useAnimationTimer dependency of re-initialization - Only re-run effect if duration or delay changes . It looks like a hack and this is something that can definitely must be improved. And one more significant modification - add the animationState to the original animation timer, so it can give us the exact checkpoints of animation.

Working example : codesandbox