从一侧到另一侧响应视图的本机动画

Question

我最近正在使用 react-native 的动画，我正在尝试通过单击使View组件从一侧移动到另一侧。这是我到目前为止有效的代码：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  TouchableOpacity,
  Dimensions
} from 'react-native';
export default class App extends Component {
  constructor () {
    super()
    this.state = {
      isLeftSide: true,
    }
    this.animatedValue = new Animated.Value(0)
  }
  animate () {
    this.animatedValue.setValue(0);
    Animated.timing(
      this.animatedValue,
      {
        toValue: 1,
        duration: 300,
        easing: Easing.linear
      }
    ).start()
  }
  fire = () => { 
    this.animate();
    this.setState({isLeftSide: (!this.state.isLeftSide)});
  }
  direction = () => this.state.isLeftSide ? 'rtl' : 'ltr';
  render() {
    const screenWidth = Dimensions.get('screen').width;
    const objectMaxCoord = screenWidth - 40;
    const outputRange = {
      rtl: [0, objectMaxCoord],
      ltr: [objectMaxCoord, 0]
    }
    const marginLeft = this.animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: outputRange[this.direction()]
    })
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={() => this.fire()}><Text>Run</Text></TouchableOpacity>
        <Animated.View
          style={{
            marginLeft,
            height: 30,
            width: 40,
            backgroundColor: 'red'}} />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    marginTop: 30
  }
});

现在，问题是红色立方体从左侧开始，但是当我单击运行时，它会跳到右上角（没有动画），然后平滑地（在动画中）移动到左侧。 之后的事情非常完美。为什么会发生第一次跳跃？

有没有更简单的方法来完成这个动画？

（ 附言 我正在研究安卓）这是博览会的链接https://snack.expo.io/S1aAgNq6Z

Answer 1

可能是因为状态可能不会立即更新。尝试像这样更改您的 fire 函数：

this.setState({isLeftSide: (!this.state.isLeftSide)}, () => {
   this.animate();
});

setState 完成后接受回调。

我玩了一段时间的零食，问题显然是状态不同步，因为它说在左侧，而实际上在右侧。我没有看到任何其他与国家有关的事。

你可以在这里看到它：https://snack.expo.io/BJhb4-pAW

零食在某种程度上是有限的，所以你可以在你的代码上试试这个吗？

 finishedAnimation = (finished) => {
    if (finished)
      this.setState({isLeftSide: !(this.state.isLeftSide)});
  }
  fire = () => { 
     this.animatedValue.setValue(0);
    Animated.timing(
      this.animatedValue,
      {
        toValue: 1,
        duration: 300,
        easing: Easing.linear
      }
    ).start(this.finishedAnimation);
  }