React native React本机动画API-结合平移和旋转

最近在使用react本机动画API时遇到此问题

如图所示，卡组件位于左上角，其翻转动画状态由rotateY值控制，移动动画由translateX和translateY值控制

旋转轴心点似乎始终设置为卡的原始位置。移动卡（更改translateX和translateY值）后，卡翻转旋转将设置参考其原始位置的动画

---

有没有办法调整旋转轴心点？或者，是否有一种方法来设置组件位置的动画，而不是平移？谢谢

终于成功了。事实证明，通过向动画值添加侦听器并相应地更新组件状态，可以在不使用translate属性的情况下设置组件位置更改的动画：

在构造函数中，设置卡组件初始位置和cardPos动画值

在componentDidMount函数中，将侦听器附加到动画值。当动画值更改时，更新零部件状态

在渲染函数中，将组件根值样式设置为位置：“绝对”，实际位置与组件状态中的值同步

构造函数（道具）{
超级（道具）；
//将卡的初始位置设置为组件状态
此.state={
这个。道具。位置。x，
这个。道具。位置。y
};
this.flipAnimatedValue=新的Animated.Value(
这个.props.isFacingUp？180:0
);
this.flipAnimatedInterpolate=this.flipAnimatedValue.interpolate({
输入范围：[0,90,180]，
输出范围：[“0度”、“90度”、“0度”]
});
//为卡位置X和Y创建动画值
this.cardPosXAnimatedValue=新的动画.Value（this.props.position.x）；
this.cardPosYAnimatedValue=新的动画.Value（this.props.position.y）；
}
componentDidMount（）{
//cardPos动画值的addListener
//当动画值更改时，更新零部件状态
this.cardPosXAnimatedValue.addListener（（{value}）=>{
this.setState（{cardPosX:value}）；
});
this.cardPosYAnimatedValue.addListener（（{value}）=>{
this.setState（{cardPosY:value}）；
});
}
render（）{
返回(
…//子组件
);
}