We have proven in this example using react-motion that gl-react can interoperate with React animation libraries and in the continuation of a "descriptive" expressivity.
Now, in react-native context, there is Animated (docs / source code).
I see nothing preventing us for being able to support this for values passed in uniforms
.
As an use-case example: awesome things that solves Animated (like user interruptibility / UI driven like responsive to dragging) could be used with glsl-transitions effects:
Code Usage Example
For instance, I should be able to do:
// example adapted from the React Animation documentation
class Playground extends React.Component {
constructor(props) {
super(props);
this.state = {
animatedValue: new Animated.Value(0)
};
}
render() {
return (
<GL.View
shader={shaders.myEffect2}
width={200}
height={100}
uniforms={{
value: this.state.animatedValue
}} />
);
}
componentDidMount() {
this.state.animatedValue.setValue(1.5);
Animated.spring(this.state.animatedValue, { toValue: 0.8, friction: 1 }).start();
}
}
Another and more probable use-case is using with a pre-defined GL Component, like Blur.
And I should just be able to do:
<Blur factor={this.state.animatedValue} width={w} height={h}>
<Something/>
</Blur>
Implementation
We can implement shader uniform animations in a very efficient way in the Objective-C / OpenGL side.
Now we can't just use Animated.createAnimatedComponent
for this because it is specific to animate style
. Also, in our implementation uniforms
props DOES NOT directly map to the final component props, in fact <GL.View/>
is just an intermediary way (DSL) to express a tree of effects and gets transformed to a single "GLCanvas" (GLKView
in case of iOS).
A tree of GL.View
gets consumed and results of a single data
that contains everything the OpenGL implementation needs to render the effects pipeline.
For example, see this example (left shows the usage part, right shows the resulting data
props that represents the usage tree):
# Help Wanted on this:
Right now, if we try to use Animated.Value
as uniforms props, we are going to have this data
filled with Animated.Value
s.
So it sounds like we just need a way to resolve all Animated.Value
objects in that object tree. I don't know yet the Animated specifics to implement a Animated Component from scratch and do this resolving:
- Is there a React utility to resolve a object tree filled with some
Animated.Value
at a given time?
- What do we need to do at the component level? (start/stop? render loop?
setNativeProps
for the props that gets animated?)
Thanks