如何在独立Angular应用中基于媒体查询全局禁用动画？

在Angular新的独立提供者模式下，要实现根据系统prefers-reduced-motion媒体查询动态启用/禁用动画，可通过以下两种方式实现：

方式一：初始加载时动态选择提供者 #

这种方式在应用启动时根据当前媒体查询结果，决定注入provideAnimations()或provideNoopAnimations()，适合不需要在运行时响应偏好变化的场景。

实现代码 #

先创建工厂函数返回对应动画提供者：

import { provideAnimations, provideNoopAnimations } from '@angular/platform-browser/animations';

export function getAnimationProvider() {
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion)').matches;
  return prefersReducedMotion ? provideNoopAnimations() : provideAnimations();
}

再在bootstrapApplication中使用该函数：

bootstrapApplication(AppComponent, {
  providers: [
    getAnimationProvider(),
    // 其他应用提供者
  ]
});

方式二：运行时动态响应偏好变化 #

如果需要在应用运行中，当用户修改系统动画偏好时自动切换动画状态，可以通过直接控制AnimationDriver的实现来完成：

实现代码 #

import { FactoryProvider } from '@angular/core';
import { AnimationDriver } from '@angular/animations/browser';
import { BrowserAnimationDriver, NoopAnimationDriver } from '@angular/platform-browser/animations';
import { ɵAnimationEngine as AnimationEngine } from '@angular/animations/browser';

export function provideDynamicAnimations(): FactoryProvider {
  let animationDriver: AnimationDriver;
  const motionQuery = window.matchMedia('(prefers-reduced-motion)');

  // 初始化驱动并更新动画引擎
  const updateDriver = (matches: boolean) => {
    animationDriver = matches ? new NoopAnimationDriver() : new BrowserAnimationDriver();
    
    // 更新已初始化的动画引擎（使用Angular内部API，注意版本兼容性）
    const engine = (window as any).ɵangular_packages_platform_browser_animations_animations
      ?.AngularAnimationsModule.instance?.engine as AnimationEngine;
    if (engine) {
      engine.driver = animationDriver;
    }
  };

  // 初始设置
  updateDriver(motionQuery.matches);

  // 监听偏好变化
  motionQuery.addEventListener('change', (e) => updateDriver(e.matches));

  return {
    provide: AnimationDriver,
    useFactory: () => animationDriver
  };
}

在bootstrapApplication中注入该提供者：

bootstrapApplication(AppComponent, {
  providers: [
    provideDynamicAnimations(),
    // 其他应用提供者
  ]
});

注意：第二种方式使用了Angular内部API（ɵAnimationEngine），当前版本可行，但未来版本可能变动，需注意兼容性。

内容的提问来源于stack exchange，提问作者Mikkel R. Lund