124.HarmonyOS NEXT 数字滚动动画详解(四)：性能优化指南

// 优化写法：使用ForEach
ForEach(this.currentData, (item: number, index: number) => {
  // 渲染逻辑
})

// 避免使用：map
this.currentData.map((item: number, index: number) => {
  // 渲染逻辑
})

// 千分位逗号条件渲染
if ((DATA_CONFIG.NUMBER_LEN - index) % DATA_CONFIG.MILLENNIAL_LEN === 0 
    && index !== 0) {
  Text($r('app.string.digital_scroll_animation_comma'))
}

// 性能注意点：控制动画对象数量
this.currentData.forEach((item: number, index: number) => {
  animateTo({
    duration: Math.abs(item - this.preData[index]) * DATA_CONFIG.DURATION_TIME,
    // 动画配置
  })
})

// 根据数值变化动态调整动画时长
duration: Math.abs(item - this.preData[index]) * DATA_CONFIG.DURATION_TIME

// 及时清理定时器和动画资源
onFinish: () => {
  this.preData = this.currentData;
  this.isRefresh = false;
}

// 使用固定长度数组
private currentData: number[] = new Array(DATA_CONFIG.NUMBER_LEN).fill(0);
private preData: number[] = new Array(DATA_CONFIG.NUMBER_LEN).fill(0);

@State scrollYList: number[] = []; // 只将必要的数据声明为状态

// 避免不必要的状态更新
if (this.scrollYList[index] !== newValue) {
  this.scrollYList[index] = newValue;
}

// 缓存上一次的数据
private preData: number[] = new Array(DATA_CONFIG.NUMBER_LEN).fill(0);

Column()
  .height(STYLE_CONFIG.ITEM_HEIGHT)
  .clip(true) // 启用裁剪提高渲染性能

.translate({ x: 0, y: this.scrollYList[index] }) // 使用transform而不是position

const DATA_CONFIG = {
  NUMBER_LEN: 6,
  MILLENNIAL_LEN: 3,
  DURATION_TIME: 100
}

// 避免重复计算
const offset = -item * STYLE_CONFIG.ITEM_HEIGHT;
this.scrollYList[index] = offset;

// 监测动画执行时间
const startTime = Date.now();
animateTo({ /* 配置 */ });
const endTime = Date.now();
console.info(`Animation time: ${endTime - startTime}ms`);

// 监控数组大小
console.info(`Array size: ${this.currentData.length}`);