Created
March 17, 2019 15:22
-
-
Save arqex/385e543430c34abcf9621cb62e35b313 to your computer and use it in GitHub Desktop.
Animated graph
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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