React Native中能否用Reanimated与SVG实现自定义控件液体按钮动画？

当然可以实现这类液体按钮动画，核心是结合SVG的动态路径绘制能力，搭配Reanimated的高性能动画驱动来模拟液体流动的效果。以下是具体实现思路和简化示例：

• 用SVG构建液体形态：通过<Path>组件定义按钮的液体区域，利用贝塞尔曲线的控制点变化来模拟液体的起伏、涌动形态，动态修改路径的d属性就能实现形态的平滑过渡。
• Reanimated驱动动画参数：创建共享值（shared value）存储动画的偏移量、进度等参数，使用withTiming、withRepeat等动画函数来驱动这些参数变化，让SVG路径随参数实时更新。
• 交互触发动画：通过Pressable或手势处理组件监听点击/按压事件，触发动画的启动、暂停或重置逻辑，比如按压时让液体涌起，松开后回落。

简化实现示例 #

import React from 'react';
import { View, Pressable } from 'react-native';
import Animated, { useSharedValue, withTiming, useAnimatedProps } from 'react-native-reanimated';
import Svg, { Path, Rect } from 'react-native-svg';

const AnimatedPath = Animated.createAnimatedComponent(Path);

const LiquidButton = () => {
  const waveOffset = useSharedValue(0);

  const toggleAnimation = () => {
    waveOffset.value = withTiming(waveOffset.value === 0 ? 15 : 0, { duration: 600 });
  };

  const animatedPathProps = useAnimatedProps(() => {
    const offset = waveOffset.value;
    // 用双贝塞尔曲线模拟液体波动
    return {
      d: `M 0 50 Q 25 ${50 - offset} 50 50 Q 75 ${50 + offset} 100 50 L 100 100 L 0 100 Z`,
    };
  });

  return (
    <Pressable onPress={toggleAnimation} style={{ width: 100, height: 100 }}>
      <Svg width="100%" height="100%">
        {/* 按钮基底 */}
        <Rect x="0" y="0" width="100" height="100" rx="12" fill="#e0e0e0" />
        {/* 动态液体 */}
        <AnimatedPath
          fill="#2196f3"
          animatedProps={animatedPathProps}
        />
      </Svg>
    </Pressable>
  );
};

export default LiquidButton;

如果要实现动图中更复杂的多段波动、融合效果，可以增加更多贝塞尔曲线控制点，结合withSequence编排多阶段动画，同时调整SVG路径的细节来匹配目标形态。

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