基本信息
文件名称:基于React.js实现简单的文字跑马灯效果.docx
文件大小:18.76 KB
总页数:8 页
更新时间:2025-07-02
总字数:约4.79千字
文档摘要

基于React.js实现简单的文字跑马灯效果

刚好手上有一个要实现文字跑马灯的react项目,然后ant-design上面没有这个组件,于是只能自己手撸一个。

我想到的最简单的方法,就是定位啦,定时移动这个文字块不就跑起来了。

需要注意的是,要判断文字的宽度,当文字超出屏幕的宽度的时候再动起来,我用的是hook的写法,要在销毁页面的时候清掉定时器。定时器要放在useRef里面。

consttimer=useRefany(null);

const[left,setLeft]=useState(0);

constcontentRef=useRefany(null);

useEffect(()={

//当监听到文字变化时,一定要先清掉定时器,如果文字较短的话就不会再启动

if(timer.current){clearInterval(timer.current);}

constcontentDom=contentRef.current;

if(contentDom){

constobj=contentDom.getBoundingClientRect();

//判断文字框长度

if(obj.widthprops.width){

timer.current=setInterval(()={

//注意state是负数,?当数字移动到最后的时候,下一次从父元素的宽度开始,看起来就是一直在向左移动

//文字框的宽度要时时获取

//setLeft要从回调里面获取,不然不能时时更新

setLeft((state)=-state=contentDom.getBoundingClientRect().widthprops.width:state-1,);},100);

}else{setLeft(0);}

},[props.children]);

useEffect(()={

//注销时,清空定时器

return()={

if(timer.current){clearInterval(timer.current);}

},[]);

return(divclassName={styles.noticeCompWrapper}

这移动效果还可以吧,时间间隔一定要小,不然就会一卡一卡的

第一种很容易吧,其实最开始是想用纯css来写的,考虑到css没法获取自适应宽度,咋判断文字移动到末尾了?但是我觉得,css肯定是可以办到,于是我继续探索...

animation走起,,,咱们假设外边框长120px,文字长240px

@keyframesrun{

0%{transform:translateX(0);}

50%{transform:translateX(-240px);}

50%{transform:translateX(120px);}

100%{transform:translateX(-240px);}

}

总感觉有啥不对,这个字咋往回跑,这感觉跑来跑去的。。。

平心静气~没事没事,不就是个小bug么~

仔细思考一下,这只要写两个动画就解决了,因为其实除了第一次不同,后面都是从右边进入视角的有木有。

@keyframesrun{

from{transform:translateX(0);}

to{transform:translateX(-240px);}

@keyframesloop{

from{transform:translateX(120px);}

to{transform:translateX(-240px);}

}

咱们用的时候,第一个走一遍就好了,循环后面那个:

.textContent{

white-space:nowrap;

animation-name:run,loop;

animation-duration:5s;

animation-iteration-count:1,infinite;

animation-timing-function:linear;

position:relative;

}

look,是不是好多了~

接下来就是文字长度的问题了~咋们咋控制他要不要动啊?还有移动的时间和距离咋控制??

首先动画时间,less肯定是算不出来