HarmonyOS开发中的GIF动画：GIF解码、帧序列处理、GIF播放控制、GIF编辑、GIF与WebP对比

核心要点：GIF是移动端动效表达的经典格式——表情包、加载动画、操作引导，到处都是它的身影。本文从GIF的解码原理出发，深入帧序列处理与播放控制，再讲GIF编辑与格式对比，帮你彻底搞懂HarmonyOS中GIF动画的完整技术栈。

一、背景与动机

你每天在微信里发的表情包，十有八九是GIF格式。这种诞生于1987年的图片格式，靠着「短小、能动、兼容好」三大优势，活到了今天还在被广泛使用。

但在移动端开发中，GIF是个让人又爱又恨的东西。爱它是因为它简单直接，一个文件搞定动画；恨它是因为颜色少（最多256色）、体积大、控制能力弱——你想暂停某一帧？想倒放？想调速？原生GIF播放器基本都不支持。

HarmonyOS提供了GIF的解码能力，可以逐帧提取GIF的每一帧图片，这就给了我们完全的控制权。今天咱们就从底层解码开始，一步步实现GIF的帧序列处理、播放控制、编辑，最后和WebP做个对比，看看动图格式的未来在哪里。

二、核心原理

2.1 GIF文件结构

GIF文件由三部分组成：文件头、全局颜色表、图像数据块。

flowchart TD
    classDef primary fill:#4FC3F7,stroke:#0288D1,color:#000
    classDef warning fill:#FFB74D,stroke:#F57C00,color:#000
    classDef error fill:#EF5350,stroke:#C62828,color:#fff
    classDef info fill:#81C784,stroke:#388E3C,color:#000
    classDef purple fill:#CE93D8,stroke:#7B1FA2,color:#000

    A[GIF文件] --> B[文件头 Header]:::primary
    A --> C[逻辑屏幕描述符]:::primary
    A --> D[全局颜色表 256色]:::warning
    A --> E[图像数据块序列]:::info

    C --> C1[画布宽高]:::primary
    C --> C2[背景色索引]:::primary

    E --> F[图像控制扩展]:::info
    E --> G[图像描述符]:::info
    E --> H[LZW压缩数据]:::warning

    F --> F1[帧延迟时间]:::info
    F --> F2[ disposal方法]:::info
    F --> F3[透明色索引]:::info

    G --> G1[帧位置与尺寸]:::info
    G --> G2[局部颜色表]:::info

2.2 GIF帧序列的关键概念

2.3 GIF解码流程

flowchart LR
    classDef primary fill:#4FC3F7,stroke:#0288D1,color:#000
    classDef warning fill:#FFB74D,stroke:#F57C00,color:#000
    classDef error fill:#EF5350,stroke:#C62828,color:#fff
    classDef info fill:#81C784,stroke:#388E3C,color:#000
    classDef purple fill:#CE93D8,stroke:#7B1FA2,color:#000

    A[加载GIF文件] --> B[创建ImageSource]:::primary
    B --> C[获取帧信息]:::info
    C --> D[逐帧解码PixelMap]:::primary
    D --> E[按延迟时间播放]:::warning
    E --> F[处理Disposal]:::info
    F --> D

三、代码实战

3.1 GIF解码与帧序列提取

这是GIF操作的基础——将GIF文件解码为帧序列，提取每一帧的PixelMap和延迟时间。

import { image } from '@kit.ImageKit';
import { fileIo as fs } from '@kit.CoreFileKit';

/**
 * GIF帧数据结构
 */
export interface GifFrame {
  // 帧的PixelMap数据
  pixelMap: image.PixelMap;
  // 帧延迟时间（毫秒）
  delayMs: number;
  // 帧索引
  index: number;
  // 帧的宽高
  width: number;
  height: number;
}

/**
 * GIF解码器
 * 将GIF文件解码为帧序列
 */
export class GifDecoder {
  /**
   * 从文件路径解码GIF
   * @param filePath GIF文件路径
   * @returns 帧序列数组
   */
  static async decodeFromFile(filePath: string): Promise<GifFrame[]> {
    // 读取文件数据
    const file = fs.openSync(filePath, fs.OpenMode.READ_ONLY);
    const stat = fs.statSync(filePath);
    const buffer = new ArrayBuffer(stat.size);
    fs.readSync(file.fd, buffer);
    fs.closeSync(file);

    return GifDecoder.decodeFromBuffer(buffer);
  }

  /**
   * 从ArrayBuffer解码GIF
   * @param buffer GIF二进制数据
   * @returns 帧序列数组
   */
  static async decodeFromBuffer(buffer: ArrayBuffer): Promise<GifFrame[]> {
    const imageSource = image.createImageSource(buffer);
    const frames: GifFrame[] = [];

    try {
      // 获取GIF的帧信息
      const sourceInfo = await imageSource.getSourceInfo();
      const frameCount = sourceInfo.frameCount !== undefined ? sourceInfo.frameCount : 1;
      console.info(`[GifDecoder] GIF帧数: ${frameCount}`);

      // 逐帧解码
      for (let i = 0; i < frameCount; i++) {
        // 获取单帧的延迟时间
        const delayTime = imageSource.getDelayTime(i);
        const delayMs = delayTime * 10; // 转换为毫秒（delayTime单位为1/100秒，但API返回值可能需要*10）

        // 解码单帧
        const pixelMap = await imageSource.createPixelMap({
          editable: false,
          desiredPixelFormat: image.PixelMapFormat.RGBA_8888,
          // 指定解码第i帧
          desiredFrameIndex: i
        });

        const imageInfo = pixelMap.getImageInfo();

        frames.push({
          pixelMap: pixelMap,
          delayMs: Math.max(delayMs, 50), // 最小50ms，避免过快
          index: i,
          width: imageInfo.size.width,
          height: imageInfo.size.height
        });

        console.info(`[GifDecoder] 解码第${i}帧: ${imageInfo.size.width}x${imageInfo.size.height}, 延迟${delayMs}ms`);
      }
    } finally {
      imageSource.release();
    }

    return frames;
  }

  /**
   * 获取GIF信息（不解码帧数据）
   */
  static async getGifInfo(buffer: ArrayBuffer): Promise<{
    frameCount: number;
    width: number;
    height: number;
    totalDuration: number;
  }> {
    const imageSource = image.createImageSource(buffer);
    try {
      const sourceInfo = await imageSource.getSourceInfo();
      const frameCount = sourceInfo.frameCount !== undefined ? sourceInfo.frameCount : 1;

      let totalDuration = 0;
      for (let i = 0; i < frameCount; i++) {
        totalDuration += imageSource.getDelayTime(i) * 10;
      }

      return {
        frameCount: frameCount,
        width: sourceInfo.size.width,
        height: sourceInfo.size.height,
        totalDuration: totalDuration
      };
    } finally {
      imageSource.release();
    }
  }
}

3.2 GIF播放控制器

有了帧序列，就需要一个播放控制器来管理播放、暂停、跳帧、调速等操作。

import { image } from '@kit.ImageKit';

/**
 * GIF播放状态
 */
export enum GifPlayState {
  IDLE = 'idle',
  PLAYING = 'playing',
  PAUSED = 'paused',
  STOPPED = 'stopped'
}

/**
 * GIF播放控制器
 * 支持播放、暂停、跳帧、调速、循环控制
 */
export class GifPlayerController {
  // 帧序列
  private frames: GifFrame[] = [];
  // 当前帧索引
  private currentFrameIndex: number = 0;
  // 播放速度倍率
  private speedMultiplier: number = 1.0;
  // 播放状态
  private playState: GifPlayState = GifPlayState.IDLE;
  // 是否循环播放
  private loopEnabled: boolean = true;
  // 定时器ID
  private timerId: number = -1;
  // 帧更新回调
  private onFrameUpdate?: (frame: GifFrame, index: number) => void;
  // 播放完成回调
  private onPlayComplete?: () => void;

  /**
   * 设置帧序列
   */
  setFrames(frames: GifFrame[]): void {
    this.frames = frames;
    this.currentFrameIndex = 0;
    console.info(`[GifPlayer] 设置帧序列: ${frames.length}帧`);
  }

  /**
   * 设置帧更新回调
   */
  setOnFrameUpdate(callback: (frame: GifFrame, index: number) => void): void {
    this.onFrameUpdate = callback;
  }

  /**
   * 设置播放完成回调
   */
  setOnPlayComplete(callback: () => void): void {
    this.onPlayComplete = callback;
  }

  /**
   * 开始播放
   */
  play(): void {
    if (this.frames.length === 0) {
      console.warn('[GifPlayer] 没有帧数据，无法播放');
      return;
    }
    if (this.playState === GifPlayState.PLAYING) return;

    this.playState = GifPlayState.PLAYING;
    this.scheduleNextFrame();
    console.info('[GifPlayer] 开始播放');
  }

  /**
   * 暂停播放
   */
  pause(): void {
    if (this.playState !== GifPlayState.PLAYING) return;

    this.playState = GifPlayState.PAUSED;
    if (this.timerId !== -1) {
      clearTimeout(this.timerId);
      this.timerId = -1;
    }
    console.info('[GifPlayer] 暂停播放');
  }

  /**
   * 停止播放（回到第一帧）
   */
  stop(): void {
    this.playState = GifPlayState.STOPPED;
    if (this.timerId !== -1) {
      clearTimeout(this.timerId);
      this.timerId = -1;
    }
    this.currentFrameIndex = 0;
    this.notifyFrameUpdate();
    console.info('[GifPlayer] 停止播放');
  }

  /**
   * 跳转到指定帧
   * @param frameIndex 帧索引
   */
  seekTo(frameIndex: number): void {
    if (frameIndex < 0 || frameIndex >= this.frames.length) {
      console.warn(`[GifPlayer] 无效的帧索引: ${frameIndex}`);
      return;
    }
    this.currentFrameIndex = frameIndex;
    this.notifyFrameUpdate();
    console.info(`[GifPlayer] 跳转到第${frameIndex}帧`);
  }

  /**
   * 设置播放速度
   * @param speed 速度倍率（0.5x ~ 3.0x）
   */
  setSpeed(speed: number): void {
    this.speedMultiplier = Math.max(0.5, Math.min(3.0, speed));
    console.info(`[GifPlayer] 设置播放速度: ${this.speedMultiplier}x`);
  }

  /**
   * 设置是否循环播放
   */
  setLoopEnabled(enabled: boolean): void {
    this.loopEnabled = enabled;
  }

  /**
   * 获取当前播放状态
   */
  getPlayState(): GifPlayState {
    return this.playState;
  }

  /**
   * 获取当前帧索引
   */
  getCurrentFrameIndex(): number {
    return this.currentFrameIndex;
  }

  /**
   * 获取总帧数
   */
  getFrameCount(): number {
    return this.frames.length;
  }

  /**
   * 获取当前帧
   */
  getCurrentFrame(): GifFrame | null {
    if (this.frames.length === 0) return null;
    return this.frames[this.currentFrameIndex];
  }

  /**
   * 调度下一帧
   */
  private scheduleNextFrame(): void {
    if (this.playState !== GifPlayState.PLAYING) return;

    const currentFrame = this.frames[this.currentFrameIndex];
    // 根据速度倍率调整延迟时间
    const adjustedDelay = currentFrame.delayMs / this.speedMultiplier;

    this.timerId = setTimeout(() => {
      this.advanceFrame();
    }, adjustedDelay);
  }

  /**
   * 推进到下一帧
   */
  private advanceFrame(): void {
    this.currentFrameIndex++;

    if (this.currentFrameIndex >= this.frames.length) {
      if (this.loopEnabled) {
        // 循环播放：回到第一帧
        this.currentFrameIndex = 0;
      } else {
        // 非循环：停止播放
        this.playState = GifPlayState.STOPPED;
        this.currentFrameIndex = this.frames.length - 1;
        this.notifyFrameUpdate();
        if (this.onPlayComplete) {
          this.onPlayComplete();
        }
        console.info('[GifPlayer] 播放完成');
        return;
      }
    }

    this.notifyFrameUpdate();
    this.scheduleNextFrame();
  }

  /**
   * 通知帧更新
   */
  private notifyFrameUpdate(): void {
    if (this.onFrameUpdate && this.frames.length > 0) {
      this.onFrameUpdate(this.frames[this.currentFrameIndex], this.currentFrameIndex);
    }
  }

  /**
   * 释放资源
   */
  release(): void {
    this.stop();
    // 释放所有帧的PixelMap
    for (const frame of this.frames) {
      frame.pixelMap.release();
    }
    this.frames = [];
    console.info('[GifPlayer] 资源已释放');
  }
}

3.3 完整的GIF播放器UI组件

把解码器和播放控制器组合起来，实现一个功能完整的GIF播放器，支持播放控制、帧预览、速度调节。

import { image } from '@kit.ImageKit';
import { fileIo as fs } from '@kit.CoreFileKit';
import { picker } from '@kit.CoreFileKit';

@Entry
@Component
struct GifPlayerDemo {
  // 当前显示的帧
  @State currentPixelMap: image.PixelMap | undefined = undefined;
  // 播放状态
  @State playStateText: string = '未加载';
  // 当前帧索引
  @State currentFrameIndex: number = 0;
  // 总帧数
  @State totalFrames: number = 0;
  // 播放速度
  @State speedText: string = '1.0x';
  // 进度条值
  @State progressValue: number = 0;
  // 帧缩略图列表
  @State frameThumbnails: image.PixelMap[] = [];

  // 播放控制器
  private player: GifPlayerController = new GifPlayerController();

  aboutToAppear(): void {
    // 设置帧更新回调
    this.player.setOnFrameUpdate((frame: GifFrame, index: number) => {
      this.currentPixelMap = frame.pixelMap;
      this.currentFrameIndex = index;
      this.progressValue = this.totalFrames > 0 ? (index / this.totalFrames) * 100 : 0;
    });

    this.player.setOnPlayComplete(() => {
      this.playStateText = '播放完成';
    });
  }

  aboutToDisappear(): void {
    this.player.release();
  }

  /**
   * 从文件加载GIF
   */
  async loadGifFromFile(filePath: string): Promise<void> {
    try {
      this.playStateText = '解码中...';

      // 解码GIF
      const frames = await GifDecoder.decodeFromFile(filePath);
      this.totalFrames = frames.length;

      // 生成帧缩略图（取前10帧）
      this.frameThumbnails = [];
      const thumbnailCount = Math.min(10, frames.length);
      for (let i = 0; i < thumbnailCount; i++) {
        this.frameThumbnails.push(frames[i].pixelMap);
      }

      // 设置帧序列并显示第一帧
      this.player.setFrames(frames);
      this.currentPixelMap = frames[0].pixelMap;
      this.currentFrameIndex = 0;
      this.playStateText = '已加载';
      this.progressValue = 0;

      console.info(`[GifPlayerDemo] GIF加载完成: ${frames.length}帧`);
    } catch (err) {
      this.playStateText = '加载失败';
      console.error('[GifPlayerDemo] GIF加载失败: ' + err);
    }
  }

  build() {
    Column() {
      // 标题
      Text('GIF动画播放器')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 16 })

      // GIF显示区域
      Row() {
        if (this.currentPixelMap) {
          Image(this.currentPixelMap)
            .width(240)
            .height(240)
            .objectFit(ImageFit.Contain)
            .borderRadius(8)
        } else {
          Column() {
            Text('点击下方按钮加载GIF')
              .fontSize(14)
              .fontColor('#999999')
          }
          .width(240)
          .height(240)
          .justifyContent(FlexAlign.Center)
          .backgroundColor('#1A1A2E')
          .borderRadius(8)
        }
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .margin({ bottom: 16 })

      // 播放状态信息
      Row() {
        Text(this.playStateText)
          .fontSize(14)
          .fontColor('#4FC3F7')
        Text(`帧: ${this.currentFrameIndex + 1}/${this.totalFrames}`)
          .fontSize(14)
          .fontColor('#AAAAAA')
        Text(`速度: ${this.speedText}`)
          .fontSize(14)
          .fontColor('#AAAAAA')
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .margin({ bottom: 12 })

      // 进度条
      Progress({ value: this.progressValue, total: 100, type: ProgressType.Linear })
        .width('100%')
        .color('#4FC3F7')
        .margin({ bottom: 16 })

      // 播放控制按钮
      Row() {
        Button('加载GIF')
          .backgroundColor('#4FC3F7')
          .fontColor('#000000')
          .onClick(async () => {
            // 使用文件选择器选择GIF文件
            const documentPicker = new picker.DocumentViewPicker();
            const selectResult = await documentPicker.select({
              maxSelectNumber: 1,
              fileSuffixFilters: ['.gif']
            });
            if (selectResult.length > 0) {
              await this.loadGifFromFile(selectResult[0]);
            }
          })

        Button('播放')
          .backgroundColor('#81C784')
          .fontColor('#000000')
          .onClick(() => {
            this.player.play();
            this.playStateText = '播放中';
          })

        Button('暂停')
          .backgroundColor('#FFB74D')
          .fontColor('#000000')
          .onClick(() => {
            this.player.pause();
            this.playStateText = '已暂停';
          })

        Button('停止')
          .backgroundColor('#EF5350')
          .fontColor('#FFFFFF')
          .onClick(() => {
            this.player.stop();
            this.playStateText = '已停止';
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .margin({ bottom: 16 })

      // 速度控制
      Row() {
        Text('速度控制')
          .fontSize(14)
          .fontColor('#AAAAAA')

        Button('0.5x')
          .backgroundColor(this.speedText === '0.5x' ? '#CE93D8' : '#333333')
          .fontColor('#FFFFFF')
          .onClick(() => {
            this.player.setSpeed(0.5);
            this.speedText = '0.5x';
          })

        Button('1.0x')
          .backgroundColor(this.speedText === '1.0x' ? '#CE93D8' : '#333333')
          .fontColor('#FFFFFF')
          .onClick(() => {
            this.player.setSpeed(1.0);
            this.speedText = '1.0x';
          })

        Button('2.0x')
          .backgroundColor(this.speedText === '2.0x' ? '#CE93D8' : '#333333')
          .fontColor('#FFFFFF')
          .onClick(() => {
            this.player.setSpeed(2.0);
            this.speedText = '2.0x';
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .margin({ bottom: 16 })

      // 帧缩略图预览
      if (this.frameThumbnails.length > 0) {
        Text('帧预览')
          .fontSize(14)
          .fontColor('#AAAAAA')
          .margin({ bottom: 8 })

        Scroll() {
          Row() {
            ForEach(this.frameThumbnails, (thumbnail: image.PixelMap, index: number) => {
              Image(thumbnail)
                .width(48)
                .height(48)
                .objectFit(ImageFit.Contain)
                .border({
                  width: this.currentFrameIndex === index ? 2 : 0,
                  color: '#4FC3F7'
                })
                .borderRadius(4)
                .margin({ right: 4 })
                .onClick(() => {
                  this.player.seekTo(index);
                })
            })
          }
        }
        .scrollable(ScrollDirection.Horizontal)
        .width('100%')
        .height(64)
      }
    }
    .width('100%')
    .height('100%')
    .padding(16)
    .backgroundColor('#0D0D1A')
  }
}

3.4 GIF与WebP动画对比

在实际开发中，选择GIF还是WebP动画格式是一个常见的决策点。下面是一个详细的对比分析工具。

/**
 * 动图格式对比分析
 * GIF vs WebP (Animated)
 */
export class AnimatedImageComparator {

  /**
   * 对比分析两种格式的特性
   */
  static compare(): void {
    const comparison = {
      gif: {
        format: 'GIF89a',
        maxColors: 256,
        compressionType: 'LZW无损压缩',
        transparencySupport: '1位（全透明/全不透明）',
        animationSupport: '多帧，帧间延迟可调',
        fileSize: '通常较大（同质量下比WebP大2-5倍）',
        compatibility: '几乎所有平台和浏览器',
        useCases: '表情包、简单动画、兼容性优先场景'
      },
      webp: {
        format: 'WebP (Lossy/Lossless)',
        maxColors: '1677万（24位真彩色）',
        compressionType: 'VP8有损 / VP8L无损',
        transparencySupport: '8位Alpha通道（半透明）',
        animationSupport: '多帧，帧间延迟可调，支持混合模式',
        fileSize: '通常较小（比GIF小26%-70%）',
        compatibility: '现代浏览器和平台（HarmonyOS支持）',
        useCases: '高质量动图、体积敏感场景、半透明动画'
      }
    };

    console.info('[Comparator] GIF vs WebP 对比:');
    console.info(JSON.stringify(comparison, null, 2));
  }

  /**
   * 计算GIF和WebP的体积对比
   * @param gifSize GIF文件大小（字节）
   * @param webpSize WebP文件大小（字节）
   */
  static calculateSizeDiff(gifSize: number, webpSize: number): {
    gifKB: string;
    webpKB: string;
    saving: string;
    recommendation: string;
  } {
    const gifKB = (gifSize / 1024).toFixed(2);
    const webpKB = (webpSize / 1024).toFixed(2);
    const saving = ((1 - webpSize / gifSize) * 100).toFixed(1);

    let recommendation = '';
    if (parseFloat(saving) > 30) {
      recommendation = '强烈推荐使用WebP，体积节省显著';
    } else if (parseFloat(saving) > 10) {
      recommendation = '推荐使用WebP，体积有一定节省';
    } else {
      recommendation = '两者体积差异不大，可根据兼容性需求选择';
    }

    return {
      gifKB: gifKB + ' KB',
      webpKB: webpKB + ' KB',
      saving: saving + '%',
      recommendation: recommendation
    };
  }
}

四、踩坑与注意事项

4.1 GIF帧延迟时间的不一致性

GIF规范中，帧延迟时间的单位是1/100秒，但不同工具导出的GIF可能不一致：

• Photoshop导出的GIF，延迟时间通常是10（即100ms）的倍数
• 浏览器对极短的延迟时间有最小值限制（Chrome最低20ms，Firefox最低10ms）
• 有些GIF的延迟时间为0，实际应按100ms处理

建议：解码时对delayTime做保护处理，delayMs = Math.max(delayTime * 10, 50)。

4.2 大GIF的内存问题

GIF的每一帧都是一张完整的PixelMap。一个30帧、400x400的GIF，内存占用约为30 × 400 × 400 × 4 = 19.2MB。如果GIF更大或帧数更多，内存压力会非常大。

解决方案：

• 按需解码：只解码当前帧和预加载下一帧，不一次性解码所有帧
• 降低分辨率：解码时指定desiredSize缩小尺寸
• 使用Image组件的原生GIF播放：对于不需要精细控制的场景，直接用Image组件播放GIF，系统会自动管理内存

// 简单场景：直接用Image组件播放GIF
Image($r('app.media.animated_gif'))
  .width(200)
  .height(200)
  .autoPlay(true)  // 自动播放

4.3 disposal方法的处理

GIF的disposal方法决定了帧之间的叠加方式，但手动实现帧叠加比较复杂。如果你用createPixelMap({ desiredFrameIndex: i })逐帧解码，HarmonyOS的ImageSource已经帮你处理了disposal，每帧返回的都是完整的合成结果。

重要：不要自己手动叠加帧，直接使用解码后的PixelMap即可。

4.4 Image组件的autoPlay限制

Image组件的autoPlay属性只对GIF和WebP动画有效。但它的控制能力很有限——只能播放和暂停，不能跳帧、调速、倒放。

建议：需要精细控制的场景，必须用解码器+播放控制器的方案。

4.5 WebP动画的兼容性

WebP动画在HarmonyOS 5.0+上完全支持，但在某些旧版本或特定设备上可能有问题。如果你的应用需要兼容更早的版本，GIF是更安全的选择。

五、HarmonyOS 6适配

5.1 GIF/WebP解码API变化

5.2 性能优化

HarmonyOS 6对GIF/WebP解码做了GPU加速优化：

• 帧解码速度提升约40%
• 内存占用减少约20%（内部优化了帧缓冲区管理）
• 新增流式解码模式：边下载边解码，适合大GIF的网络播放场景

5.3 迁移建议

// HarmonyOS 6新增：获取更详细的帧信息
const frameInfo = await imageSource.getFrameInfo(i);
// frameInfo包含：delayTime, disposalMethod, transparentColorIndex, left, top, width, height

// HarmonyOS 6新增：流式解码
const imageSource = image.createIncrementalImageSource(buffer);
// 支持边接收数据边解码，适合网络GIF流式播放

六、总结

一句话总结：GIF动画的正确打开方式是「简单场景用Image原生播放，精细控制用解码器+播放器，大GIF注意内存，新项目优先考虑WebP」——选对方案，动效不再卡顿。