react 字轮播滚动
一、用计时器来实现
React 字符串滚动轮播，可以使用 setInterval 函数和 React 的生命周期方法来实现。以下是一个简单的示例：
import React from "react";
export default class TextScroll extends React.Component {
constructor(props) {
super(props);
this.state = {
text: props.text,
currentIndex: 0,
};
}
componentDidMount() {
this.intervalId = setInterval(() => {
const { text, currentIndex } = this.state;
const nextIndex = (currentIndex + 1) % text.length;
this.setState({ currentIndex: nextIndex });
}, 2000);
}
componentWillUnmount() {
clearInterval(this.intervalId);
}
render() {
const { text, currentIndex } = this.state;
const displayText = `${text.slice(currentIndex)}${text.slice(0, currentIndex)}`;
return <div>{displayText}</div>;
}
}
在上述代码中，我们创建了一个名为 TextScroll 的 React 组件。该组件接受一个 text 属性作为字符串输入，并将其滚动显示。
在组件的构造函数中初始化了组件的 state，包括要滚动显示的文本 text 和当前的索引 currentIndex。
在组件的 componentDidMount 生命周期方法中，我们使用 setInterval 函数创建了一个定时器，每隔 2 秒钟就更新一次 currentIndex 的值。这个定时器的 ID 被保存在组件的实例变量 intervalId 中。
在组件的 componentWillUnmount 生命周期方法中，我们清除了 setInterval 定时器，以避免内存泄漏。
最后，在组件的 render 方法中，我们根据当前的 currentIndex 将文本分成两部分，并将它们重新拼接成一个新的字符串。这个新字符串就是要滚动显示的文本，它被渲染到页面上。
请注意，在实际开发中，需要考虑更多的细节和优化。例如，可以添加控制按钮来暂停或重新启动滚动，或者使用 requestAnimationFrame 代替 setInterval 来提高性能等。
二、用requestAnimationFrame 来实现
当使用 requestAnimationFrame 代替 setInterval 来实现滚动时，可以利用 React 组件的 requestAnimationFrame 方法来进行调度。以下是更新后的示例代码：
import React from "react";
export default class TextScroll extends React.Component {
constructor(props) {
super(props);
this.state = {
text: props.text,
currentIndex: 0,
};
this.animationId = null;
}
componentDidMount() {
this.startAnimation();
}
componentWillUnmount() {
this.stopAnimation();
}
startAnimation() {
const animate = () => {
const { text, currentIndex } = this.state;
const nextIndex = (currentIndex + 1) % text.length;
this.setState({ currentIndex: nextIndex });
this.animationId = requestAnimationFrame(animate);
};
this.animationId = requestAnimationFrame(animate);
}
stopAnimation() {
cancelAnimationFrame(this.animationId);
}
render() {
const { text, currentIndex } = this.state;
const displayText = `${text.slice(currentIndex)}${text.slice(0, currentIndex)}`;
return <div>{displayText}</div>;
}
}
在更新后的代码中，我们添加了一个实例变量 animationId 来存储 requestAnimationFrame 的 ID。
在组件的 componentDidMount 生命周期函数中，调用了 startAnimation 方法，该方法会启动动画循环。
在 startAnimation 方法中，我们定义了一个名为 animate 的递归函数。该函数更新 currentIndex 的值，并通过调用 setState 方法来触发重新渲染。然后，我们使用 requestAnimationFrame 来调度下一帧动画，并将 animate 函数作为回调传递给它。
在组件的 componentWillUnmount 生命周期函数中，调用了 stopAnimation 方法来取消动画循环。
最后，在组件的 render 方法中，我们根据当前的 currentIndex 将文本分成两部分，并将它们重新拼接成一个新的字符串。这个新字符串就是要滚动显示的文本，它被渲染到页面上。
通过使用 requestAnimationFrame，可以更好地与浏览器的渲染机制进行协调，以提供更流畅的滚动效果。
三、实现每秒轮播
要实现每秒轮播，可以在 requestAnimationFrame 的回调函数中添加一个时间控制逻辑来实现。以下是更新后的代码示例：
import React from "react";
export default class TextScroll extends React.Component {
constructor(props) {
super(props);
this.state = {
text: props.text,
currentIndex: 0,
lastTime: 0,
};
this.animationId = null;
}
componentDidMount() {
this.startAnimation();
}
componentWillUnmount() {
this.stopAnimation();
}
startAnimation() {
const animate = (timestamp) => {
const { lastTime, text, currentIndex } = this.state;
if (!lastTime || timestamp - lastTime >= 1000) {
const nextIndex = (currentIndex + 1) % text.length;
this.setState({ currentIndex: nextIndex, lastTime: timestamp });
}
this.animationId = requestAnimationFrame(animate);
};
this.animationId = requestAnimationFrame(animate);
}
stopAnimation() {
cancelAnimationFrame(this.animationId);
}
render() {
const { text, currentIndex } = this.state;
const displayText = `${text.slice(currentIndex)}${text.slice(0, currentIndex)}`;
return <div>{displayText}</div>;
}
}
在更新后的代码中，我们将 lastTime 加入了组件的 state 中，用于记录上一次动画触发的时间戳。
在 startAnimation 方法中的 animate 函数中，我们首先获取当前的时间戳 timestamp，然后判断距离上一次动画触发是否已经过去了 1000 毫秒（即 1 秒）。如果条件成立，就更新 currentIndex 的值，并将当前时间戳赋给 lastTime，然后触发重新渲染；否则，继续等待下一帧动画。
这样就实现了每秒一次的轮播效果。当然，在实际开发中，还可以根据需求进行更灵活的时间控制和动画效果的调整。