基于React.js实现简单的文字跑马灯效果
刚好手上有一个要实现文字跑马灯的react项目,然后ant-design上面没有这个组件,于是只能自己手撸一个。
我想到的最简单的方法,就是定位啦,定时移动这个文字块不就跑起来了。
需要注意的是,要判断文字的宽度,当文字超出屏幕的宽度的时候再动起来,我用的是hook的写法,要在销毁页面的时候清掉定时器。定时器要放在useRef里面。
const timer = useRef<any>(null); const [left, setLeft] = useState(0); const contentRef = useRef<any>(null); useEffect(() => { // 当监听到文字变化时,一定要先清掉定时器,如果文字较短的话就不会再启动 if (timer.current) { clearInterval(timer.current); } const contentDom = contentRef.current; if (contentDom) { const obj = contentDom.getBoundingClientRect(); // 判断文字框长度 if (obj.width > props.width) { timer.current = setInterval(() => { // 注意state是负数,Ï当数字移动到最后的时候,下一次从父元素的宽度开始,看起来就是一直在向左移动 // 文字框的宽度要时时获取 // setLeft要从回调里面获取,不然不能时时更新 setLeft((state) =>-state >= contentDom.getBoundingClientRect().width ? props.width : state - 1, ); }, 100); } else { setLeft(0); } } }, [props.children]); useEffect(() => { // 注销时,清空定时器 return () => { if (timer.current) { clearInterval(timer.current); } }; }, []); return (<div className={styles.noticeCompWrapper} style={{ width: props.width, ...props.style }}> <div ref={contentRef} className={styles.noticeContent} style={{ left }}> {props.children} </div> </div> ); .noticeCompWrapper { height: 40px; line-height: 40px; overflow: hidden; position: relative; .noticeContent { white-space: nowrap; position: absolute; } }
这移动效果还可以吧,时间间隔一定要小,不然就会一卡一卡的
第一种很容易吧,其实最开始是想用纯css来写的,考虑到css没法获取自适应宽度,咋判断文字移动到末尾了?但是我觉得,css肯定是可以办到,于是我继续探索...
animation走起,,,咱们假设外边框长120px,文字长240px
@keyframes run { 0% { transform: translateX(0); } 50% { transform: translateX(-240px); } 50% { transform: translateX(120px); } 100% { transform: translateX(-240px); } }
总感觉有啥不对,这个字咋往回跑,这感觉跑来跑去的。。。
平心静气~没事没事,不就是个小bug么~
仔细思考一下,这只要写两个动画就解决了,因为其实除了第一次不同,后面都是从右边进入视角的有木有。
@keyframes run { from { transform: translateX(0); } to { transform: translateX(-240px); } } @keyframes loop { 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肯定是算不出来了,那我们就在js外面计算一下哈~方法和上面类似,要取元素的宽度。
const contentRef = useRef<any>(null); const [duration, setDuration] = useState(''); useEffect(() => { const dom = contentRef.current; if (dom) { const { width } = dom.getBoundingClientRect(); if (width > props.width) { // 我这边取的速度是按一个字的大小 setDuration(width / 16 + 's'); } else { // 小于宽度的时候清掉时间 setDuration(''); } } else { setDuration(''); } }, [props.children]); return (<div style={{ width: props.width, ...props.style }} className={styles.wrapper} > <div className={styles.textContent} ref={contentRef} // 计算好动画时间传过去 style={{ animationDuration: duration, // 第二个动画等第一个执行之后执行 animationDelay: duration? `0s, ${duration}` :'', }} > {props.children} </div> </div> );
完整的样式
// 设置父元素的宽度 @width: 120px; .wrapper { position: relative; overflow: hidden; width: @width; height: 40px; line-height: 40px; .textContent { white-space: nowrap; animation-name: run, roop; animation-iteration-count: 1, infinite; animation-timing-function: linear; // 这个很重要,不然宽度就和父元素一样 position: absolute; } } @keyframes run { from { transform: translateX(0); } to { // 这个100% 是文字的 transform: translateX(-100%); } } @keyframes roop { from { transform: translateX(@width); } to { transform: translateX(-100%); } }
不错不错,这样就解决了时间和制动的问题了~
不过...,这还不够完美。NOT PERFACT!
这个父元素的宽度是不是写死了,要是要使用的话只能手动改@width,咱有木有办法通过js传过来?你知道怎么改更好么?
哈哈,咱们基本上已经完成了这种简单的从左向右移动的文字跑马灯(为自己鼓掌),接下来就是升级版的了,跑马灯plus。实现一个向上滚动的跑马灯。
咱们在第一步的基础上来做一个向上滚动的跑马灯plus。
我们加一个向上的按钮,可以控制文字跑动的方向,当然向右向下同理~这里就不做了
<> <div className={styles.noticeCompWrapper} style={{ width: props.width, ...props.style, marginBottom: 10 }} > <div ref={contentRef} className={styles.noticeContent} style={{ left, top, // 换行的逻辑一定要加上,上下移动的需要换行 whiteSpace: direction == DirectionEnum.左 ? 'nowrap' : 'initial', }} > {props.children} </div> </div> <Space> <Button onClick={() => { setDirection(DirectionEnum.左); setTop(0); }}> 向左</Button> <Button onClick={() => { setDirection(DirectionEnum.上); setLeft(0); }}> 向上</Button> </Space> </>
判断下移动方向
useEffect(() => { // 当监听到文字变化时,一定要先清掉定时器,如果文字较短的话就不会再启动 if (timer.current) { clearInterval(timer.current); } const contentDom = contentRef.current; if (contentDom) { const obj = contentDom.getBoundingClientRect(); if (direction == DirectionEnum.左) { // 同上... } else if (direction == DirectionEnum.上) { // 向上 if (obj.height > 40) { timer.current = setInterval(() => { setTop(state =>-state >= contentDom.getBoundingClientRect().height ? 40 : state - 1); }, 30); } } else { setLeft(0); setTop(0); } } }, [props.children, direction]);
看一下成果:
这种单行滚动的效果,能不能实现一下?就是滚动一行停留一段时间再继续滚动
这个也比较简单,我用我上面的方法在引申一下,你们也可以用其他方法,animatioin也可以。
我在定时器里面在加一个延时timeout
timer.current = setInterval(() => { setTop(state => { // 当行数是40的整倍数的时候延迟执行移动 if ((state - 1) % 40 == 0) { setTimeout(() => { setTop(state1 => -state1 >= contentDom.getBoundingClientRect().height ? 40 : state1 - 1); }, 500); return state; } else { return -state >= contentDom.getBoundingClientRect().height? 40 : state - 1; } }); }, 30);
效果:
以上就是基于React.js实现简单的文字跑马灯效果的详细内容,更多关于React文字跑马灯的资料请关注我们其它相关文章!