1. 跑马灯组件到底在解决什么问题做前端的人对跑马灯这个东西应该都不陌生。它本质上就是一个内容滚动展示的容器让超出可视区域的内容能够循环滚动播放。你可能在公告栏、新闻滚动条、大屏数据展示、活动通知栏这些场景里都见过它。看起来简单但真正动手写一个稳定、可配置、性能过关的跑马灯组件坑其实不少。我这次做的是一个基于 Angular 6 的跑马灯组件核心需求是支持横向和纵向两个方向的滚动支持自定义滚动速度支持鼠标悬停暂停支持无缝循环并且要能适配不同长度的内容。为什么选 Angular 6因为当时项目本身就跑在 Angular 6 上而且 Angular 的组件化体系、指令系统和生命周期钩子做这种需要精细控制 DOM 和动画的组件其实挺合适的。这个组件适合谁参考如果你正在做 Angular 项目需要一个不依赖第三方库、轻量可控的跑马灯那这篇内容应该能帮到你。如果你用的是其他框架思路和核心逻辑也是通用的只是实现细节需要转换一下。我尽量把每个决策背后的原因讲清楚让你看完能直接动手复现而不是只抄个代码就完事。2. 整体设计思路与方案选型2.1 为什么不用 CSS 动画一把梭很多人第一反应是用 CSS 的keyframes做跑马灯简单几行就能跑起来。我一开始也试过但很快就发现几个问题。第一CSS 动画的速度控制不够灵活你要动态改速度就得重新生成 keyframes很别扭。第二无缝循环在 CSS 里通常要复制一份内容然后靠translateX(-50%)这种技巧来实现内容长度不固定的时候计算很麻烦。第三鼠标悬停暂停虽然可以用animation-play-state搞定但和 JavaScript 逻辑配合起来总感觉隔了一层。所以我最终选了requestAnimationFrame加transform: translate的方案。核心思路很简单用 JavaScript 每帧计算偏移量通过transform移动内容容器当偏移量超过一份内容的宽度或高度时重置偏移量形成视觉上的无缝循环。这样做的好处是速度、方向、暂停恢复全部由 JS 控制逻辑统一调试也方便。2.2 无缝滚动的核心原理无缝滚动的关键在于“看起来永远滚不完”。实现方式是这样的假设你的内容原始宽度是 W你把内容复制一份拼在后面总宽度变成 2W。容器可视宽度是 V。当偏移量 offset 从 0 增加到 W 时你看到的第二份内容刚好完全顶上来和第一份内容的起始位置一模一样。这时候把 offset 重置为 0视觉上没有任何跳变因为第二份内容的开头和第一份内容的开头长得完全一样。用生活化的类比来说就像一条环形跑道你一直在跑但跑道本身是循环的你永远跑不到尽头。代码层面就是不断累加偏移量到了临界点就归零。2.3 Angular 6 下的技术选型考量Angular 6 提供了几个关键能力Component装饰器定义组件、Input接收外部配置、ViewChild获取模板引用、ngAfterViewInit在视图初始化后操作 DOM。这些正好够用。我没有引入任何第三方动画库因为跑马灯的核心逻辑不复杂自己写反而更可控。另外Angular 6 的Renderer2可以用来安全地操作 DOM比直接访问nativeElement更符合 Angular 的风格。不过在实际操作中对于transform这种高频更新的样式直接用nativeElement.style性能会更好因为Renderer2会做一些额外的抽象。我最终是混合使用的初始化阶段用Renderer2动画循环里直接操作style。3. 核心细节解析与实操要点3.1 组件输入参数的設計一个可复用的组件输入参数的设计直接决定了它的适用范围。我定义了以下几个Input参数名类型默认值说明directionhorizontal | verticalhorizontal滚动方向speednumber50滚动速度单位 px/spauseOnHoverbooleantrue鼠标悬停是否暂停gapnumber0内容之间的间距速度用 px/s 而不是 px/frame是因为不同设备的刷新率不一样。60Hz 屏幕每帧 16.67ms120Hz 屏幕每帧 8.33ms如果用 px/frame在高刷屏上速度会翻倍。用 px/s 配合时间差计算就能保证不同设备上视觉速度一致。3.2 内容容器的结构设计模板结构大概是这样div classmarquee-wrapper #wrapper div classmarquee-content #content ng-content/ng-content /div div classmarquee-content #contentCopy ng-content/ng-content /div /div外层wrapper是可视区域设置overflow: hidden。里面放两份内容第二份是第一份的副本用于无缝衔接。这里有个细节ng-content在 Angular 里是投影内容直接写两次ng-content是可行的但要注意如果投影内容里有带状态的组件复制可能会导致状态不同步。对于纯展示型内容文字、图片、简单标签这个问题不存在。3.3 偏移量计算与重置逻辑核心的动画循环逻辑是这样的private animate (timestamp: number) { if (!this.lastTimestamp) { this.lastTimestamp timestamp; } const delta timestamp - this.lastTimestamp; this.lastTimestamp timestamp; if (!this.paused) { const moveDistance (this.speed * delta) / 1000; this.offset moveDistance; const maxOffset this.direction horizontal ? this.contentWidth : this.contentHeight; if (this.offset maxOffset) { this.offset - maxOffset; } this.applyTransform(); } this.rafId requestAnimationFrame(this.animate); };这里用offset - maxOffset而不是offset 0是为了处理一帧移动距离超过 maxOffset 的极端情况。比如速度特别快或者页面卡顿后恢复一帧可能移动很远直接归零会丢失一部分距离导致视觉上的微小跳变。用减法可以保留余数保证连续性。3.4 尺寸测量与响应式处理内容宽度或高度的测量时机很关键。如果在ngAfterViewInit里直接测可能内容还没渲染完或者图片还没加载测出来的尺寸是错的。我的做法是在ngAfterViewInit里先测一次然后用ResizeObserver监听内容尺寸变化变化时重新测量并更新contentWidth。ngAfterViewInit() { this.measureContent(); this.resizeObserver new ResizeObserver(() { this.measureContent(); }); this.resizeObserver.observe(this.contentRef.nativeElement); this.rafId requestAnimationFrame(this.animate); }ResizeObserver在 Angular 6 时代还不是所有浏览器都支持需要引入 polyfill。如果不想引入可以用window.resize事件加定时器轮询作为降级方案但体验会差一些。注意测量尺寸时要用getBoundingClientRect()而不是offsetWidth因为getBoundingClientRect()返回的是浮点数精度更高对于小尺寸内容更准确。4. 完整实操流程与核心环节实现4.1 项目初始化与组件生成假设你已经有一个 Angular 6 项目用 Angular CLI 生成组件ng generate component marquee这会在src/app/marquee/下生成四个文件。我习惯把模板和样式都写在组件文件里对于这种中小型组件维护起来更方便。如果你团队规范要求分离拆开也没问题。4.2 组件类的完整实现先看组件类的完整代码结构import { Component, Input, ElementRef, ViewChild, AfterViewInit, OnDestroy, NgZone } from angular/core; Component({ selector: app-marquee, templateUrl: ./marquee.component.html, styleUrls: [./marquee.component.scss] }) export class MarqueeComponent implements AfterViewInit, OnDestroy { Input() direction: horizontal | vertical horizontal; Input() speed 50; Input() pauseOnHover true; Input() gap 0; ViewChild(wrapper) wrapperRef: ElementRef; ViewChild(content) contentRef: ElementRef; private offset 0; private contentWidth 0; private contentHeight 0; private lastTimestamp 0; private rafId: number; private paused false; private resizeObserver: ResizeObserver; constructor( private el: ElementRef, private ngZone: NgZone ) {} ngAfterViewInit() { this.ngZone.runOutsideAngular(() { this.measureContent(); this.setupResizeObserver(); this.rafId requestAnimationFrame(this.animate); }); } ngOnDestroy() { if (this.rafId) { cancelAnimationFrame(this.rafId); } if (this.resizeObserver) { this.resizeObserver.disconnect(); } } private measureContent() { const rect this.contentRef.nativeElement.getBoundingClientRect(); this.contentWidth rect.width this.gap; this.contentHeight rect.height this.gap; } private setupResizeObserver() { if (typeof ResizeObserver ! undefined) { this.resizeObserver new ResizeObserver(() { this.measureContent(); }); this.resizeObserver.observe(this.contentRef.nativeElement); } } private animate (timestamp: number) { if (!this.lastTimestamp) { this.lastTimestamp timestamp; } const delta timestamp - this.lastTimestamp; this.lastTimestamp timestamp; if (!this.paused) { const moveDistance (this.speed * delta) / 1000; this.offset moveDistance; const maxOffset this.direction horizontal ? this.contentWidth : this.contentHeight; if (maxOffset 0 this.offset maxOffset) { this.offset - maxOffset; } this.applyTransform(); } this.rafId requestAnimationFrame(this.animate); }; private applyTransform() { const content this.contentRef.nativeElement; const copy content.nextElementSibling; if (this.direction horizontal) { content.style.transform translateX(${-this.offset}px); if (copy) { copy.style.transform translateX(${-this.offset}px); } } else { content.style.transform translateY(${-this.offset}px); if (copy) { copy.style.transform translateY(${-this.offset}px); } } } onMouseEnter() { if (this.pauseOnHover) { this.paused true; } } onMouseLeave() { if (this.pauseOnHover) { this.paused false; this.lastTimestamp 0; } } }这里有几个关键点值得展开说。第一ngZone.runOutsideAngular的使用。requestAnimationFrame每帧都会触发变更检测如果跑在 Angular 的 zone 里会带来不必要的性能开销。把它放到 zone 外面动画循环就不会触发变更检测性能提升很明显。第二lastTimestamp在鼠标离开时重置为 0。这是因为暂停期间时间还在流逝如果不重置恢复时delta会是一个很大的值导致内容瞬间跳一大段。重置后恢复的第一帧delta会重新从 0 开始计算。4.3 模板与样式的配合模板文件div classmarquee-wrapper #wrapper (mouseenter)onMouseEnter() (mouseleave)onMouseLeave() div classmarquee-content #content ng-content/ng-content /div div classmarquee-content ng-content/ng-content /div /div样式文件.marquee-wrapper { overflow: hidden; position: relative; white-space: nowrap; } .marquee-content { display: inline-block; will-change: transform; }will-change: transform是个性能优化点提前告诉浏览器这个元素会频繁变化让浏览器把它提升到独立的合成层减少重绘。但不要滥用用多了反而会消耗内存。对于纵向滚动样式需要调整.marquee-wrapper.vertical { white-space: normal; height: 200px; } .marquee-wrapper.vertical .marquee-content { display: block; }4.4 在业务组件中的使用方式假设你有一个公告栏需求用法大概是这样app-marquee [speed]80 [pauseOnHover]true directionhorizontal span classnotice-item系统将于今晚 22:00 进行例行维护请提前保存工作内容/span span classnotice-item新版本已发布欢迎体验全新功能/span span classnotice-item本周五下午三点召开全员会议请准时参加/span /app-marquee如果内容之间有间距需求可以通过gap参数控制或者在投影内容里自己加 margin。我建议用gap参数统一控制这样组件内部计算宽度时会自动把间距算进去不会出现间距导致的无缝衔接错位。5. 常见问题与排查技巧实录5.1 滚动到一半出现空白这是最常见的问题通常是因为内容宽度测量不准确。排查步骤第一确认measureContent在内容完全渲染后执行。如果内容里有图片图片加载完成前测的宽度是错的。解决办法是监听图片的load事件或者在ResizeObserver回调里重新测量。第二检查gap参数是否被正确加到了contentWidth里。如果内容之间有间距但没算进去滚动到衔接处就会露出空白。5.2 速度在不同屏幕上不一致前面提到过用 px/s 配合时间差计算就能解决。但还有一个隐藏问题如果delta特别大比如页面切到后台再切回来一帧移动距离会很大视觉上会跳。我的处理是在animate里加一个上限判断const delta Math.min(timestamp - this.lastTimestamp, 100);把delta限制在 100ms 以内超过就按 100ms 算。这样即使页面卡顿也不会出现大幅跳变。5.3 鼠标悬停暂停后恢复位置不对这个问题通常是因为暂停期间lastTimestamp没有重置。我在onMouseLeave里把lastTimestamp设为 0恢复后的第一帧会重新初始化时间戳delta从 0 开始位置就不会跳。如果你发现恢复后位置有偏移检查一下是不是漏了这一步。5.4 内容动态变化后滚动异常如果投影内容是动态的比如通过*ngFor渲染的列表内容变化后contentWidth需要重新测量。ResizeObserver能覆盖大部分场景但如果内容变化不引起尺寸变化比如文字内容变了但长度一样就需要手动触发重新测量。我的做法是暴露一个refresh()方法让外部在需要时调用refresh() { this.measureContent(); this.offset 0; this.applyTransform(); }5.5 常见问题速查表问题现象可能原因解决方式滚动出现空白内容宽度测量不准确保内容渲染完成后测量监听图片加载速度忽快忽慢未用时间差计算用 px/s 配合 delta 计算移动距离悬停恢复后跳变lastTimestamp 未重置鼠标离开时重置 lastTimestamp动态内容不滚动尺寸未重新测量用 ResizeObserver 或手动调用 refresh性能差、卡顿动画在 Angular zone 内用 runOutsideAngular 包裹动画循环实操心得开发阶段可以在applyTransform里加一行console.log(this.offset)观察偏移量的变化是否符合预期。上线前记得去掉不然控制台会刷屏。6. 性能优化与扩展思路6.1 减少重排与重绘跑马灯的性能瓶颈主要在样式更新上。用transform而不是left或top来移动内容是因为transform不会触发重排只会触发合成性能好很多。另外给内容容器加上will-change: transform和backface-visibility: hidden可以进一步提示浏览器做优化。6.2 支持动态速度调整如果需要在运行时改变速度直接改speed输入属性就行因为每一帧都会读取最新的speed值。但要注意如果速度从 0 突然变成很大的值第一帧的移动距离会很大。可以在speed的 setter 里加一个平滑过渡或者限制单帧最大移动距离。6.3 支持点击暂停与手动控制有些场景需要用户点击暂停或者通过按钮控制滚动。可以在组件里加一个paused的Input外部通过双向绑定控制。内部逻辑不用改只需要在animate里判断this.paused就行。6.4 兼容 SSR 的注意事项如果项目用了 Angular Universal 做服务端渲染requestAnimationFrame和ResizeObserver在服务端是不存在的。需要在ngAfterViewInit里判断typeof window ! undefined或者在服务端跳过动画初始化。否则会报错。7. 一些踩过的坑和真实体会这个组件我前前后后改了好几版最开始用 CSS 动画后来换成 JS 控制中间踩的坑确实不少。最大的一个坑是内容宽度测量。当时测试环境的内容是固定文字宽度稳定一切正常。上线后内容变成了动态数据有时候长有时候短结果滚动到一半就出现空白。排查了半天才发现是ResizeObserver没生效因为当时用的浏览器版本不支持polyfill 也没引入。后来加了降级方案用MutationObserver监听内容变化再配合定时器轮询尺寸才彻底解决。另一个坑是性能。最开始动画循环跑在 Angular zone 里页面上一有输入框打字就卡顿。后来用runOutsideAngular包起来流畅度立刻上来了。这个经验让我意识到Angular 的变更检测虽然方便但在高频动画场景下一定要主动隔离。还有一个细节ng-content投影内容如果有多个根节点测量宽度时要把它们都算进去。我当时的做法是在内容容器上设置display: inline-block让容器自动包裹所有子元素这样测容器宽度就等于测所有内容的总宽度。如果子元素是块级元素需要改成display: flex或者手动计算。最后分享一个小技巧调试跑马灯的时候把速度调得很慢比如 10px/s然后打开浏览器的开发者工具用元素审查功能观察transform值的变化。这样能很直观地看到偏移量是否连续、重置时机是否正确。比盯着快速滚动的画面猜问题要高效得多。这个组件后续还可以扩展的方向包括支持触摸滑动暂停、支持滚动到指定位置、支持多行内容交替滚动等。不过核心逻辑不变都是在偏移量计算和重置上做文章。把基础版本吃透扩展起来就是加参数和判断的事。
1. 跑马灯组件到底在解决什么问题做前端的人对跑马灯这个东西应该都不陌生。它本质上就是一个内容滚动展示的容器让超出可视区域的内容能够循环滚动播放。你可能在公告栏、新闻滚动条、大屏数据展示、活动通知栏这些场景里都见过它。看起来简单但真正动手写一个稳定、可配置、性能过关的跑马灯组件坑其实不少。我这次做的是一个基于 Angular 6 的跑马灯组件核心需求是支持横向和纵向两个方向的滚动支持自定义滚动速度支持鼠标悬停暂停支持无缝循环并且要能适配不同长度的内容。为什么选 Angular 6因为当时项目本身就跑在 Angular 6 上而且 Angular 的组件化体系、指令系统和生命周期钩子做这种需要精细控制 DOM 和动画的组件其实挺合适的。这个组件适合谁参考如果你正在做 Angular 项目需要一个不依赖第三方库、轻量可控的跑马灯那这篇内容应该能帮到你。如果你用的是其他框架思路和核心逻辑也是通用的只是实现细节需要转换一下。我尽量把每个决策背后的原因讲清楚让你看完能直接动手复现而不是只抄个代码就完事。2. 整体设计思路与方案选型2.1 为什么不用 CSS 动画一把梭很多人第一反应是用 CSS 的keyframes做跑马灯简单几行就能跑起来。我一开始也试过但很快就发现几个问题。第一CSS 动画的速度控制不够灵活你要动态改速度就得重新生成 keyframes很别扭。第二无缝循环在 CSS 里通常要复制一份内容然后靠translateX(-50%)这种技巧来实现内容长度不固定的时候计算很麻烦。第三鼠标悬停暂停虽然可以用animation-play-state搞定但和 JavaScript 逻辑配合起来总感觉隔了一层。所以我最终选了requestAnimationFrame加transform: translate的方案。核心思路很简单用 JavaScript 每帧计算偏移量通过transform移动内容容器当偏移量超过一份内容的宽度或高度时重置偏移量形成视觉上的无缝循环。这样做的好处是速度、方向、暂停恢复全部由 JS 控制逻辑统一调试也方便。2.2 无缝滚动的核心原理无缝滚动的关键在于“看起来永远滚不完”。实现方式是这样的假设你的内容原始宽度是 W你把内容复制一份拼在后面总宽度变成 2W。容器可视宽度是 V。当偏移量 offset 从 0 增加到 W 时你看到的第二份内容刚好完全顶上来和第一份内容的起始位置一模一样。这时候把 offset 重置为 0视觉上没有任何跳变因为第二份内容的开头和第一份内容的开头长得完全一样。用生活化的类比来说就像一条环形跑道你一直在跑但跑道本身是循环的你永远跑不到尽头。代码层面就是不断累加偏移量到了临界点就归零。2.3 Angular 6 下的技术选型考量Angular 6 提供了几个关键能力Component装饰器定义组件、Input接收外部配置、ViewChild获取模板引用、ngAfterViewInit在视图初始化后操作 DOM。这些正好够用。我没有引入任何第三方动画库因为跑马灯的核心逻辑不复杂自己写反而更可控。另外Angular 6 的Renderer2可以用来安全地操作 DOM比直接访问nativeElement更符合 Angular 的风格。不过在实际操作中对于transform这种高频更新的样式直接用nativeElement.style性能会更好因为Renderer2会做一些额外的抽象。我最终是混合使用的初始化阶段用Renderer2动画循环里直接操作style。3. 核心细节解析与实操要点3.1 组件输入参数的設計一个可复用的组件输入参数的设计直接决定了它的适用范围。我定义了以下几个Input参数名类型默认值说明directionhorizontal | verticalhorizontal滚动方向speednumber50滚动速度单位 px/spauseOnHoverbooleantrue鼠标悬停是否暂停gapnumber0内容之间的间距速度用 px/s 而不是 px/frame是因为不同设备的刷新率不一样。60Hz 屏幕每帧 16.67ms120Hz 屏幕每帧 8.33ms如果用 px/frame在高刷屏上速度会翻倍。用 px/s 配合时间差计算就能保证不同设备上视觉速度一致。3.2 内容容器的结构设计模板结构大概是这样div classmarquee-wrapper #wrapper div classmarquee-content #content ng-content/ng-content /div div classmarquee-content #contentCopy ng-content/ng-content /div /div外层wrapper是可视区域设置overflow: hidden。里面放两份内容第二份是第一份的副本用于无缝衔接。这里有个细节ng-content在 Angular 里是投影内容直接写两次ng-content是可行的但要注意如果投影内容里有带状态的组件复制可能会导致状态不同步。对于纯展示型内容文字、图片、简单标签这个问题不存在。3.3 偏移量计算与重置逻辑核心的动画循环逻辑是这样的private animate (timestamp: number) { if (!this.lastTimestamp) { this.lastTimestamp timestamp; } const delta timestamp - this.lastTimestamp; this.lastTimestamp timestamp; if (!this.paused) { const moveDistance (this.speed * delta) / 1000; this.offset moveDistance; const maxOffset this.direction horizontal ? this.contentWidth : this.contentHeight; if (this.offset maxOffset) { this.offset - maxOffset; } this.applyTransform(); } this.rafId requestAnimationFrame(this.animate); };这里用offset - maxOffset而不是offset 0是为了处理一帧移动距离超过 maxOffset 的极端情况。比如速度特别快或者页面卡顿后恢复一帧可能移动很远直接归零会丢失一部分距离导致视觉上的微小跳变。用减法可以保留余数保证连续性。3.4 尺寸测量与响应式处理内容宽度或高度的测量时机很关键。如果在ngAfterViewInit里直接测可能内容还没渲染完或者图片还没加载测出来的尺寸是错的。我的做法是在ngAfterViewInit里先测一次然后用ResizeObserver监听内容尺寸变化变化时重新测量并更新contentWidth。ngAfterViewInit() { this.measureContent(); this.resizeObserver new ResizeObserver(() { this.measureContent(); }); this.resizeObserver.observe(this.contentRef.nativeElement); this.rafId requestAnimationFrame(this.animate); }ResizeObserver在 Angular 6 时代还不是所有浏览器都支持需要引入 polyfill。如果不想引入可以用window.resize事件加定时器轮询作为降级方案但体验会差一些。注意测量尺寸时要用getBoundingClientRect()而不是offsetWidth因为getBoundingClientRect()返回的是浮点数精度更高对于小尺寸内容更准确。4. 完整实操流程与核心环节实现4.1 项目初始化与组件生成假设你已经有一个 Angular 6 项目用 Angular CLI 生成组件ng generate component marquee这会在src/app/marquee/下生成四个文件。我习惯把模板和样式都写在组件文件里对于这种中小型组件维护起来更方便。如果你团队规范要求分离拆开也没问题。4.2 组件类的完整实现先看组件类的完整代码结构import { Component, Input, ElementRef, ViewChild, AfterViewInit, OnDestroy, NgZone } from angular/core; Component({ selector: app-marquee, templateUrl: ./marquee.component.html, styleUrls: [./marquee.component.scss] }) export class MarqueeComponent implements AfterViewInit, OnDestroy { Input() direction: horizontal | vertical horizontal; Input() speed 50; Input() pauseOnHover true; Input() gap 0; ViewChild(wrapper) wrapperRef: ElementRef; ViewChild(content) contentRef: ElementRef; private offset 0; private contentWidth 0; private contentHeight 0; private lastTimestamp 0; private rafId: number; private paused false; private resizeObserver: ResizeObserver; constructor( private el: ElementRef, private ngZone: NgZone ) {} ngAfterViewInit() { this.ngZone.runOutsideAngular(() { this.measureContent(); this.setupResizeObserver(); this.rafId requestAnimationFrame(this.animate); }); } ngOnDestroy() { if (this.rafId) { cancelAnimationFrame(this.rafId); } if (this.resizeObserver) { this.resizeObserver.disconnect(); } } private measureContent() { const rect this.contentRef.nativeElement.getBoundingClientRect(); this.contentWidth rect.width this.gap; this.contentHeight rect.height this.gap; } private setupResizeObserver() { if (typeof ResizeObserver ! undefined) { this.resizeObserver new ResizeObserver(() { this.measureContent(); }); this.resizeObserver.observe(this.contentRef.nativeElement); } } private animate (timestamp: number) { if (!this.lastTimestamp) { this.lastTimestamp timestamp; } const delta timestamp - this.lastTimestamp; this.lastTimestamp timestamp; if (!this.paused) { const moveDistance (this.speed * delta) / 1000; this.offset moveDistance; const maxOffset this.direction horizontal ? this.contentWidth : this.contentHeight; if (maxOffset 0 this.offset maxOffset) { this.offset - maxOffset; } this.applyTransform(); } this.rafId requestAnimationFrame(this.animate); }; private applyTransform() { const content this.contentRef.nativeElement; const copy content.nextElementSibling; if (this.direction horizontal) { content.style.transform translateX(${-this.offset}px); if (copy) { copy.style.transform translateX(${-this.offset}px); } } else { content.style.transform translateY(${-this.offset}px); if (copy) { copy.style.transform translateY(${-this.offset}px); } } } onMouseEnter() { if (this.pauseOnHover) { this.paused true; } } onMouseLeave() { if (this.pauseOnHover) { this.paused false; this.lastTimestamp 0; } } }这里有几个关键点值得展开说。第一ngZone.runOutsideAngular的使用。requestAnimationFrame每帧都会触发变更检测如果跑在 Angular 的 zone 里会带来不必要的性能开销。把它放到 zone 外面动画循环就不会触发变更检测性能提升很明显。第二lastTimestamp在鼠标离开时重置为 0。这是因为暂停期间时间还在流逝如果不重置恢复时delta会是一个很大的值导致内容瞬间跳一大段。重置后恢复的第一帧delta会重新从 0 开始计算。4.3 模板与样式的配合模板文件div classmarquee-wrapper #wrapper (mouseenter)onMouseEnter() (mouseleave)onMouseLeave() div classmarquee-content #content ng-content/ng-content /div div classmarquee-content ng-content/ng-content /div /div样式文件.marquee-wrapper { overflow: hidden; position: relative; white-space: nowrap; } .marquee-content { display: inline-block; will-change: transform; }will-change: transform是个性能优化点提前告诉浏览器这个元素会频繁变化让浏览器把它提升到独立的合成层减少重绘。但不要滥用用多了反而会消耗内存。对于纵向滚动样式需要调整.marquee-wrapper.vertical { white-space: normal; height: 200px; } .marquee-wrapper.vertical .marquee-content { display: block; }4.4 在业务组件中的使用方式假设你有一个公告栏需求用法大概是这样app-marquee [speed]80 [pauseOnHover]true directionhorizontal span classnotice-item系统将于今晚 22:00 进行例行维护请提前保存工作内容/span span classnotice-item新版本已发布欢迎体验全新功能/span span classnotice-item本周五下午三点召开全员会议请准时参加/span /app-marquee如果内容之间有间距需求可以通过gap参数控制或者在投影内容里自己加 margin。我建议用gap参数统一控制这样组件内部计算宽度时会自动把间距算进去不会出现间距导致的无缝衔接错位。5. 常见问题与排查技巧实录5.1 滚动到一半出现空白这是最常见的问题通常是因为内容宽度测量不准确。排查步骤第一确认measureContent在内容完全渲染后执行。如果内容里有图片图片加载完成前测的宽度是错的。解决办法是监听图片的load事件或者在ResizeObserver回调里重新测量。第二检查gap参数是否被正确加到了contentWidth里。如果内容之间有间距但没算进去滚动到衔接处就会露出空白。5.2 速度在不同屏幕上不一致前面提到过用 px/s 配合时间差计算就能解决。但还有一个隐藏问题如果delta特别大比如页面切到后台再切回来一帧移动距离会很大视觉上会跳。我的处理是在animate里加一个上限判断const delta Math.min(timestamp - this.lastTimestamp, 100);把delta限制在 100ms 以内超过就按 100ms 算。这样即使页面卡顿也不会出现大幅跳变。5.3 鼠标悬停暂停后恢复位置不对这个问题通常是因为暂停期间lastTimestamp没有重置。我在onMouseLeave里把lastTimestamp设为 0恢复后的第一帧会重新初始化时间戳delta从 0 开始位置就不会跳。如果你发现恢复后位置有偏移检查一下是不是漏了这一步。5.4 内容动态变化后滚动异常如果投影内容是动态的比如通过*ngFor渲染的列表内容变化后contentWidth需要重新测量。ResizeObserver能覆盖大部分场景但如果内容变化不引起尺寸变化比如文字内容变了但长度一样就需要手动触发重新测量。我的做法是暴露一个refresh()方法让外部在需要时调用refresh() { this.measureContent(); this.offset 0; this.applyTransform(); }5.5 常见问题速查表问题现象可能原因解决方式滚动出现空白内容宽度测量不准确保内容渲染完成后测量监听图片加载速度忽快忽慢未用时间差计算用 px/s 配合 delta 计算移动距离悬停恢复后跳变lastTimestamp 未重置鼠标离开时重置 lastTimestamp动态内容不滚动尺寸未重新测量用 ResizeObserver 或手动调用 refresh性能差、卡顿动画在 Angular zone 内用 runOutsideAngular 包裹动画循环实操心得开发阶段可以在applyTransform里加一行console.log(this.offset)观察偏移量的变化是否符合预期。上线前记得去掉不然控制台会刷屏。6. 性能优化与扩展思路6.1 减少重排与重绘跑马灯的性能瓶颈主要在样式更新上。用transform而不是left或top来移动内容是因为transform不会触发重排只会触发合成性能好很多。另外给内容容器加上will-change: transform和backface-visibility: hidden可以进一步提示浏览器做优化。6.2 支持动态速度调整如果需要在运行时改变速度直接改speed输入属性就行因为每一帧都会读取最新的speed值。但要注意如果速度从 0 突然变成很大的值第一帧的移动距离会很大。可以在speed的 setter 里加一个平滑过渡或者限制单帧最大移动距离。6.3 支持点击暂停与手动控制有些场景需要用户点击暂停或者通过按钮控制滚动。可以在组件里加一个paused的Input外部通过双向绑定控制。内部逻辑不用改只需要在animate里判断this.paused就行。6.4 兼容 SSR 的注意事项如果项目用了 Angular Universal 做服务端渲染requestAnimationFrame和ResizeObserver在服务端是不存在的。需要在ngAfterViewInit里判断typeof window ! undefined或者在服务端跳过动画初始化。否则会报错。7. 一些踩过的坑和真实体会这个组件我前前后后改了好几版最开始用 CSS 动画后来换成 JS 控制中间踩的坑确实不少。最大的一个坑是内容宽度测量。当时测试环境的内容是固定文字宽度稳定一切正常。上线后内容变成了动态数据有时候长有时候短结果滚动到一半就出现空白。排查了半天才发现是ResizeObserver没生效因为当时用的浏览器版本不支持polyfill 也没引入。后来加了降级方案用MutationObserver监听内容变化再配合定时器轮询尺寸才彻底解决。另一个坑是性能。最开始动画循环跑在 Angular zone 里页面上一有输入框打字就卡顿。后来用runOutsideAngular包起来流畅度立刻上来了。这个经验让我意识到Angular 的变更检测虽然方便但在高频动画场景下一定要主动隔离。还有一个细节ng-content投影内容如果有多个根节点测量宽度时要把它们都算进去。我当时的做法是在内容容器上设置display: inline-block让容器自动包裹所有子元素这样测容器宽度就等于测所有内容的总宽度。如果子元素是块级元素需要改成display: flex或者手动计算。最后分享一个小技巧调试跑马灯的时候把速度调得很慢比如 10px/s然后打开浏览器的开发者工具用元素审查功能观察transform值的变化。这样能很直观地看到偏移量是否连续、重置时机是否正确。比盯着快速滚动的画面猜问题要高效得多。这个组件后续还可以扩展的方向包括支持触摸滑动暂停、支持滚动到指定位置、支持多行内容交替滚动等。不过核心逻辑不变都是在偏移量计算和重置上做文章。把基础版本吃透扩展起来就是加参数和判断的事。
