const positionX = useSharedValue(-40);
const animatedStyles = useAnimatedStyle(() => {
const opacity = interpolate(positionX.value, [-40, 0], [0, 1]); // <- It must be here to work.
return {
transform: [{ translateX: positionX.value }],
opacity,
};
});
interpolate
重命名为interpolateNode
。尝试在不命名inputRange
或outputRange
的情况下进行如下操作:
import { useSharedValue, interpolate } from 'react-native-reanimated' // version 2.x
const animatedValue = useSharedValue(0)
const interpolatedValue = interpolate(
animatedValue.value,
[valueMin, valueMax],
[interpolatedValueMin, interpolatedValueMax]
)
react-native-reanimated
,它使用UI线程执行动画,而不是JS线程。import Animated,{interpolate} from 'react-native-reanimated';
const scale = interpolate(progress, {
inputRange: [0, 1],
outputRange: [1, 0.8],
});
const borderRadius = interpolate(progress, {
inputRange: [0, 1],
outputRange: [0, 10],
});
当我这样做时,我的问题得到了解决
https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/event
https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/code
https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/nodes/interpolate
试一下这个。
Animated.useCode(
() =>
[
//...
Animated.interploate(...),
],
[animated, offset]
);
我成功找到了问题所在。react-native-reanimated 的版本是 2.2.0,我安装了 1.12.0 的版本,现在终于可以工作了。