第
基于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肯定是算不出来