在React Native中启动动画视图

Question

I'm trying to implement a view similar to something like: https://bouncingdvdlogo.com/ but for a piece of text.

My first thought was that I could just create an animated loop for both the X and Y axis and just set the top and left styles on an Animated.Text . The catch here is that I don't know what size the text will be exactly until runtime.

I first attempted to use measure to get the values then start the animation but measure isn't a function available on Animated.Text . Is there a simpler approach to solve this animation problem?

Answer 1

I ended up trying a different approach that has worked pretty well. I hope anyone else who comes across this finds it useful.

Basically rather than trying to measure the div and calculate its position I animated the flex property of some wrapping divs to achieve the same affect.

Here's a demo that shows how this works: https://snack.expo.io/rkNs_CR2G

I've added colors to the animated flex divs to visualize what's going on.