Переключение анимированного значения для увеличения / уменьшения вида

Question

Я пытаюсь переключить непрозрачность вида с помощью анимированного значения, обрабатывая нажатие кнопки, но я не получаю желаемого результата, за исключением того, что при первом нажатии кнопки он исчезает (непрозрачность = 0), но когда я нажмите кнопку еще раз, ничего не происходит, и я не вижу свое мнение. Вот код:

export default class App extends React.Component {
  state = {
    animation: new Animated.Value(1)
  }
  startAnimation = () => {
    const { animation } = this.state
    Animated.timing(animation, {
      toValue: animation === 0 ? 1 : 0,
      duration: 1000
    }).start()
  }
  render() {
    const animatedStyle = {
      opacity: this.state.animation
    }
    return (
      <View style={styles.container}>
        <Animated.View style={[styles.box, animatedStyle]} />
        <Button title="Toggle fade" onPress={this.startAnimation} />
      </View>
    );
  }
} .  

Кто-нибудь знает, что я делаю (понимаю) неправильно?

Спасибо!

Answer 1

Благодаря @oma я смог заставить его работать, вот закуска: Переключить непрозрачность в React Native

Кроме того, я нашел хорошую статью на эту тему, где эту функцию можно использовать повторно:

Анимация появления и исчезновения в React Native

А вот и закуска к рабочему примеру с небольшой модификацией.

Анимация непрозрачности

Это решение выглядит неплохо, надеюсь, вы сможете извлечь из него выгоду.

Answer 2

Я создал пакет узлов response-native-fade-in-out , который переключает непрозрачность вида с помощью анимированного значения. Вы можете посмотреть на исходный код, чтобы увидеть, как это делается, но вот упрощенная версия:

import React, {PureComponent} from 'react';
import {Animated} from 'react-native';

export default class FadeInOut extends PureComponent {
  state = {
    fadeAnim: new Animated.Value(this.props.visible ? 1 : 0),
  };

  componentDidUpdate(prevProps) {
    if (prevProps.visible !== this.props.visible) {
      Animated.timing(this.state.fadeAnim, {
        toValue: prevProps.visible ? 0 : 1,
        duration: 300,
      }).start();
    }
  }

  render() {
    return (
      <Animated.View style={{...this.props.style, opacity: this.state.fadeAnim}}>
        {this.props.children}
      </Animated.View>
    );
  }
}

Answer 3

Я думаю, это потому, что вы не меняете состояние для ваших анимированных значений, и это const { animation } = this.state будет всегда иметь одинаковое значение, а toValue: animation === 0 ? 1 : 0, будет также иметь то же значение. Я пытаюсь показать вам, как я это делал в своих проектах, но вы должны обновить его для ваших нужд.

export default class App extends React.Component {
  state = {
    animation: new Animated.Value(1),
    isVisible: false   //add a new value to check your state
  }
  startAnimation = () => {
    const { isVisible } = this.state
    Animated.timing(animation, {
      toValue: isVisible === 0 ? 1 : 0,
      duration: 1000
    }).start(() => {
         this.setState({ isVisible: !this.state.isVisible });//set the new state, so the next click will have different value
    })
  }
  render() {
    const animatedStyle = {
      opacity: this.state.animation
    }
    return (
      <View style={styles.container}>
        <Animated.View style={[styles.box, animatedStyle]} />
        <Button title="Toggle fade" onPress={this.startAnimation} />
      </View>
    );
  }
} .  

Я использую это:

let val = this.state.sliderOpen ? 0.8 : 0;

    Animated.timing(                  // Animate over time
      this.state.sliderAnimation,            // The animated value to drive
      {
        toValue: val,                   // Animate to opacity: 1 (opaque)
        duration: 5,              // Make it take a while
      }
    ).start(); 
 this.setState({
   sliderOpen : !this.state.sliderOpen 
})

Возможно, попытайтесь извлечь значение, которое нужно изменить.