React Native背景动画反向播放实现求助

要让你的背景动画完成正向播放后自动反向、循环往复，可以通过两种简单方式修改代码：

方法一：利用Animated.loop的autoreverse属性（推荐） #

这是最简洁的实现方式，给Animated.loop添加autoreverse: true配置后，动画会在每次正向播放完成后自动反向，再重复整个循环。

修改后的完整代码：

import {
  ANIMATION_DURATION,
  ANIMATION_TO_VALUE,
  INPUT_RANGE_END,
  INPUT_RANGE_START,
  OUTPUT_RANGE_END,
  OUTPUT_RANGE_START,
} from "../constant";
import { DevHeight, DevWidth } from "../utils/device";
import React, { useEffect, useRef } from "react";
import { StyleSheet, Animated, Easing } from "react-native";

export const AnimatedBackground = ({ backgroundImage, style }) => {
  const initialValue = 0;
  const translateValue = useRef(new Animated.Value(initialValue)).current;

  const translate = () => {
    translateValue.setValue(initialValue);
    Animated.loop(
      Animated.timing(translateValue, {
        toValue: ANIMATION_TO_VALUE,
        duration: ANIMATION_DURATION,
        easing: Easing.linear,
        useNativeDriver: true,
      }),
      {
        autoreverse: true, // 开启自动反向播放
        iterations: -1, // 无限循环（默认值，可省略）
      }
    ).start();
  };

  useEffect(() => {
    translate();
  }, []); // 修正依赖，避免重复触发动画

  const translateAnimation = translateValue.interpolate({
    inputRange: [INPUT_RANGE_START, INPUT_RANGE_END],
    outputRange: [OUTPUT_RANGE_START, OUTPUT_RANGE_END],
  });

  return (
    <Animated.Image
      resizeMode={'repeat'}
      style={[
        styles.background,
        {
          transform: [
            { translateX: translateAnimation },
            { translateY: translateAnimation },
          ],
        },
        style
      ]}
      source={backgroundImage}
    />
  );
};

export default AnimatedBackground;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  background: {
    position: 'absolute',
    width: DevWidth * 2,
    height: DevHeight * 2,
    flex: 1,
    top: 0,
    opacity: 0.2,
  },
});

方法二：手动组合正向+反向动画序列 #

如果需要给正向、反向动画设置不同的时长或缓动函数，可以用Animated.sequence把两个动画组合起来，再用Animated.loop包裹：

const translate = () => {
  translateValue.setValue(initialValue);
  Animated.loop(
    Animated.sequence([
      // 正向动画
      Animated.timing(translateValue, {
        toValue: ANIMATION_TO_VALUE,
        duration: ANIMATION_DURATION,
        easing: Easing.linear,
        useNativeDriver: true,
      }),
      // 反向动画
      Animated.timing(translateValue, {
        toValue: initialValue,
        duration: ANIMATION_DURATION, // 可设置与正向不同的时长
        easing: Easing.linear,
        useNativeDriver: true,
      }),
    ])
  ).start();
};

关键说明 #

1. 修正useEffect依赖：原代码依赖translateValue无意义，它是useRef实例不会触发重渲染，改成空数组可避免重复启动动画。
2. autoreverse逻辑：开启后循环会先执行正向动画，再自动反向，完美实现往返效果。
3. 线性缓动适配：你使用的Easing.linear能让往返过程平滑无突兀感，保持原有动画的流畅性。

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