在本机反应中弹跳动画视图

Question

我正在尝试实现类似于以下内容的视图：https://bouncingdvdlogo.com/，但只是针对一段文本。

我的第一个想法是，我可以为 X 轴和 Y 轴创建一个动画循环，并在 Animated.Text 上设置 top 和 left 样式。这里的问题是直到运行时我才知道文本的确切大小。

我首先尝试使用measure 获取值然后启动动画，但measure 不是Animated.Text 上可用的功能。有没有更简单的方法来解决这个动画问题？

Answer 1

我最终尝试了另一种效果很好的方法。我希望遇到此问题的其他人会发现它很有用。

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

这是一个演示其工作原理的演示：https://snack.expo.io/rkNs_CR2G

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