diff --git a/examples/LottieExtension.cpp b/examples/LottieExtension.cpp index 59eae5b7..8fa273b9 100644 --- a/examples/LottieExtension.cpp +++ b/examples/LottieExtension.cpp @@ -33,6 +33,7 @@ struct UserExample : tvgexam::Example unique_ptr slot1; unique_ptr slot2; unique_ptr slot3; + unique_ptr slot4; unique_ptr marker; uint32_t w, h; uint32_t size; @@ -85,6 +86,12 @@ struct UserExample : tvgexam::Example slot3->frame(slot3->totalFrame() * progress); } + //overriden default slot + { + auto progress = tvgexam::progress(elapsed, slot4->duration()); + slot4->frame(slot4->totalFrame() * progress); + } + //marker { auto progress = tvgexam::progress(elapsed, marker->duration()); @@ -163,6 +170,20 @@ struct UserExample : tvgexam::Example canvas->push(picture); } + //slot (overriden default slot) + { + slot4 = std::unique_ptr(tvg::LottieAnimation::gen()); + auto picture = slot4->picture(); + if (!tvgexam::verify(picture->load(EXAMPLE_DIR"/lottie/extensions/slotsample4.json"))) return false; + + const char* slotJson = R"({"bg_color":{"p":{"a":0,"k":[1,0.8196,0.2275]}},"check_color":{"p":{"a":0,"k":[0.0078,0.0078,0.0078]}}})"; + if (!tvgexam::verify(slot4->override(slotJson))) return false; + + sizing(picture, 4); + + canvas->push(picture); + } + //marker { marker = std::unique_ptr(tvg::LottieAnimation::gen()); @@ -170,7 +191,7 @@ struct UserExample : tvgexam::Example if (!tvgexam::verify(picture->load(EXAMPLE_DIR"/lottie/extensions/marker_sample.json"))) return false; if (!tvgexam::verify(marker->segment("sectionC"))) return false; - sizing(picture, 4); + sizing(picture, 5); canvas->push(picture); } diff --git a/examples/resources/lottie/extensions/slotsample4.json b/examples/resources/lottie/extensions/slotsample4.json new file mode 100644 index 00000000..aa68dd50 --- /dev/null +++ b/examples/resources/lottie/extensions/slotsample4.json @@ -0,0 +1,1014 @@ +{ + "nm": "Main Scene", + "ddd": 0, + "h": 500, + "w": 500, + "meta": { + "g": "@lottiefiles/creator 1.31.1" + }, + "layers": [ + { + "ty": 0, + "nm": "Icon Asset", + "sr": 1, + "st": 48, + "op": 90, + "ip": 48, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { + "a": 0, + "k": [ + 250, + 250 + ] + }, + "s": { + "a": 1, + "k": [ + { + "o": { + "x": 0.65, + "y": 0 + }, + "i": { + "x": 0.36, + "y": 1 + }, + "s": [ + 74.422, + 74.42200000000001 + ], + "t": 48 + }, + { + "o": { + "x": 0.65, + "y": 0 + }, + "i": { + "x": 0.36, + "y": 1 + }, + "s": [ + 200.30899999999997, + 200.30899999999997 + ], + "t": 56 + }, + { + "o": { + "x": 0.65, + "y": 0 + }, + "i": { + "x": 0.36, + "y": 1 + }, + "s": [ + 143.0236, + 143.0236 + ], + "t": 63 + }, + { + "s": [ + 148.7659, + 148.7659 + ], + "t": 68 + } + ] + }, + "sk": { + "a": 0, + "k": 0 + }, + "p": { + "a": 0, + "k": [ + 250, + 250 + ] + }, + "r": { + "a": 0, + "k": 0 + }, + "sa": { + "a": 0, + "k": 0 + }, + "o": { + "a": 1, + "k": [ + { + "o": { + "x": 0.65, + "y": 0 + }, + "i": { + "x": 0.36, + "y": 1 + }, + "s": [ + 0 + ], + "t": 48 + }, + { + "s": [ + 100 + ], + "t": 56 + } + ] + } + }, + "w": 500, + "h": 500, + "refId": "precomp_newScene_d3dd3211-476a-4493-aaa1-08613e963887_d94c4e16-710b-4030-b673-692f585842ac", + "ind": 1 + }, + { + "ty": 4, + "nm": "Ripple", + "sr": 1, + "st": 48, + "op": 90, + "ip": 48, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { + "a": 0, + "k": [ + 0, + 0 + ] + }, + "s": { + "a": 1, + "k": [ + { + "o": { + "x": 0.65, + "y": 0 + }, + "i": { + "x": 0.36, + "y": 1 + }, + "s": [ + 102.1023, + 102.1023 + ], + "t": 63 + }, + { + "s": [ + 165.2173, + 165.2173 + ], + "t": 90 + } + ] + }, + "sk": { + "a": 0, + "k": 0 + }, + "p": { + "a": 0, + "k": [ + 250, + 250 + ] + }, + "r": { + "a": 0, + "k": -360 + }, + "sa": { + "a": 0, + "k": 0 + }, + "o": { + "a": 1, + "k": [ + { + "o": { + "x": 0.65, + "y": 0 + }, + "i": { + "x": 0.36, + "y": 1 + }, + "s": [ + 0 + ], + "t": 56 + }, + { + "o": { + "x": 0.65, + "y": 0 + }, + "i": { + "x": 0.36, + "y": 1 + }, + "s": [ + 80 + ], + "t": 63 + }, + { + "s": [ + 1 + ], + "t": 90 + } + ] + } + }, + "shapes": [ + { + "ty": "el", + "bm": 0, + "hd": false, + "nm": "Ellipse Path 1", + "d": 1, + "p": { + "a": 0, + "k": [ + 0, + 0 + ] + }, + "s": { + "a": 0, + "k": [ + 296, + 296 + ] + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { + "a": 0, + "k": [ + 0.2275, + 0.5255, + 1 + ] + }, + "r": 2, + "o": { + "a": 0, + "k": 100 + } + } + ], + "ind": 2 + }, + { + "ty": 4, + "nm": "Progress Track", + "sr": 1, + "st": 0, + "op": 150, + "ip": 0, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { + "a": 0, + "k": [ + 0, + 0 + ] + }, + "s": { + "a": 1, + "k": [ + { + "o": { + "x": 0.65, + "y": 0 + }, + "i": { + "x": 0.36, + "y": 1 + }, + "s": [ + 100, + 100 + ], + "t": 48 + }, + { + "o": { + "x": 0.65, + "y": 0 + }, + "i": { + "x": 0.36, + "y": 1 + }, + "s": [ + 104.911, + 104.911 + ], + "t": 50 + }, + { + "s": [ + 90.3795, + 90.3795 + ], + "t": 61 + } + ] + }, + "sk": { + "a": 0, + "k": 0 + }, + "p": { + "a": 0, + "k": [ + 250, + 250 + ] + }, + "r": { + "a": 0, + "k": 0 + }, + "sa": { + "a": 0, + "k": 0 + }, + "o": { + "a": 0, + "k": 100 + } + }, + "shapes": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Ellipse Path 1", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [ + -86.92424999999999, + 0 + ], + [ + 0, + -86.92424999999999 + ], + [ + 86.92424999999999, + 0 + ], + [ + 0, + 86.92424999999999 + ] + ], + "o": [ + [ + 86.92424999999999, + 0 + ], + [ + 0, + 86.92424999999999 + ], + [ + -86.92424999999999, + 0 + ], + [ + 0, + -86.92424999999999 + ] + ], + "v": [ + [ + 0, + -157.5 + ], + [ + 157.5, + 0 + ], + [ + 0, + 157.5 + ], + [ + -157.5, + 0 + ] + ] + } + } + }, + { + "ty": "st", + "bm": 0, + "hd": false, + "nm": "Stroke", + "lc": 2, + "lj": 2, + "ml": 1, + "o": { + "a": 0, + "k": 100 + }, + "w": { + "a": 0, + "k": 10 + }, + "c": { + "a": 1, + "k": [ + { + "o": { + "x": 0.65, + "y": 0 + }, + "i": { + "x": 0.36, + "y": 1 + }, + "s": [ + 0, + 0.7765, + 1 + ], + "t": 48 + }, + { + "s": [ + 0.2275, + 0.5255, + 1 + ], + "t": 61 + } + ] + } + }, + { + "ty": "tm", + "bm": 0, + "hd": false, + "nm": "Trim Path", + "e": { + "a": 1, + "k": [ + { + "o": { + "x": 0.65, + "y": 0 + }, + "i": { + "x": 0.36, + "y": 1 + }, + "s": [ + 0 + ], + "t": 0 + }, + { + "s": [ + 100 + ], + "t": 48 + } + ] + }, + "o": { + "a": 0, + "k": 0 + }, + "s": { + "a": 0, + "k": 0 + }, + "m": 1 + } + ], + "ind": 3 + } + ], + "v": "5.7.0", + "fr": 30, + "op": 90, + "ip": 0, + "assets": [ + { + "nm": "Icon Asset", + "id": "precomp_newScene_d3dd3211-476a-4493-aaa1-08613e963887_d94c4e16-710b-4030-b673-692f585842ac", + "layers": [ + { + "ty": 4, + "nm": "Icon", + "sr": 1, + "st": 0, + "op": 90, + "ip": 0, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { + "a": 0, + "k": [ + 83.00074768066405, + 86.04505157470705 + ] + }, + "s": { + "a": 0, + "k": [ + 124.2456, + 124.2456 + ] + }, + "sk": { + "a": 0, + "k": 0 + }, + "p": { + "a": 0, + "k": [ + 250.00092896032712, + 253.7833425993042 + ] + }, + "r": { + "a": 0, + "k": 0 + }, + "sa": { + "a": 0, + "k": 0 + }, + "o": { + "a": 0, + "k": 100 + } + }, + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Icon", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 1", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ] + ], + "o": [ + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ] + ], + "v": [ + [ + 31.2285, + 89.0905 + ], + [ + 67.7751, + 125.635 + ], + [ + 134.773, + 58.6362 + ], + [ + 122.592, + 46.4551 + ], + [ + 67.7751, + 101.273 + ], + [ + 43.4096, + 76.9094 + ], + [ + 31.2285, + 89.0905 + ] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { + "a": 0, + "k": [ + 1, + 1, + 1 + ], + "sid": "check_color" + }, + "r": 1, + "o": { + "a": 0, + "k": 100 + } + }, + { + "ty": "tr", + "a": { + "a": 0, + "k": [ + 82.99999999999999, + 86.21942990335272 + ] + }, + "s": { + "a": 0, + "k": [ + 100, + 100 + ] + }, + "sk": { + "a": 0, + "k": 0 + }, + "p": { + "a": 0, + "k": [ + 82.99999999999999, + 86.21942990335272 + ] + }, + "r": { + "a": 0, + "k": 0 + }, + "sa": { + "a": 0, + "k": 0 + }, + "o": { + "a": 0, + "k": 100 + } + } + ] + } + ], + "ind": 1 + }, + { + "ty": 4, + "nm": "Background", + "sr": 1, + "st": 0, + "op": 90, + "ip": 0, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { + "a": 0, + "k": [ + 82.99999999999999, + 82.99999999999999 + ] + }, + "s": { + "a": 0, + "k": [ + 124.2456, + 124.2456 + ] + }, + "sk": { + "a": 0, + "k": 0 + }, + "p": { + "a": 0, + "k": [ + 249.99999999999997, + 249.99999999999997 + ] + }, + "r": { + "a": 0, + "k": 0 + }, + "sa": { + "a": 0, + "k": 0 + }, + "o": { + "a": 0, + "k": 100 + } + }, + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Background", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 2", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [ + 0, + 0 + ], + [ + -45.8376, + 0 + ], + [ + 0, + -45.8392 + ], + [ + 45.84299999999999, + 0 + ], + [ + 0, + 45.839 + ] + ], + "o": [ + [ + 0, + -45.8392 + ], + [ + 45.84100000000001, + 0 + ], + [ + 0, + 45.839 + ], + [ + -45.8376, + 0 + ], + [ + 0, + 0 + ] + ], + "v": [ + [ + 0, + 83 + ], + [ + 83, + 0 + ], + [ + 166, + 83 + ], + [ + 83, + 166 + ], + [ + 0, + 83 + ] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { + "a": 0, + "k": [ + 0.2275, + 0.5255, + 1 + ], + "sid": "bg_color" + }, + "r": 1, + "o": { + "a": 0, + "k": 100 + } + }, + { + "ty": "tr", + "a": { + "a": 0, + "k": [ + 82.99999999999999, + 82.99999999999999 + ] + }, + "s": { + "a": 0, + "k": [ + 100, + 100 + ] + }, + "sk": { + "a": 0, + "k": 0 + }, + "p": { + "a": 0, + "k": [ + 82.99999999999999, + 82.99999999999999 + ] + }, + "r": { + "a": 0, + "k": 0 + }, + "sa": { + "a": 0, + "k": 0 + }, + "o": { + "a": 0, + "k": 100 + } + } + ] + } + ], + "ind": 2 + } + ] + } + ], + "slots": { + "bg_color": { + "p": { + "a": 1, + "k": [ + { + "o": { + "x": 0.167, + "y": 0.167 + }, + "i": { + "x": 0.833, + "y": 0.833 + }, + "s": [ + 0.2275, + 0.5255, + 1 + ], + "t": 0 + }, + { + "s": [ + 0.7294, + 0.2275, + 1 + ], + "t": 89 + } + ] + } + }, + "check_color": { + "p": { + "a": 0, + "k": [ + 1, + 1, + 1 + ] + } + } + } +} \ No newline at end of file