分析

跑马灯在前端是很常见的一种功能。听着高大上，其实就是让一行文字朝一个方向移动。让dom元素移动的方式在css中又无外乎两种：transition & animation。

transition

实现一个文字从容器右侧滚动到容器左侧的跑马灯。（这里的例子是未知容器长度和未知文字长度时的处理方案。如果已知容器宽度则只使用translateX移动即可）。

他的缺点就在于需要动态为元素p添加和取消控制他的class，因此一般还是采用他的升级版animation。

scss 复制代码

.tra-marquee {
    width: 100%;
    height: 50px;
    border: solid 1px #000;
    line-height: 50px;
    font-size: 16px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    // 起始点：使文字在容器右侧
    > p {
        position: absolute;
        right: 0; // 文字右侧与容器右侧距离为0，使文字右侧与容器右侧对齐
        top: 0;
        transform: translateX(100%); // 使文字向右移动文字长度的距离，达到文字左侧紧贴容器右侧
        white-space: nowrap;
        // 终点：使文字在容器左侧
        &.move {
            right: 100%; // 使文字左侧与容器左侧对齐
            transform: translateX(0%); // 使文字右侧与容器左侧对齐
            transition: all 12s linear;
        }
    }
}

animation

优点：作为animation的升级版可以更好的控制动画的延时、停止后的位置、运动快慢、是否重复等。就不需要再动态控制样式了。

scss 复制代码

.ani-marquee {
    width: 100%;
    height: 50px;
    border: solid 1px #000;
    line-height: 50px;
    font-size: 16px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    > p {
        position: absolute;
        top: 0;
        white-space: nowrap;
        animation: Marquee 12s linear infinite;
    }
}

@keyframes Marquee {
    0% {
        right: 0;
        transform: translateX(100%);
    }
    100% {
        right: 100%;
        transform: translateX(0%); 
    }
}

特殊场景

上面通过css实现的都是一些简单场景。但有的时候我们可能需要再跑马灯中加入各种逻辑判断，又或者使用类似于跑马灯的场景但又不完全是。

这类场景的一大特点就是单纯的css不能够完全满足需求，需要再javaScript文件中来动态控制跑马灯。而使用javaScript控制跑马灯在原理上与animation相同。也是通过将整个动画拆分为不同的帧动画，然后再将他们拼合起来。

不同的是animation中帧动画是通过keyframes关键字实现的，而javaScript中实现帧动画是通过浏览器的刷新帧来实现的。而在浏览器每一刷新帧所触发的钩子函数，就是浏览器专门为动画所暴露的Api：requestAnimationFrame

具体使用方法可以看上方MDN链接中示例部分的介绍。如有不足也可参考下方我自己写的另一种特殊示例。

抖音直播间标题文字过长超出范围时自动滚动

这个需求看上去是跑马灯的效果，但是有一定的差异。因为跑马灯是整个文字从尾部滚动到头部，而这个是从文字过长被容器隐藏的地方一直滚动到文字末尾，将整个文字都展示出来。然后再循环滚动。

这时我们通过css就无法拿到滚动的距离（文字宽度 - 容器宽度），也无法用css捕捉到动画停止的时机（滚动到文字尾部停止）。这时就需要采用requestAnimationFrame实现。

获取容器宽度和文字长度

首先需要获取到容器宽度和文字长度，通过ref配合offsetWidth即可实现。需要注意的是，默认文档流内文字长度是等于容器宽度的。需要将文字脱离文档流才可获取到其长度。 这里我采用的方法是定位。

scss 复制代码

.request-marquee {
    width: 200px;
    height: 50px;
    border: solid 1px #000;
    line-height: 50px;
    font-size: 16px;
    box-sizing: border-box;
    margin: 50px 0 0 50px;
    position: relative;
    overflow: hidden;
    > p {
        white-space: nowrap;
        position: absolute; // 脱离文档流
    }
}

requestAnimationFrame实现

tsx 复制代码

import React, { FC, useEffect, useRef } from "react";
import "./index.scss";

const RequestAnimationFrame: FC = () => {
	const parentElement = useRef<HTMLDivElement>(null);
	const childElement = useRef<HTMLParagraphElement>(null);
   const timer = useRef<NodeJS.Timeout>(); // 清除定时器
	const start = useRef<number>(); // 动画开始时间
	const delayBeforeAnimate = 3000; // 动画开始时的延迟时间
	const delayAfterNextAnimate = 3000; // 动画结束后距离下一次动画开始的延迟时间

	useEffect(() => {
        const parentWidth = parentElement.current!.offsetWidth;
        const childWidth = childElement.current!.offsetWidth;

        // 如果文字长度大于容器长度就开启滚动
        if (childWidth - parentWidth > 0) {
            timer.current = setTimeout(() => {
                requestAnimationFrame(startAnimate);
            }, delayBeforeAnimate);
        }
	}, []);

	/**
	 * 开始动画
	 * @param timestamp 当前时间
	 */
	function startAnimate(timestamp: number) {
        if (start.current === undefined) {
            start.current = timestamp; // 开始滚动的时间戳
        }
        const parentWidth = parentElement.current!.offsetWidth;
        const childWidth = childElement.current!.offsetWidth;
        const speed = 0.03; // 每一帧滚动的速度
        const elapsed = timestamp - start.current; // 距离开始滚动所过去的时间
        const distance = speed * elapsed; // 速度乘以时间得到对应帧滚动的距离
        childElement.current!.style.transform = `translateX(-${exactDistance}px)`; // 设置文字在当前帧滚动的距离
        const maxDistance = childWidth - parentWidth; // 应该滚动的距离
        const exactDistance = Math.min(distance, maxDistance); // 更精准的对已经滚动的距离和应该滚动的距离作比较

        if (exactDistance === maxDistance) {
            // 表示已经滚动距离大于应该滚动距离，所以下一帧要重置动画
            timer.current = undefined;
            resetAnimate();
        } else {
            // 表示已经滚动距离小于应该滚动距离，所以下一帧继续动画
            requestAnimationFrame(startAnimate);
        }
	}

	/**
	 * 重置动画
	 */
	function resetAnimate() {
        timer.current = undefined;
        timer.current = setTimeout(() => {
            timer.current = undefined;
            // 重置文本滚动样式
            childElement.current!.style.transition = "none";
            childElement.current!.style.transform = "none";
            // 重置滚动开始时间
            start.current = undefined;
            timer.current = setTimeout(() => {
                requestAnimationFrame(startAnimate);
            }, delayBeforeAnimate);
        }, delayAfterNextAnimate);
	}

	return (
        <div className="request-marquee" ref={parentElement}>
                <p ref={childElement}>我是一条测试直播间名字过长的文本~~~</p>
        </div>
	);
};

export default RequestAnimationFrame;

以上就是前端实现跑马灯的全部内容啦！如果看完文章有所收获的话，烦请动动小手点个赞哦~

您的支持是对我最大的鼓励❤️❤️❤️

前端跑马灯Marquee

分析

transition

animation

特殊场景

抖音直播间标题文字过长超出范围时自动滚动

获取容器宽度和文字长度

requestAnimationFrame实现