Class AnimationHost

adev/src/app/features/home/animation/animation.spec.ts:20–47

const TEST_TIMESTEP = 500;

@Component({
  selector: 'adev-animation-host',
  imports: [AnimationLayerDirective],
  providers: [AnimationCreatorService],
  template: `
    <div adevAnimationLayer layerId="layer-1">
      <div class="circle"></div>
    </div>
    <div adevAnimationLayer layerId="layer-2">
      <div class="square"></div>
    </div>
    <div adevAnimationLayer layerId="layer-3">
      <div class="triangle"></div>
      <div class="triangle"></div>
    </div>
  `,
})
class AnimationHost implements AfterViewInit {
  private animationCreator = inject(AnimationCreatorService);
  layers = viewChildren(AnimationLayerDirective);
  animation!: Animation;

  ngAfterViewInit() {
    this.animation = this.animationCreator.createAnimation(this.layers(), {
      timestep: TEST_TIMESTEP,
    });
  }
}

// Animation definition
const DEFINITION: AnimationDefinition = [