Skip to content

Instantly share code, notes, and snippets.

@arqex
Created March 17, 2019 15:22
Show Gist options
  • Save arqex/385e543430c34abcf9621cb62e35b313 to your computer and use it in GitHub Desktop.
Save arqex/385e543430c34abcf9621cb62e35b313 to your computer and use it in GitHub Desktop.
Animated graph
/**
* Animated works by building a directed acyclic graph of dependencies
* transparently when you render your Animated components.
*
* new Animated.Value(0)
* .interpolate() .interpolate() new Animated.Value(1)
* opacity translateY scale
* style transform
* View#234 style
* View#123
*
* A) Top Down phase
* When an Animated.Value is updated, we recursively go down through this
* graph in order to find leaf nodes: the views that we flag as needing
* an update.
*
* B) Bottom Up phase
* When a view is flagged as needing an update, we recursively go back up
* in order to build the new value that it needs. The reason why we need
* this two-phases process is to deal with composite props such as
* transform which can receive values from multiple parents.
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment