如何用 react-native 制作这个动画？

Question

How to make this transform with React-Native?

我想要这个静态位置

constructor(props) {
        super(props);
        this.state={
            loaded:false,

            transform:[{ perspective: 0 },
                      { translateX: width },
                      { rotateY: '0deg'}],
            isMenuOpen:false,
        }
    }

动画到这个位置

Animated.timing(
                this.state.transform,
                {toValue:[{ perspective: 850 },
                          { translateX: -width * 0.24 },
                          { rotateY: '60deg'}]},
            ).start();

动画代码怎么写？

Answer 1

您不能以这种方式使用 Animated... 看Animated 链接您需要做的下一件事：

<MyComponent style={{
          transform:[{ perspective: this.state.anim.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 850],
                    })},
                     { translateX: this.state.anim.interpolate({
                                     inputRange: [0, 1],
                                     outputRange: [width, -width * 0.24],
                    })},
                     { rotateY: this.state.anim.interpolate({
                                     inputRange: [0, 1],
                                     outputRange: ["0deg", "60deg"],
                    })}],
       }],
     }}/>

------////------

            Animated.timing(this.state.anim, {
              toValue: 1
            }),

--------////--------

constructor(props) {
        super(props);
        this.state={
            anim: AnimateValue(0)
        }
    }