如何从函数中启动React-Native-Animatable动画？

Question

我刚刚开始学习React-Native的Animatable库，不知道如何从函数启动动画。

例如，我有：

<Animatable.View animation={custom1}>
    <View style={styles.itemOne}>
       <Text>Hello World</Text>
    </View>
</Animatable.View>

和

   const custom1 = {
      0: {
        scale: 15,
      },
      1: {
        scale: 1,
      }
    }

当然，当页面加载时，我的"custom1“动画会立即在视图上执行。

但是，如果我不希望在“调用”之前(而不是在页面加载时)执行`"custom1“动画，该怎么办？例如，如果我想这样做：

function initiateCustom1() {
   custom1.animate()
}

我该如何做到这一点呢？

Answer 1

我假设你用的是这个library

如果是，那么您可以使用ref属性。

<Animatable.View
  animation='zoomInUp'
  ref={ref => {
    this.sample = ref;
  }}
>
  <Text>Sample</Text>
</Animatable.View>

在你的触摸屏或按钮上

onPress={() => {
  this.sample.zoomOutDown();
  // or
  this.sample.zoomOutDown().then(() => {
    // do something after animation ends
  });
}}