如何在React Native中实现图片内部蓝色填充动画效果？

你可以通过绝对定位遮罩层+Animated动画实现类似的填充效果，核心思路是用蓝色背景的View覆盖在目标图片上方，通过动画改变遮罩层的位置/尺寸，模拟填充过程。以下是完整的实现示例：

import React, { useRef, useEffect } from 'react';
import { View, Image, Animated, StyleSheet } from 'react-native';

const FillAnimatedImage = () => {
  // 初始化动画值，范围0-1
  const fillAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    // 启动循环填充动画：从0到1（填充）再回到0（清空），每次循环4秒
    Animated.loop(
      Animated.sequence([
        Animated.timing(fillAnim, {
          toValue: 1,
          duration: 2000,
          useNativeDriver: false, // 涉及布局样式，无法使用原生驱动
        }),
        Animated.timing(fillAnim, {
          toValue: 0,
          duration: 2000,
          useNativeDriver: false,
        }),
      ])
    ).start();
  }, [fillAnim]);

  // 插值计算遮罩层位置：从底部往上填充
  const fillStyle = {
    top: fillAnim.interpolate({
      inputRange: [0, 1],
      outputRange: ['100%', '0%'],
    }),
  };

  return (
    <View style={styles.container}>
      <Image
        source={{ uri: 'https://i.sstatic.net/yVhRK.png' }}
        style={styles.image}
        resizeMode="contain"
      />
      {/* 蓝色填充遮罩 */}
      <Animated.View style={[styles.fillMask, fillStyle]} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: 200,
    height: 200,
    overflow: 'hidden', // 限制遮罩层不超出图片边界
    position: 'relative',
  },
  image: {
    width: '100%',
    height: '100%',
  },
  fillMask: {
    position: 'absolute',
    left: 0,
    right: 0,
    height: '100%',
    backgroundColor: 'rgba(0, 122, 255, 0.6)', // 可调整颜色和透明度
  },
});

export default FillAnimatedImage;

关键细节说明： #

• 动画逻辑：通过Animated.loop实现循环动画，Animated.sequence控制填充和清空的顺序，你可以修改duration调整动画速度，或者去掉loop实现单次填充。
• 填充方向调整：如果需要从左到右填充，只需修改fillStyle为基于width的插值：

  const fillStyle = {
    width: fillAnim.interpolate({
      inputRange: [0, 1],
      outputRange: ['0%', '100%'],
    }),
  };
  

• 样式自定义：可以修改fillMask的backgroundColor来调整填充颜色和透明度，容器的width/height可根据实际图片尺寸修改。

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