动画不会留在它的视野中

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