react-native-android - 动画不会停留在它的视图中

Question

我创建了一个动画，它动画，太棒了！

但是，它不会留在其容器中。注意它应该保持在黄色视图内

这是一个 GIF https://user-images.githubusercontent.com/7225808/55251949-0a826d00-5228-11e9-9c0a-8591d32756d5.gif

render() {
return ([
    <View >
        <View style={style.arrow}>
        <Animatable.View 
        duration={3000} 
        style={style.arrow} 
        animation="slideInUp" 
        easing="ease-out" 
        iterationCount="infinite" 
        direction="alternate">
            <Image source={require('./ConnectArrow.png')} />
        </Animatable.View>
        </View>
    </View>,
    <View style={style.textView}>
        <Text style={style.textView}>Tap to Connect</Text>
    </View>
]);
}
}

    arrow: {
      alignItems: 'center',
      height: 30,
      marginTop: -10
    },
    textView: {
        alignItems: 'center',
        color: "#CCCCCC",
        fontSize: 18,
    }
  } 

Answer 1

默认动画你做得很好，animation="slideInUp"但是为了你的要求，你必须通过自定义动画来实现视图中的动画。

您可以通过自定义动画来做到这一点，您可以随意设置动画。在那，您必须在您想要的范围内设置 Y 方向的动画。

仅供参考。

animation={{
      0: {
        translateY:20,
      },
      0.5: {
        translateY: 40,
      },[
      1: 
        translateY: 60,
      },
    }}

参考这个例子

https://github.com/oblador/react-native-animatable/blob/master/Examples/MakeItRain/App.js