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

我认为这是因为您没有更改动画值的状态，并且此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 
})

也许尝试提取要更改的值。

Answer 2

多亏了@oma，我才能够正常工作，这是小吃： Toggle opacity in React Native

除此之外，我还找到了一篇不错的文章，可以重复使用此功能：

Animating appearance and disappearance in React Native

这是工作示例的零食，但做了一些修改。

Animate opacity

此解决方案看起来不错，希望您能从中受益。

Answer 3

我制作了一个节点包react-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>
    );
  }
}

切换动画值以淡入/淡出视图

3 个答案: