切换 React-Native 动画值

Question

I try to toggle React-Native animation value, but my Animated.View is not animated, my translationX is "brute", without transition.

const OffCanvas = ({ visible, close }) => {
  const WINDOW_WIDTH = Dimensions.get('window').width;
  const animatedValue = new Animated.Value(visible ? 0 : WINDOW_WIDTH);

  Animated.timing(animatedValue, {
    toValue: visible ? 0 : WINDOW_WIDTH,
    duration: 250,
    easing: Easing.elastic(0.7),
    delay: 0
  }).start();

  ...

Anyone can help me ?

Answer 1

I think you try to animated your animatedValue up to its original value.

You probably need to put : const animatedValue = new Animated.Value(visible ? 0 : WINDOW_WIDTH);
in componentDidMount() or in constructor() and store this value on your state.

Answer 2

Define WINDOW_WIDTH on top.

Add a listener to keep track of animated value inside the constructor.

Sample code

const WINDOW_WIDTH = Dimensions.get('window').width;

export default class Calls extends Component {
  constructor() {
    super();
    this.animatedValue = new Animated.Value(0);
    this.animatedValue.addListener(({ value }) => this._value = value);
  }

  toggle=() => {
    const offset = JSON.parse(JSON.stringify(this.animatedValue));
    Animated.timing(this.animatedValue, {
      toValue: offset > WINDOW_WIDTH ? 0 : WINDOW_WIDTH,
      duration: 250,
      easing: Easing.elastic(0.7),
    }).start();
  }

  ....

===================================================

Or use a state variable to handle toggling.

Sample code

const WINDOW_WIDTH = Dimensions.get('window').width;
export default class Calls extends Component {
 state = { toggle: false };

  toggle=() => {
    const { toggle } = this.state;
    Animated.timing(this.animatedValue, {
      toValue: toggle ? 0 : WINDOW_WIDTH,
      duration: 250,
      easing: Easing.elastic(0.7),
    }).start(() => {
      this.setState({ toggle: !toggle });
    });
  }