React Native Reanimated 在负 y 轴值上旋转 Animated.View

Question

我找不到任何有关如何执行此操作的说明。

因此，目前，我可以使用手势处理程序“翻转”Animated.View。它的工作原理就像我想要的那样，只是我希望视图的底部是静止的。现在，y 轴上的

RotateX

等于 0，这会导致视图在 Animated.View 的直接中心向前和/或向后翻转。

但是，我希望视图在负 y 轴上翻转，这样视图的底部根本不移动，但顶部仍然移动。

这样想。目前，我的视图像硬币一样翻转（顶部和底部都移动），但我想要的是视图向前落下（只有顶部移动），这样它看起来更像是一本正面向前落下的书。

我当前的代码非常简单：

 const rotation = useSharedValue(0)

 const animatedStyle = useAnimatedStyle(()=>{
  return{
    
  transform: [
    { rotateX: `${rotation.value}deg`}
  ]

}
 })

我想知道是否有任何关于重生的专家可以让我知道在这段代码中添加什么以使该视图向前下落而不是像硬币一样翻转？或者，如果您可以指导我阅读解释它的教程，那就太好了。谢谢

Answer 1

在 React Native Reanimated 中根据 Y轴负值，可以使用rotateY变换。在 Reanimated 2，可以创建由动画值驱动的动画 将输入（例如 Y 轴）映射到旋转变换。

useSharedValue：yAxis是一个共享值，初始化为0。

withTiming：在 1 秒内将 yAxis 值平滑地设置为 -45（负旋转）。

useAnimatedStyle：将 yAxis 值映射到rotateY 变换度数。

rotateY：rotateY 属性应用绕 Y 轴的 3D 旋转，负值沿相反方向旋转

import React from "react";
import { View, StyleSheet } from "react-native";
import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 
"react-native-reanimated";
export default function App() {
const yAxis = useSharedValue(0);                                    // 
Shared value for the Y-axis
React.useEffect(() => {
    yAxis.value = withTiming(-45, { duration: 1000 });              // 
Rotate to -45 degrees
}, []);
const animatedStyle = useAnimatedStyle(() => {
    return {
        transform: [{rotateY: `${yAxis.value}deg`}],
    }
});
return (
    <View style={styles.container}>
        <Animated.View style={[styles.box, animatedStyle]} />
    </View>
);
}
const styles = StyleSheet.create({
container: { flex: 1,
justifyContent: "center",
alignItems: "center", 
backgroundColor: "#f5f5f5" 
},
box: {
width: 100,
height: 100,
backgroundColor: "purple"
}
});