跑马灯简单版
背景
跑马灯对前端来说，再常见不过了，市面上也有很多封装好的插件，但是对于一些简单效果，总觉得是杀鸡用牛刀。项目中正好遇到了，决定自己实现一个简洁版的，先看下效果：
实现原理
主要操作就是：在滚动到最后一个数字时，快速的回滚到第一个，这样才能实现循环的滚动。
实现逻辑：通过控制translateY来实现元素的滚动，通过transitionDuration来控制滚动时间。
在快速切换为第一个时，把transitionDuration设置0，这样就看不出元素被快速切换了。切换为第一个后，再把动画时间周期设置为原来的值就可以了。
import React, { FC, useEffect, useMemo, useState } from 'react';
import './index.less';
const list = [
'00000000000',
'11111111111',
'22222222222',
'333333333',
];
const transitionDuration = 0.3;
const ScrollText: FC = () => {
const endList = [...list, list[0]];
const [index, setIndex] = useState(0);
const [time, setTime] = useState(transitionDuration);
const translateY = useMemo(() => {
if (time === 0 && index === endList.length - 1) {
return 0;
}
return -index * 30;
}, [index, time]);
useEffect(() => {
const timeId = setInterval(() => {
const nextIndex = (index + 1) % endList.length;
setIndex(nextIndex === 0 ? 1 : nextIndex);
setTime(transitionDuration);
}, 2000);
return () => {
clearInterval(timeId);
};
}, [index]);
return (
<div className="scrollTextContainer">
<div
className="list"
style={{ transform: `translateY(${translateY}px)`, transitionDuration: `${time}s` }}
onTransitionEnd={() => {
if (index === endList.length - 1) {
setTime(0);
}
}}
>
{endList.map((item: string, index: number) => (
<span key={index}>{item}</span>
))}
</div>
</div>
);
};
export default ScrollText;
评论