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

Question

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

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

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

Answer 1

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

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

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

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