From 4bfa7ce913e03b72fd1cef089f6d098f2e605365 Mon Sep 17 00:00:00 2001 From: Hermet Park Date: Fri, 1 Nov 2024 12:32:54 +0900 Subject: [PATCH] example/lottie: added solid fill slot overriding --- examples/LottieExtension.cpp | 55 ++-- .../lottie/extensions/slotsample2.json | 287 ++++++++++++++++++ 2 files changed, 325 insertions(+), 17 deletions(-) create mode 100644 examples/resources/lottie/extensions/slotsample2.json diff --git a/examples/LottieExtension.cpp b/examples/LottieExtension.cpp index 6f732e1c..44a9ec2c 100644 --- a/examples/LottieExtension.cpp +++ b/examples/LottieExtension.cpp @@ -25,12 +25,13 @@ /************************************************************************/ #define NUM_PER_ROW 2 -#define NUM_PER_COL 1 +#define NUM_PER_COL 2 struct UserExample : tvgexam::Example { - unique_ptr slotAnimation; - unique_ptr markerAnimation; + unique_ptr slot1; + unique_ptr slot2; + unique_ptr marker; uint32_t w, h; uint32_t size; @@ -58,16 +59,22 @@ struct UserExample : tvgexam::Example { if (!canvas) return false; - //slotsample + //gradient slot { - auto progress = tvgexam::progress(elapsed, slotAnimation->duration()); - slotAnimation->frame(slotAnimation->totalFrame() * progress); + auto progress = tvgexam::progress(elapsed, slot1->duration()); + slot1->frame(slot1->totalFrame() * progress); + } + + //solid fill slot + { + auto progress = tvgexam::progress(elapsed, slot2->duration()); + slot2->frame(slot2->totalFrame() * progress); } //marker { - auto progress = tvgexam::progress(elapsed, markerAnimation->duration()); - markerAnimation->frame(markerAnimation->totalFrame() * progress); + auto progress = tvgexam::progress(elapsed, marker->duration()); + marker->frame(marker->totalFrame() * progress); } canvas->update(); @@ -90,32 +97,46 @@ struct UserExample : tvgexam::Example this->h = h; this->size = w / NUM_PER_ROW; - //slotsample + //slot (gradient) { - slotAnimation = tvg::LottieAnimation::gen(); - auto picture = slotAnimation->picture(); + slot1 = tvg::LottieAnimation::gen(); + auto picture = slot1->picture(); if (!tvgexam::verify(picture->load(EXAMPLE_DIR"/lottie/extensions/slotsample.json"))) return false; const char* slotJson = R"({"gradient_fill":{"p":{"a":0,"k":[0,0.1,0.1,0.2,1,1,0.1,0.2,0.1,1]}}})"; - if (!tvgexam::verify(slotAnimation->override(slotJson))) return false; + if (!tvgexam::verify(slot1->override(slotJson))) return false; sizing(picture, 0); canvas->push(tvg::cast(picture)); } - //marker + //slot (solid fill) { - markerAnimation = tvg::LottieAnimation::gen(); - auto picture = markerAnimation->picture(); - if (!tvgexam::verify(picture->load(EXAMPLE_DIR"/lottie/extensions/marker_sample.json"))) return false; - if (!tvgexam::verify(markerAnimation->segment("sectionC"))) return false; + slot2 = tvg::LottieAnimation::gen(); + auto picture = slot2->picture(); + if (!tvgexam::verify(picture->load(EXAMPLE_DIR"/lottie/extensions/slotsample2.json"))) return false; + + const char* slotJson = R"({"ball_color":{"p":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":7,"s":[0,0.176,0.867]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":22,"s":[0.867,0,0.533]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":37,"s":[0.867,0,0.533]},{"t":51,"s":[0,0.867,0.255]}]}}})"; + if (!tvgexam::verify(slot2->override(slotJson))) return false; sizing(picture, 1); canvas->push(tvg::cast(picture)); } + //marker + { + marker = tvg::LottieAnimation::gen(); + auto picture = marker->picture(); + if (!tvgexam::verify(picture->load(EXAMPLE_DIR"/lottie/extensions/marker_sample.json"))) return false; + if (!tvgexam::verify(marker->segment("sectionC"))) return false; + + sizing(picture, 2); + + canvas->push(tvg::cast(picture)); + } + return true; } }; diff --git a/examples/resources/lottie/extensions/slotsample2.json b/examples/resources/lottie/extensions/slotsample2.json new file mode 100644 index 00000000..b3fd337b --- /dev/null +++ b/examples/resources/lottie/extensions/slotsample2.json @@ -0,0 +1,287 @@ +{ + "v": "4.8.0", + "meta": { "g": "LottieFiles AE ", "a": "", "k": "", "d": "", "tc": "" }, + "fr": 30, + "ip": 0, + "op": 61, + "w": 1080, + "h": 1080, + "nm": "B", + "assets": [], + "slots": { + "ball_color": { + "p": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 7, + "s": [0, 0.176, 0.867] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 22, + "s": [0.867, 0, 0.533] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 37, + "s": [0.867, 0, 0.533] + }, + { "t": 51, "s": [0, 0.867, 0.255] } + ] + } + } + }, + "layers": [ + { + "ind": 1, + "ty": 4, + "nm": "B", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100 }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [0] + }, + { "t": 58, "s": [349.032] } + ], + "sid": "ball_rotation" + }, + "p": { + "s": true, + "x": { "a": 0, "k": 540 }, + "y": { + "a": 1, + "k": [ + { + "i": { "x": [0.67], "y": [0.343] }, + "o": { "x": [0.33], "y": [0] }, + "t": 0, + "s": [152] + }, + { + "i": { "x": [0.67], "y": [1] }, + "o": { "x": [0.33], "y": [0] }, + "t": 15, + "s": [915] + }, + { + "i": { "x": [0.67], "y": [0.343] }, + "o": { "x": [0.33], "y": [0] }, + "t": 30, + "s": [152] + }, + { + "i": { "x": [0.67], "y": [1] }, + "o": { "x": [0.33], "y": [0] }, + "t": 45, + "s": [915] + }, + { "t": 60, "s": [152] } + ] + } + }, + "a": { "a": 0, "k": [0, 0, 0] }, + "s": { "a": 0, "k": [100, 100, 100] } + }, + "ao": 0, + "shapes": [ + { + "ty": "rc", + "d": 1, + "s": { "a": 0, "k": [270, 270], "sid": "ball_size" }, + "p": { "a": 0, "k": [0, 0] }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.667], "y": [1] }, + "o": { "x": [0.333], "y": [0] }, + "t": 15, + "s": [135] + }, + { + "i": { "x": [0.667], "y": [1] }, + "o": { "x": [0.333], "y": [0] }, + "t": 30, + "s": [33.75] + }, + { + "i": { "x": [0.667], "y": [1] }, + "o": { "x": [0.333], "y": [0] }, + "t": 45, + "s": [33.75] + }, + { "t": 60, "s": [135] } + ] + }, + "nm": "S" + }, + { + "ty": "fl", + "c": { "a": 0, "k": [0.961, 0.761, 0.267, 1], "sid": "ball_color" }, + "o": { "a": 0, "k": 100, "sid": "ball_opacity" }, + "r": 1, + "nm": "C" + } + ], + "ip": 0, + "op": 61, + "st": 0 + }, + { + "ind": 2, + "ty": 4, + "nm": "S", + "sr": 1, + "ks": { + "o": { + "a": 1, + "k": [ + { + "i": { "x": [0.667], "y": [1] }, + "o": { "x": [0.333], "y": [0] }, + "t": 0, + "s": [10] + }, + { + "i": { "x": [0.667], "y": [1] }, + "o": { "x": [0.333], "y": [0] }, + "t": 15, + "s": [100] + }, + { + "i": { "x": [0.667], "y": [1] }, + "o": { "x": [0.333], "y": [0] }, + "t": 30, + "s": [10] + }, + { + "i": { "x": [0.667], "y": [1] }, + "o": { "x": [0.333], "y": [0] }, + "t": 45, + "s": [100] + }, + { "t": 60, "s": [10] } + ] + }, + "r": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [540, 1051, 0] }, + "a": { "a": 0, "k": [0, 0, 0] }, + "s": { "a": 0, "k": [50, 50, 100] } + }, + "ao": 0, + "shapes": [ + { + "ty": "rc", + "d": 1, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.667, 0.667], "y": [1, 1] }, + "o": { "x": [0.333, 0.333], "y": [0, 0] }, + "t": 0, + "s": [270, 13.5] + }, + { + "i": { "x": [0.667, 0.667], "y": [1, 1] }, + "o": { "x": [0.333, 0.333], "y": [0, 0] }, + "t": 15, + "s": [540, 13.5] + }, + { + "i": { "x": [0.667, 0.667], "y": [1, 1] }, + "o": { "x": [0.333, 0.333], "y": [0, 0] }, + "t": 30, + "s": [270, 13.5] + }, + { + "i": { "x": [0.667, 0.667], "y": [1, 1] }, + "o": { "x": [0.333, 0.333], "y": [0, 0] }, + "t": 45, + "s": [540, 13.5] + }, + { "t": 60, "s": [270, 13.5] } + ] + }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 790 }, + "nm": "R" + }, + { + "ty": "fl", + "c": { "a": 0, "k": [0.114, 0.114, 0.114, 1] }, + "o": { "a": 0, "k": 100 }, + "r": 1, + "nm": "F" + } + ], + "ip": 0, + "op": 61, + "st": 0 + }, + { + "ind": 3, + "ty": 4, + "nm": "B", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100 }, + "r": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [540, 540, 0] }, + "a": { "a": 0, "k": [0, 0, 0] }, + "s": { "a": 0, "k": [100, 100, 100] } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ty": "rc", + "d": 1, + "s": { "a": 0, "k": [1080, 1080], "sid": "bg_size" }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 0 }, + "nm": "R" + }, + { + "ty": "fl", + "c": { "a": 0, "k": [0.153, 0.153, 0.153, 1] }, + "o": { "a": 0, "k": 100 }, + "r": 1, + "nm": "F" + }, + { + "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 }, + "sk": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "nm": "T" + } + ], + "nm": "G" + } + ], + "ip": 0, + "op": 61, + "st": 0 + } + ], + "markers": [] +}