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

动画不会停留在视图中

1 个答案: