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

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 divs 以可视化正在发生的事情。