React Native Reanimated实现Animated.View绕负Y轴旋转的方法咨询

要实现类似书本翻页（底部固定、仅顶部移动）的效果，核心是调整旋转轴的位置——默认的rotateX/rotateY是以视图中心为旋转轴，我们需要把旋转轴移到视图底部。以下是具体实现方案：

方案1：直接设置旋转原点（推荐） #

React Native（及Reanimated）支持通过transformOrigin属性直接指定旋转中心，无需手动计算平移量，代码更简洁：

import { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';
import { Animated, View } from 'react-native';

// 替换为你的视图样式，需明确高度（或通过onLayout动态获取）
const PAGE_STYLE = { height: 200, width: '100%', backgroundColor: '#fff' };

const rotation = useSharedValue(0);

const animatedStyle = useAnimatedStyle(() => {
  return {
    // 添加透视效果，让3D翻转更真实，值越小透视越强
    perspective: 1000,
    // 设置旋转原点：x=0.5（水平中心），y=1（视图底部边缘）
    transformOrigin: { x: 0.5, y: 1 },
    transform: [
      // 若要实现左右翻页（绕Y轴），替换为rotateY即可
      { rotateX: `${rotation.value}deg` },
    ],
  };
});

// 渲染部分
<View style={{ padding: 20 }}>
  <Animated.View style={[PAGE_STYLE, animatedStyle]}>
    {/* 你的页面内容 */}
  </Animated.View>
</View>

方案2：手动组合变换（兼容旧版本） #

如果transformOrigin在你的环境中不生效，可以通过平移-旋转-平移回位的组合变换模拟底部旋转：

import { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';
import { Animated, View, useRef } from 'react-native';

const rotation = useSharedValue(0);
// 存储视图实际高度
const viewHeight = useRef(0);

const animatedStyle = useAnimatedStyle(() => {
  return {
    perspective: 1000,
    transform: [
      // 1. 向上平移半高，让视图底部对齐默认旋转中心（原视图中心）
      { translateY: -viewHeight.current / 2 },
      // 2. 执行旋转
      { rotateX: `${rotation.value}deg` },
      // 3. 平移回原位置
      { translateY: viewHeight.current / 2 },
    ],
  };
});

// 获取视图实际高度
const handleLayout = (e) => {
  viewHeight.current = e.nativeEvent.layout.height;
};

// 渲染部分
<View style={{ padding: 20 }}>
  <Animated.View 
    style={{ width: '100%', backgroundColor: '#fff' }}
    onLayout={handleLayout}
  >
    {/* 你的页面内容 */}
  </Animated.View>
</View>

关键说明 #

• perspective是必须的：没有它，3D旋转会呈现平面翻转效果，无法体现深度感。
• 轴的选择：
  • 若要实现向前翻倒（上下方向）：用rotateX
  • 若要实现左右翻页（书本侧边翻）：替换为rotateY即可，旋转原点保持y:1就能固定底部
• 动态高度：如果视图高度不固定，必须通过onLayout事件获取实际高度，否则平移量计算会出错

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