如何使用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链接：

<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)
        }
    }