React Native 动画一个复活的动画,查看从零宽度到柔性填充顺利

mspsb9vt  于 2023-08-07  发布在  React
关注(0)|答案(1)|浏览(95)

我有一个react-native-reanimated视图,当flex: 0时,它的宽度为零,当flex: 1时,它填充了可用宽度。
我希望平滑地动画过渡,使视图从0宽度动态地填充到可用宽度,同时也在其增长时动画任何元素:

[#1 first elem] -- [#2 elem i want to grow] -- [#3 elem that should be pushed animated because #2 grows animated]

字符串
在我的初始视图中,由于#2的宽度为零,因此它看起来像[#1] -- [#3]。我想将#2的flex0动画到1,但它会立即动画到全宽,而不是平滑动画。我可以想象为什么会发生这种情况(因为flex是相对的,只要它是唯一的flex填充元素,非零值之间就没有区别),但不知道如何解决这个问题。
鉴于:

  • 我的动画元素的整个宽度是动态的
  • 动画元素后面的元素也需要在布局中推送 *animated

如何设置“重新动画视图”的动画,使其大小增大,并以动画方式推动布局中该视图后面的任何元素?
我用的是复活版3.4.1.

bhmjp9jg

bhmjp9jg1#

我已经结束了测量容器视图,第一个元素(动画/增长之前的元素),布局上的最后一个元素(动画/增长之后的元素),计算可用空间(容器-第一个元素的宽度-最后一个元素的宽度-任何填充等)并将元素的宽度动画到该值。

相关问题