React Native实现文本弹跳动画视图的技术问题

嘿，这个需求我之前做过类似的！你遇到的Animated.Text不支持measure的问题其实很好解决——咱们换个思路，用一个普通的View把Animated.Text包裹起来，然后对这个View调用measure方法就行，因为普通View是完全支持measure的。

下面是具体的实现步骤和代码示例：

核心思路 #

• 用View包裹Animated.Text，通过View的ref来获取文本的实际宽高
• 在组件挂载完成后，测量View的尺寸，计算出文本可以移动的边界（父容器宽高 - 文本宽高）
• 创建X、Y轴的循环动画，让文本在边界内来回弹跳
• 将动画值绑定到Animated.Text的top和left样式上

完整代码示例 #

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

const { width: containerWidth, height: containerHeight } = Dimensions.get('window');

const BouncingText = () => {
  // 保存动画值和包裹View的ref
  const textWrapperRef = useRef(null);
  const animatedX = useRef(new Animated.Value(0)).current;
  const animatedY = useRef(new Animated.Value(0)).current;
  
  let textWidth = 0;
  let textHeight = 0;

  useEffect(() => {
    // 组件挂载后测量文本尺寸
    textWrapperRef.current?.measure((x, y, w, h) => {
      textWidth = w;
      textHeight = h;
      // 启动弹跳动画
      startBounceAnimation();
    });
  }, []);

  const startBounceAnimation = () => {
    // 计算可移动的最大范围
    const maxX = containerWidth - textWidth;
    const maxY = containerHeight - textHeight;

    // X轴循环动画：从0到maxX，再回到0，无限循环
    const animateX = Animated.loop(
      Animated.sequence([
        Animated.timing(animatedX, {
          toValue: maxX,
          duration: 3000,
          useNativeDriver: false, // 操作left样式必须关闭nativeDriver
        }),
        Animated.timing(animatedX, {
          toValue: 0,
          duration: 3000,
          useNativeDriver: false,
        }),
      ])
    );

    // Y轴循环动画：从0到maxY，再回到0，无限循环
    const animateY = Animated.loop(
      Animated.sequence([
        Animated.timing(animatedY, {
          toValue: maxY,
          duration: 4000,
          useNativeDriver: false,
        }),
        Animated.timing(animatedY, {
          toValue: 0,
          duration: 4000,
          useNativeDriver: false,
        }),
      ])
    );

    // 同时启动X和Y轴动画
    Animated.parallel([animateX, animateY]).start();
  };

  return (
    <View style={styles.container}>
      {/* 用普通View包裹Animated.Text，用来测量尺寸 */}
      <View ref={textWrapperRef} style={styles.textWrapper}>
        <Animated.Text
          style={[
            styles.text,
            {
              left: animatedX,
              top: animatedY,
            },
          ]}
        >
          弹跳的文本！
        </Animated.Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative', // 让内部绝对定位的文本以这个容器为基准
    backgroundColor: '#000',
  },
  textWrapper: {
    // 这个View会自动包裹文本，measure出来的就是文本的真实尺寸
    position: 'absolute',
  },
  text: {
    fontSize: 30,
    fontWeight: 'bold',
    color: '#00ff00',
  },
});

export default BouncingText;

关键细节说明 #

• 为什么用View包裹？因为Animated.Text继承自Text，而Text组件本身不支持measure方法，但普通View支持，包裹后View的尺寸就是文本的实际尺寸。
• useNativeDriver: false：因为我们要操作left和top这些布局样式，这类样式无法通过原生驱动处理，所以必须设置为false。
• 动画时长可以按需调整，给X、Y轴设置不同的时长，弹跳效果会更接近DVD Logo的随机感。

这样就能轻松实现你想要的文本弹跳动画啦！

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