Angular 5.2+NativeScript 4中*ngFor绑定CSS动画类致UI卡顿

嘿，我碰到过类似的NativeScript动画卡顿问题，给你几个针对性的解决方案，应该能搞定这个UI冻结的情况：

1. 给*ngFor加上trackBy，避免不必要的视图重建 #

默认情况下，当你替换options数组时，ngFor会销毁所有旧的Image组件并重建新的，再加上无限循环的动画，这个过程很容易阻塞UI线程。给ngFor加个trackBy函数，让Angular只更新变化的元素：

组件代码： #

import { Component } from "@angular/core";

@Component({
  // 你的组件配置
})
export class YourGameComponent {
  options: string[] = [];

  // 定义trackBy函数
  trackByOption(index: number, option: string): string {
    return option; // 或者用index，根据你的业务选择
  }

  // 切换图片的方法
  switchToNewOptions(newOptions: string[]) {
    this.options = newOptions;
  }
}

模板代码： #

<Image 
  *ngFor="let o of options; let i = index; trackBy: trackByOption" 
  [class.breath]="true" 
  [src]="'~/images/keys/'+o+'.png'" 
  (tap)="onKeyTap2($event...)"></Image>

2. 替换纯CSS动画，用NativeScript Animation API手动控制生命周期 #

无限循环的CSS动画在视图销毁时，NativeScript可能不会自动停止这些动画，导致动画进程在后台堆积，占用GPU和UI线程资源。换成NativeScript的Animation API，就能主动在切换图片前停止旧动画：

组件代码： #

import { Component, OnInit, OnDestroy } from "@angular/core";
import { Animation } from "tns-core-modules/ui/animation";
import { View } from "tns-core-modules/ui/core/view";

@Component({
  // 你的组件配置
})
export class YourGameComponent implements OnInit, OnDestroy {
  options: string[] = [];
  private activeAnimations: Animation[] = [];

  ngOnInit() {
    // 初始渲染后启动动画
    this.startBreathAnimations();
  }

  ngOnDestroy() {
    // 组件销毁时停止所有动画
    this.stopAllAnimations();
  }

  startBreathAnimations() {
    // 获取所有带breath类的图片元素
    const breathElements = Array.from(document.querySelectorAll('.breath')) as View[];
    breathElements.forEach(el => {
      const anim = new Animation([{
        target: el,
        scale: { x: 1.1, y: 1.1 },
        duration: 1000,
        iterations: Number.POSITIVE_INFINITY,
        alternate: true, // 反向播放，实现呼吸效果
        easing: "ease-in-out"
      }]);
      anim.play();
      this.activeAnimations.push(anim);
    });
  }

  stopAllAnimations() {
    this.activeAnimations.forEach(anim => {
      if (!anim.isFinished) {
        anim.cancel();
      }
    });
    this.activeAnimations = [];
  }

  switchToNewOptions(newOptions: string[]) {
    // 先停止旧动画
    this.stopAllAnimations();
    // 更新图片数组
    this.options = newOptions;
    // 等待视图更新后启动新动画
    setTimeout(() => {
      this.startBreathAnimations();
    }, 100);
  }
}

模板代码（移除[class.breath]，因为现在用代码控制动画）： #

<Image 
  *ngFor="let o of options; let i = index; trackBy: trackByOption" 
  [src]="'~/images/keys/'+o+'.png'" 
  (tap)="onKeyTap2($event...)"></Image>

3. 优化Angular变更检测策略 #

把组件的变更检测改成OnPush，减少不必要的检测周期，降低UI线程的负担：

import { Component, ChangeDetectionStrategy } from "@angular/core";

@Component({
  // 你的组件配置
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourGameComponent {
  // ... 其他代码
}

4. 额外的性能小技巧 #

• 确保你的图片资源是优化过的（压缩到合适的尺寸，用高效格式），避免大图片占用过多内存。
• 切换图片时，尽量避免在同一时间触发大量其他UI操作，把非紧急操作放到setTimeout或者NgZone.runOutsideAngular里执行，不阻塞变更检测。

按照这些步骤调整后，应该就能解决切换图片后的UI卡顿问题了！

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