我的动画组件在本机反应中运行不顺畅

Mah*_*hdi 2 reactjs react-native react-native-animatable

我正在尝试将动画添加到我的反应本机应用程序中。但在 Android 和 IOS 上播放不流畅 我该怎么办才能解决这个问题

我已经尝试使用动画组件运行动画。我的反应本机版本是“0.57.8”这是我的代码:

export default class MainPage extends Component{

    constructor(props) {
        super(props)
        this.moveAnimation = new Animated.ValueXY({ x: 0, y: 0})
    }
    _openCardContainer = () => {
        Animated.spring(this.moveAnimation, {
          toValue: {x:0, y: 0},
          speed: 5,
        }).start()
    }
    render() {
        return(
            <Animated.View style={this.moveAnimation.getLayout()}>
              <EditorChoiceContainer/>
            </Animated.View>
        )
    }
}
Run Code Online (Sandbox Code Playgroud)

这段代码工作正常,但不流畅并且非常滞后

请帮我解决这个问题

ish*_*rya 5

Animated.spring(this.moveAnimation, {
      toValue: {x:0, y: 0},
      speed: 5,
  useNativeDriver: true, // <-- Add this
    }).start()
Run Code Online (Sandbox Code Playgroud)

  • 嘿,您的慢速动画问题的解决方案是使用本机驱动程序。并针对您收到的错误通过使用translateX和translateY而不是left和top来修复。希望能帮助到你 (2认同)