如何在 React Native 中创建门动画答案

【问题标题】：How to create door animation in react native如何在 React Native 中创建门动画
【发布时间】：2020-07-13 10:12:04
【问题描述】：

我想使用 react native 制作门动画，但我不知道具体该怎么做，

我只是可以像这样动画翻转卡过渡：

谁能帮我制作门动画？

Current code:

export default class Home2 extends React.Component{
  constructor(props) {
    super(props);
    this.anim = new Animated.Value(0)
  }

  startAnim(){
    this.anim.setValue(0)
    Animated.spring(this.anim, {
      toValue:1,
      useNativeDriver:false
    }).start()
  }

  render() {
    const animated = this.anim.interpolate({
      inputRange:[0, 1],
      outputRange:['80deg', '0deg']
    })
    return(
      <View style={{flex:1, justifyContent:'center', alignItems:'center', backgroundColor:'red'}}>
        <Animated.View style={{width:100, height:100, backgroundColor:'white', transform:[{rotateY:animated}]}}/>
        <Button
          onPress={() => {
            this.startAnim()
          }}
          title="Start"
        />
      </View>
    )
  }
}

【问题讨论】：

有什么建议吗？

标签： css react-native animation

【解决方案1】：

尝试添加这个：

transform-origin: left; // THIS WILL TRANSFORM YOUR DIV TO THE LEFT AND YOU 
JUST NEED TO ADD BACKGROUND COLOR FOR EFFECT

这里是codepen上的完整代码https://codepen.io/am_eu/pen/EgZdaQ

【讨论】：