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

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

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

（P.S我正在研究android）这是世博会的链接 https://snack.expo.io/S1aAgNq6Z

Answer 1

可能是因为州可能不会马上更新。尝试改变你的火力函数：

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

setState完成后接受回调。

我正在玩Snack一段时间，问题显然是状态变得不同步，因为它说实际上在右侧是在左侧。我没有看到其他任何搞乱国家的事情。

您可以在此处查看：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);
  }

从一侧到另一侧反映视图的本机动画

1 个答案: