mirror of
https://github.com/thorvg/thorvg.git
synced 2025-06-08 05:33:36 +00:00
example/lottie: added solid fill slot overriding
This commit is contained in:
Hermet Park
Hermet Park
parent
f1cd65a876
commit
4bfa7ce913
2 changed files with 325 additions and 17 deletions
|
|
@ -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<tvg::LottieAnimation> slotAnimation;
|
||||
unique_ptr<tvg::LottieAnimation> markerAnimation;
|
||||
unique_ptr<tvg::LottieAnimation> slot1;
|
||||
unique_ptr<tvg::LottieAnimation> slot2;
|
||||
unique_ptr<tvg::LottieAnimation> 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;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
287
examples/resources/lottie/extensions/slotsample2.json
Normal file
287
examples/resources/lottie/extensions/slotsample2.json
Normal file
|
|
@ -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": []
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue