我的问题是关于在react和/或react-native动画中使用translateX和translateY,将对象动画到某个点。
这两个变换相对于现有点移动对象。
但对于该场景,现有坐标并不重要,我想确保对象移动到屏幕中可能存在的某个点。
额外的限制是,我无法对样式 top
、bottom
、left
和 right
进行动画处理,因为在 React 中-native,如果我们对这些样式进行动画处理,那么我们就不能使用 useNativeDriver={true}
指令,这会导致性能问题。
最佳答案
您可以使用 onLayout
属性来获取任何 View
组件上的位置(相对于父级)和高度/宽度。
像这样的东西应该可以工作。您可能需要获取更多父 View
组件的位置,具体取决于您当前的结构。
componentDidMount() {
this.animatedValue = new Animated.Value(0);
}
animate() {
const { parentYPosition } = this.state;
Animated.Timing(this.animatedValue, {
toValue: FINAL_POSITION - parentYPosition
}).start();
}
render() {
return (
<View
onLayout={event => {
const { y } = event.nativeEvent.layout;
this.setState({parentYPosition: y})
}}
>
<Animated.View
style={{
position: 'absolute',
top: 0,
transform: [
{
translateY: this.animatedValue
}
/>
/>
);
}
关于reactjs - 如何将X、Y平移到某个坐标而不是相对点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56149353/