094ccde238
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>
113 lines
3.7 KiB
JSON
113 lines
3.7 KiB
JSON
{
|
|
"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"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|