Animation 反应本机状态更改转换

在react native中，在状态更改时设置组件动画的最佳模式是什么

例如，我有一个元素列表，点击其中一个元素，我希望它消失，他下面的元素“站起来”填补缺失的空间

我怎样才能使过渡顺利呢？

当地人自己的作品反应得非常好

基本上，您在状态中有一个值，您可以使用样式道具连接该值，并随时间更改该值。（以下链接为示例）

对于平滑的动画，请使用

usenativedriver

（不总是可能），并且确保您没有在仿真/真实设备中运行调试器

编辑：2018-05-31

这是我如何使用它的一个例子。可能还有其他的方法

---

完成动画将更改状态并执行所述动画

这就是如何在功能组件中的状态更改时触发动画

假设您有一个按钮，可通过onPress更改状态：

<Button title="toggle" onPress={() => setValue(!Value)} />

---

谢谢你的回答。我的意思是：我应该如何处理一切？我是否应该在更新状态和向上移动所有其他元素之前隐藏元素，使用翻转等？componentWillReceiveProps（）和componentWillUpdate（）被标记为不安全，我想要的是一个安全的模式来实现。我不确定向上移动所有其他元素是什么意思。我用一个例子更新了我的答案：）有什么帮助吗？您正在演示如何设置somwthing的动画，但我在示例this.setState（{}，（）=>this.myAnimation（））中看不到任何由状态更改触发的动画使用setStates回调

import { Animated, Easing } from 'react-native';

export const doneAnimation = ({ height, fade }) => Animated.parallel([
  Animated.timing(height, {
    toValue: 300,
    easing: Easing.elastic(),
    duration: 500,
    delay: 1500,
  }),
  Animated.timing(fade, {
    toValue: 1,
    easing: Easing.ease,
    duration: 1000,
    delay: 1500,
  }),
]);

export default doneAnimation;

<Button title="toggle" onPress={() => setValue(!Value)} />

const [Value, setValue] = useState(true);

useEffect(() => {
    // Input your animation here
    // ...
  }, [Value]);