javascript - 如何使用 Angular 6 设置永久迭代

Question

我正在尝试用 Angular(6) 复制一棵动画树，其叶子在随机空间中移动，如可见 here

编辑，用 Angular 动画和动画结束时修改状态的回调来解决。

模板:

  <span *ngFor="let leaf of animatedLeafs" 
  [ngStyle] = "{
    'height.px': leaf.height,
    'width.px': leaf.height
  }"
  [@animateLeaf] = "{
    value: statusState,
    params: {
      top: leaf.top,
      left: leaf.left,
      angle: leaf.angle,
      topDir: leaf.topDir,
      leftDir: leaf.leftDir,
      angleDir: leaf.angleDir
    }}"
  (@animateLeaf.done)="loopAnimation($event)"
  class="leaf-icon">
  </span>

组件动画:

animations: [
    trigger('animateLeaf', [
      state('start-state', style({
        transform: `translate3d({{left}}px, {{top}}px, 0) rotate({{angle}}deg)`
      }), {params: {height: 0, left: 0, top: 0, angle: 0}}),
      state('loop-state', style({
        transform: `translate3d({{leftDir}}px, {{topDir}}px, 0) rotate({{angleDir}}deg)`
      }), {params: {height: 0, leftDir: 0, topDir: 0, angleDir: 0}}),
      transition('loop-state=>start-state', animate('3s ease-in-out')),
      transition('start-state=>loop-state', animate('3s ease-in-out'))
    ])
  ]

在类里面:

export class AnimatedTreeComponent implements OnInit {
  statusState = 'start-state';

  constructor() {
  }
  loopAnimation(event) {
    console.log(event.toState);
    this.statusState = event.toState === "loop-state" ? "start-state" : "loop-state" 
  }
  ngOnInit() {
    this.createLeafs()
    this.statusState = 'loop-state'
  }

希望对一些人有帮助:)

Answer 1

如果您不想使用 Angular 动画，则应该使用 CSS3 keyframes 。

(我不会给你上这方面的类(class)，20分钟你就能理解)。

如果您想留在 Angular 上下文中并以其他方式制作动画，您可以使用 ViewChildren :

<span *ngFor="let leaf of leafs" #leafs></span>

@ViewChildren('leafs') leafs: QueryList<ElementRef<HTMLSpanElement>>;

有了这些 subview ，您就可以在调用函数时获取元素，例如在 (click) 上。

最后，如果您想在开始时对它们进行任何设置，那么您将需要一个指令。

<span *ngFor="let leaf of leafs" animateLeaf></span>

@Directive({ selector: 'animateLeaf' })
export class AnimateLeafDirective implements OnInit {
  leaf: HTMLSpanElement;

  constructor(private el: ElementRef<HTMLSpanElement>) {}

  ngOnInit() {
    this.leaf = this.el.nativeElement;
    /* animate */
  }
}