React Native实现多图片逐帧循环动画的技术求助

核心思路是通过状态跟踪当前显示的动画帧索引，使用定时器逐帧切换索引，而非一次性渲染所有图片。以下是具体实现步骤：

1. 添加状态变量 #

在组件中定义必要的状态和引用，用于控制动画流程：

import { useState, useRef, useEffect } from 'react';
import { Image, TouchableOpacity, View } from 'react-native';
import animImages from './path/to/animImages'; // 替换为你的实际文件路径

// 组件内部
const [isAnimating, setIsAnimating] = useState(false);
const [currentFrameIndex, setCurrentFrameIndex] = useState(0);
const animationTimer = useRef(null); // 存储定时器引用，方便后续清除

2. 实现动画控制逻辑 #

编写启动和停止动画的函数，包含循环播放和时长控制：

// 启动动画：参数为总时长（毫秒）、每帧间隔（毫秒）
const startAnimation = (duration = 3000, frameInterval = 100) => {
  setIsAnimating(true);
  setCurrentFrameIndex(0);

  const totalFrames = Math.floor(duration / frameInterval);
  let frameCount = 0;

  animationTimer.current = setInterval(() => {
    // 切换到下一帧，循环回到开头
    setCurrentFrameIndex(prev => (prev + 1) % animImages.length);
    frameCount++;

    // 达到指定时长后自动停止动画
    if (frameCount >= totalFrames) {
      stopAnimation();
    }
  }, frameInterval);
};

// 停止动画，清理定时器并切换回按钮状态
const stopAnimation = () => {
  if (animationTimer.current) {
    clearInterval(animationTimer.current);
    animationTimer.current = null;
  }
  setIsAnimating(false);
};

3. 修改渲染逻辑 #

根据状态控制显示按钮或当前帧的图片，保证位置和样式与原按钮一致：

{isAnimating ? (
  <View style={styles.elevatedView}>
    <TouchableOpacity onPress={stopAnimation}>
      {/* 仅渲染当前索引对应的图片 */}
      <Image 
        source={animImages[currentFrameIndex]} 
        style={/* 设置和原按钮相同的宽高、对齐方式等样式 */}
      />
    </TouchableOpacity>
  </View>
) : (
  <View style={styles.elevatedView}>
    <TouchableOpacity onPress={() => startAnimation(3000, 100)}>
      <IconsRender icon={componentProps.icons.icon} />
    </TouchableOpacity>
  </View>
)}

4. 组件卸载时清理定时器 #

避免内存泄漏，在组件卸载前清除定时器：

useEffect(() => {
  return () => {
    if (animationTimer.current) {
      clearInterval(animationTimer.current);
    }
  };
}, []);

关键说明 #

• 帧间隔frameInterval决定动画流畅度，数值越小动画速度越快（比如100ms对应10帧/秒），可按需调整。
• 点击动画中的图片可手动停止动画，直接回到按钮状态。
• 总时长duration可自定义，示例中设置为3000即循环播放3秒后自动停止。

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