react-native - 如何从函数启动 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()
}

我将如何做到这一点？

score 1 · Accepted Answer

我假设你正在使用这个库？

如果是，那么您可以使用该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
  });
}}

1 回答 1