React Native 中如何实现图片的无限持续旋转效果

核心用React Native自带的Animated.loop API实现，不需要指定总旋转时长、总旋转角度，仅需配置单圈旋转时长控制转速，动画即可自动持续运行。

完整实现代码 #

1. 初始化配置

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

// 组件内初始化
const rotateAnimation = useRef(new Animated.Value(0)).current;
// 插值配置：动画值0-1对应旋转角度0-360度
const interpolateRotating = rotateAnimation.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg'],
});
// 存储动画实例，用于后续停止控制
const rotateAnimatedInstance = useRef(null);

2. 动画触发方法

const handleAnimation = () => {
  // 先停止已运行的动画，避免重复触发异常
  rotateAnimatedInstance.current?.stop();
  
  rotateAnimatedInstance.current = Animated.loop(
    Animated.timing(rotateAnimation, {
      toValue: 1,
      duration: 10000, // 仅需配置单圈旋转时长，示例为10秒转一圈，按需调整即可
      useNativeDriver: true, // 开启原生驱动，大幅降低性能损耗
      easing: Easing.linear, // 线性缓动，保证转速均匀无卡顿
    }),
    {
      iterations: -1 // 配置为无限循环，无需指定总循环次数
    }
  ).start();
};

3. 渲染组件

<TouchableOpacity onPress={handleAnimation}>
  <Animated.Image
    style={{
      width: 300,
      height: 300,
      transform: [{ rotate: interpolateRotating }]
    }}
    source={abcd} 
  />
</TouchableOpacity>

注意事项 #

• 如果需要中途停止旋转，直接调用rotateAnimatedInstance.current?.stop()即可
• 必须配置Easing.linear，否则默认缓动会导致每圈开始和结束阶段转速变慢，不符合匀速旋转的需求

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