Angular ts实现多段字幕横向移动

我可以回答这个问题。在 Angular 中，你可以使用 Animation API 实现多段字幕横向移动。具体实现方法可以参考以下示例代码：

1. 在 HTML 中定义需要移动的字幕：

<div class="subtitle-container" #subtitleRef>
  <div class="subtitle" *ngFor="let subtitle of subtitles">{{subtitle}}</div>
</div>

2. 在 Component 中设置字幕和动画：

import { Component, ElementRef, ViewChild } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-subtitle',
  template: `
    <div class="subtitle-container" #subtitleRef>
      <div class="subtitle" *ngFor="let subtitle of subtitles">{{subtitle}}</div>
    </div>
  `,
  styles: [
    `
      .subtitle-container {
        overflow: hidden;
      }
      .subtitle {
        display: inline-block;
        white-space: nowrap;
        font-size: 16px;
        padding-right: 50px; /*设置字幕移动的距离*/
      }
    `
  ],
  animations: [
    trigger('subtitleAnimation', [
      state('void', style({ transform: 'translateX(100%)' })),
      transition(':enter', [
        animate('600ms ease', style({ transform: 'translateX(0%)' }))
      ])
    ])
  ]
})
export class SubtitleComponent {
  @ViewChild('subtitleRef', { static: true }) subtitleRef: ElementRef;
  subtitles = ['This is subtitle 1', 'This is subtitle 2', 'This is subtitle 3']; // 定义需要移动的多个字幕

  constructor() {}

  ngOnInit() {
    const subtitleEls = this.subtitleRef.nativeElement.querySelectorAll('.subtitle');
    subtitleEls.forEach((el, i) => {
      el.style.animationDelay = `${i * 3}s`; // 设置不同的动画延迟时间，达到每个字幕错落有致的效果
    });
  }
}

通过上述代码，你可以实现多个字幕的横向移动效果。希望能对你有所帮助。