如何实现从其他组件位置出发的Observable元素独立序列动画

1. 跨组件获取动画起始位置 #

你需要先拿到另一个组件中起始元素的绝对坐标，用于动画的初始位置计算，可按以下方式实现：

• 定义共享服务存储起始位置坐标，避免组件层级限制导致的传值问题，示例服务代码：

// 共享服务
@Injectable({providedIn: 'root'})
export class AnimationPositionService {
  startPosition = {x: 0, y: 0};
  updateStartPosition(el: ElementRef) {
    const rect = el.nativeElement.getBoundingClientRect();
    this.startPosition = {x: rect.left, y: rect.top};
  }
}

• 在放置起始元素的组件中，通过ViewChild拿到起始元素实例，在页面布局稳定后（可在ngAfterViewInit生命周期或者点击触发按钮前）调用服务的updateStartPosition方法更新坐标。

2. 实现独立序列位移动画 #

核心是通过RxJS操作符控制动画执行顺序，结合Angular动画的完成回调实现排队逻辑：

第一步：定义位移动画触发器 #

使用Angular动画模块定义支持动态参数的位移动画：

@Component({
  animations: [
    trigger('cardMove', [
      transition('* => end', [
        style({
          transform: 'translate3d({{startX}}px, {{startY}}px, 0)',
          opacity: 1
        }),
        animate('0.3s ease', style({
          transform: 'translate3d(0, 0, 0)',
          opacity: 1
        }))
      ], {params: {startX: 0, startY: 0}})
    ])
  ]
})

第二步：封装单卡片动画逻辑 #

将单个卡片的动画执行过程封装为返回Observable的方法，动画完成时触发结束信号：

runCardAnimation(card: CardType): Observable<void> {
  return new Observable(sub => {
    // 1. 插入卡片到视图
    this.renderCardList.push(card);
    // 2. 等待视图渲染完成后触发动画
    setTimeout(() => {
      // 从共享服务取起始位置作为动画参数
      this.animationState[card.id] = {
        value: 'end',
        params: {
          startX: this.posService.startPosition.x,
          startY: this.posService.startPosition.y
        }
      };
    }, 10);
  });
}

// 监听动画完成事件，模板中绑定(@cardMove.done)="onAnimationDone($event)"
onAnimationDone(event: AnimationEvent) {
  // 匹配当前完成的卡片，发送完成信号
  const currentCardId = event.element.id;
  this.animationFinishSubject.next(currentCardId);
}

第三步：用RxJS控制序列执行 #

使用concatMap操作符处理卡片Observable流，保证前一个卡片动画完成后再执行下一个：

this.cards$.pipe(
  concatMap(card => 
    this.runCardAnimation(card).pipe(
      skipUntil(this.animationFinishSubject.pipe(filter(id => id === card.id)))
    )
  )
).subscribe();

通过以上方式即可实现卡片从跨组件的起始位置出发，按顺序逐个执行位移动画的效果，避免所有卡片同时展示同时动画的问题。

内容的提问来源于stack exchange，提问作者emp