Animation 如何使用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();

---

如何编写动画代码？

您不能以这种方式使用动画。。。看看链接，你需要做的下一件事是：

<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"],
                    })}],
       }],
     }}/>

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

---

您不能以这种方式使用动画。。。看看链接，你需要做的下一件事是：

<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"],
                    })}],
       }],
     }}/>

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

---

这是正确的方向，但您可以通过仅重用1个Animated.Value（假设您希望在3个变换上使用相同的计时动画）来简化此过程。@simcha出现错误，如何修复？非常感谢。带“perspective”键的转换不能为零：{“perspective”：0}@JeanRegisser，你能帮我解决这个问题吗？这里，非常感谢！我解决了！谢谢大家!@JeanRegisser，@Simcha。这是正确的方向，但您可以通过仅重用1个Animated.Value（假设您希望在3个变换上使用相同的计时动画）来简化此过程。@simcha出现错误，如何修复？非常感谢。带“perspective”键的转换不能为零：{“perspective”：0}@JeanRegisser，你能帮我解决这个问题吗？这里，非常感谢！我解决了！谢谢大家!@JeanRegisser，@Simcha。

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