Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Create Arbitrary Animated Values #5
Just a reminder to investigate how to add a
This has less to do with web I suppose.
This could also avoid having to add special cases like
I was thinking it would be great to be able to map an animated value.
do you think it's a bad idea? The only problem I would see is it makes animated not "serializable" and portable to a native implementation for instance, but this would be very expressive.
AFAIK natively implementing the animation loop was one of the idea behind react native Animated, but today I feel that moving the Animated core engine to implementations (ObjC, Java, web) will be tough to maintain and more complex to provide a powerful API.
So I guess there is an important design decision to be made here, because if staying in JS world, we could allow more powerful things (like mapping a value).
I think if we allow such thing, we should be able to do things as powerful as in react-motion, I mean doing any user defined arithmetic operation over the animated value.
add = (aValue, bValue) => flatMap(aValue, a => map(bValue, b => a + b)) multiply = (aValue, bValue) => flatMap(aValue, a => map(bValue, b => a * b))
and user could implement more advanced use-cases. Here is just one use-case:
sawtooth = aValue => map(aValue, a => a % 1) // assume I have absoluteTime, an Animated.Value that tracks the time (not sure how it's possible to do this) const animatedValueFrom0to1inSawtoothWay = sawtooth(absoluteTime)
I'm not sure if this approach of things match Animated philosophy, I used to do animation with just functions, and I wish we could reconciliate the 2 worlds. :)
The problem with web workers is that you can run the animation at 60fps but cannot touch the dom unless you go back to the main thread which can be blocked if there's some processing, so you don't get much wins that way.
You need to make everything run in a web worker and have the animation run on the main thread for it to be useful (what we do on react native).
Another approach that browser vendors are thinking about is to give a special web worker the ability to touch the dom and run synchronously with scrollviews. Still no prototypes but in discussions
Something we are working on is to make React and Relay work in a more incremental fashion where they can work for 10ms and yield back control and repeat. This part is work but relatively straightforward.
The hard part is that you want to do some ui work when you yield. For example you are rendering a story that takes 200ms and at the same time running an animation. The animation may call render at some point in which case you may be in a conflicting state withthe other react rendering that's happening at the same time.
We explored a few options here but haven't yet found a good solution. This is the big challenge of 60fps :)