如何实现React Native中图片的循环脉冲加载动画？

开发者阿泽

2026-7-30

问题分析与修复方案

你的代码存在几个关键问题，导致无法实现无限循环的脉冲缩放效果：

Animated.loop 仅包裹了第一个动画，回调内的第二个动画不在循环范围内，只会执行一次就停止
第一个动画的 toValue 和初始值均为0，没有任何动画变化
插值的输出范围设置不符合需求，当前是从1缩到0，而非交替缩放的脉冲效果

修复后的简洁实现

import { useRef, useEffect } from 'react';
import { Animated } from 'react-native';

// 假设Logo已正确导入
export default function PulseLoader() {
  const scaleValue = useRef(new Animated.Value(1)).current;

  useEffect(() => {
    const pulseAnimation = Animated.timing(scaleValue, {
      toValue: 1.2, // 放大到原尺寸的1.2倍
      duration: 800,
      useNativeDriver: true,
      autoreverse: true, // 动画结束后自动反向执行
      repeat: -1 // 无限重复（-1表示无限次）
    });

    pulseAnimation.start();

    // 组件卸载时停止动画，避免内存泄漏
    return () => pulseAnimation.stop();
  }, []);

  return (
    <Animated.Image
      style={{
        width: 165,
        height: 75,
        transform: [{ scale: scaleValue }]
      }}
      source={Logo}
    />
  );
}

手动控制正反动画的实现方式

如果你更倾向于手动管理正向和反向动画流程，可以用 Animated.loop 包裹 Animated.sequence：

useEffect(() => {
  const pulseSequence = Animated.sequence([
    Animated.timing(scaleValue, {
      toValue: 1.2,
      duration: 800,
      useNativeDriver: true
    }),
    Animated.timing(scaleValue, {
      toValue: 1,
      duration: 800,
      useNativeDriver: true
    })
  ]);

  const loopAnimation = Animated.loop(pulseSequence);
  loopAnimation.start();

  return () => loopAnimation.stop();
}, []);