基本上,我有一个具有固定高度的项目溢出列表,因此它始终能够滚动。
因此,溢出 div 将向下滚动其内容,例如在 4 秒内延迟 0.5 秒,然后在 4 秒内延迟 0.5 秒向上滚动其内容。这将是一个无限循环动画。
我唯一知道的是使用scrollTop来使其在react上工作。
我正在使用 https://usehooks.com/useAnimation/ 中的 useAnimation 。
以下是我的尝试。可能我的逻辑是错误的,需要一些改进,目前它只能向下滚动,向上滚动会破坏代码
当前对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);
最佳答案
逻辑的核心问题是 animationUp
Hook 将立即与 animationDown
一起启动。
您说过,这将是一个无限循环动画,但众所周知,钩子(Hook)必须在组件的根级别初始化。因此,我们不能将您的方法与动画 Hook 的两个单独实例一起使用。每次到达当前动画的结束时,我们都需要以某种方式重置动画 Hook 。
相反,我们可以使用重新初始化的 useAnimationTimer
依赖项的现有行为 - 仅在持续时间或延迟发生变化时重新运行效果。它看起来像是一个黑客行为,这绝对是必须改进的事情。还有一个更重要的修改 - 将 animationState
添加到原始动画计时器,这样它就可以为我们提供准确的动画检查点。
工作示例:codesandbox
关于javascript - 如何在 React 的溢出 div 中具有向下和向上滚动无限动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58097729/