弹跳动画视图反应原生

时间:2018-04-25 07:17:42

标签: javascript react-native react-animated

我试图实现一个类似于https://bouncingdvdlogo.com/的视图但是对于一段文字。

我的第一个想法是,我可以为X轴和Y轴创建一个动画循环,只需在Animated.Text上设置measuremeasure样式。这里的问题是,我不知道文本在运行时的确切大小。

我首先尝试使用Animated.Text获取值,然后启动动画,但Win32_Product不是watson-developer-cloud/natural-language-understanding/v1.js上可用的功能。有没有更简单的方法来解决这个动画问题?

1 个答案:

答案 0 :(得分:0)

我最终尝试了一种效果很好的不同方法。我希望遇到这种情况的其他人发现它很有用。

基本上,不是尝试测量div并计算其位置,而是为一些包装div的flex属性设置动画以实现相同的效果。

这是一个演示如何工作的演示:https://snack.expo.io/rkNs_CR2G

我已经为动画的flex div添加了颜色,以便可视化正在发生的事情。