Initial Lottie loader impl (Skotty)

Coarse workflow:

* Construction

  1) build a Json tree
  2) collect asset IDs (for preComp/image layer resolution)
  3) "attach" pass
     - traverse the Json tree
     - build an SkSG dom, one fragment at a time
     - attach "animator" objects to the dom, for each animated prop
  4) done, we can throw away the Json tree

* For each animation tick

  1) iterate over active animators and poke their respective dom nodes/attributes
  2) revalidate the SkSG dom
  3) draw the SkSG dom

Note: post construction, things are super-simple - we just poke SkSG DOM attributes
with interpolated values, and everything else is handled by SkSG (invalidation,
revalidation, render).

Change-Id: I96a02be7eb4fb4cb3831f59bf2b3908ea190c0dd
Reviewed-on: https://skia-review.googlesource.com/89420
Reviewed-by: Mike Reed <reed@google.com>
Commit-Queue: Florin Malita <fmalita@chromium.org>

1 files changed, 112 insertions, 0 deletions

diff --git a/resources/skotty/skotty_sample_1.json b/resources/skotty/skotty_sample_1.json
new file mode 100644
index 0000000000..6010eb82b3
--- /dev/null
+++ b/resources/skotty/skotty_sample_1.json
@@ -0,0 +1,112 @@
+{
+   "v":"4.6.9",
+   "fr":60,
+   "ip":0,
+   "op":200,
+   "w":800,
+   "h":600,
+   "nm":"Loader 1 JSON",
+   "ddd":0,
+
+
+   "layers":[
+      {
+         "ddd":0,
+         "ind":1,
+         "ty":4,
+         "nm":"Custom Path 1",
+         "ao": 0,
+         "ip": 0,
+         "op": 300,
+         "st": 0,
+         "sr": 1,
+         "bm": 0,
+         "ks": {
+            "o": { "a":0, "k":100 },
+            "r": { "a":0, "k":0   },
+            "p": { "a":0, "k":[ 0, 0, 0 ] },
+            "a": { "a":0, "k":[ 0, 0, 0 ] },
+            "s": { "a":0, "k":[ 100, 100, 100 ] }
+         },
+
+         "shapes":[
+           {
+             "ty":"gr",
+             "it":[
+               {
+                 "ty" : "sh",
+                 "nm" : "Path 1",
+                 "ks" : {
+                   "a" : 1,
+                   "k" : [
+                     {
+                       "s": [ {
+                         "i": [ [ -50,   0 ], [ -50,   0 ], [ -50,   0 ], [ -50,   0 ] ],
+                         "o": [ [  50,   0 ], [  50,   0 ], [  50,   0 ], [  50,   0 ] ],
+                         "v": [ [   0, 100 ], [ 100,   0 ], [ 300, 200 ], [ 400, 100 ] ],
+                         "c": false
+                       } ],
+                       "e": [ {
+                         "i": [ [ -50,   0 ], [ -50,   0 ], [ -50,   0 ], [ -50,   0 ] ],
+                         "o": [ [  50,   0 ], [  50,   0 ], [  50,   0 ], [  50,   0 ] ],
+                         "v": [ [   0, 100 ], [ 100, 200 ], [ 300,   0 ], [ 400, 100 ] ],
+                         "c": false
+                       } ],
+                       "i": { "x":0.5, "y":0.5 },
+                       "o": { "x":0.5, "y":0.5 },
+                       "t": 0
+                     },
+                     {
+                       "s": [ {
+                         "i": [ [ -50,   0 ], [ -50,   0 ], [ -50,   0 ], [ -50,   0 ] ],
+                         "o": [ [  50,   0 ], [  50,   0 ], [  50,   0 ], [  50,   0 ] ],
+                         "v": [ [   0, 100 ], [ 100, 200 ], [ 300,   0 ], [ 400, 100 ] ],
+                         "c": false
+                       } ],
+                       "e": [ {
+                         "i": [ [ -50,   0 ], [ -50,   0 ], [ -50,   0 ], [ -50,   0 ] ],
+                         "o": [ [  50,   0 ], [  50,   0 ], [  50,   0 ], [  50,   0 ] ],
+                         "v": [ [   0, 100 ], [ 100,   0 ], [ 300, 200 ], [ 400, 100 ] ],
+                         "c": false
+                       } ],
+                       "i": { "x":0.5, "y":0.5 },
+                       "o": { "x":0.5, "y":0.5 },
+                       "t": 100
+                     },
+                     {
+                       "t": 200
+                     }
+                   ]
+                 }
+               },
+
+               {
+                 "ty": "st",
+                 "nm": "Stroke 1",
+                 "lc": 1,
+                 "lj": 1,
+                 "ml": 4,
+                 "w" : { "a": 0, "k": 30   },
+                 "o" : { "a": 0, "k": 100 },
+                 "c" : { "a": 1, "k": [
+                   { "s": [ 1, 0, 0 ], "e": [ 0, 1, 0 ], "i": { "x":0.5, "y":0.5 }, "o": { "x":0.5, "y":0.5 }, "t": 0   },
+                   { "s": [ 0, 1, 0 ], "e": [ 1, 0, 0 ], "i": { "x":0.5, "y":0.5 }, "o": { "x":0.5, "y":0.5 }, "t": 100 },
+                   { "t": 200 }
+                 ] }
+               },
+
+               {
+                 "ty":"tr",
+                 "p" : { "a":0, "k":[   0,   0 ] },
+                 "a" : { "a":0, "k":[   0,   0 ] },
+                 "s" : { "a":0, "k":[ 100, 100 ] },
+                 "r" : { "a":0, "k":  0 },
+                 "o" : { "a":0, "k":100 },
+                 "nm": "Transform"
+               }
+             ]
+           }
+         ]
+      }
+   ]
+}