examples: add slot transform overriding samples

examples/LottieExtension.cpp

@@ -24,7 +24,7 @@
 /* ThorVG Drawing Contents                                              */
 /************************************************************************/
 
-#define NUM_PER_ROW 3
+#define NUM_PER_ROW 4
 #define NUM_PER_COL 3
 
 struct UserExample : tvgexam::Example
@@ -35,6 +35,10 @@ struct UserExample : tvgexam::Example
     unique_ptr<tvg::LottieAnimation> slot3;
     unique_ptr<tvg::LottieAnimation> slot4;
     unique_ptr<tvg::LottieAnimation> slot5;
+    unique_ptr<tvg::LottieAnimation> slot6;
+    unique_ptr<tvg::LottieAnimation> slot7;
+    unique_ptr<tvg::LottieAnimation> slot8;
+    unique_ptr<tvg::LottieAnimation> slot9;
     unique_ptr<tvg::LottieAnimation> marker;
     uint32_t w, h;
     uint32_t size;
@@ -99,6 +103,30 @@ struct UserExample : tvgexam::Example
             slot5->frame(slot5->totalFrame() * progress);
         }
 
+        //position slot
+        {
+            auto progress = tvgexam::progress(elapsed, slot6->duration());
+            slot6->frame(slot6->totalFrame() * progress);
+        }
+
+        //scale slot
+        {
+            auto progress = tvgexam::progress(elapsed, slot7->duration());
+            slot7->frame(slot7->totalFrame() * progress);
+        }
+
+        //rotation slot
+        {
+            auto progress = tvgexam::progress(elapsed, slot8->duration());
+            slot8->frame(slot8->totalFrame() * progress);
+        }
+
+        //opacity slot
+        {
+            auto progress = tvgexam::progress(elapsed, slot9->duration());
+            slot9->frame(slot9->totalFrame() * progress);
+        }
+
         //marker
         {
             auto progress = tvgexam::progress(elapsed, marker->duration());
@@ -202,6 +230,62 @@ struct UserExample : tvgexam::Example
             canvas->push(picture);
         }
 
+        //slot (transform: position)
+        {
+            slot6 = std::unique_ptr<tvg::LottieAnimation>(tvg::LottieAnimation::gen());
+            auto picture = slot6->picture();
+            if (!tvgexam::verify(picture->load(EXAMPLE_DIR"/lottie/extensions/slotsample6.json"))) return false;
+
+            const char* slotJson = R"({"position_id":{"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"s":[100,100],"t":0},{"s":[200,300],"t":100}]}}})";
+            if (!tvgexam::verify(slot6->override(slotJson))) return false;
+
+            sizing(picture, 6);
+
+            canvas->push(picture);
+        }
+
+        //slot (transform: scale)
+        {
+            slot7 = std::unique_ptr<tvg::LottieAnimation>(tvg::LottieAnimation::gen());
+            auto picture = slot7->picture();
+            if (!tvgexam::verify(picture->load(EXAMPLE_DIR"/lottie/extensions/slotsample7.json"))) return false;
+
+            const char* slotJson = R"({"scale_id":{"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"s":[0,0],"t":0},{"s":[100,100],"t":100}]}}})";
+            if (!tvgexam::verify(slot7->override(slotJson))) return false;
+
+            sizing(picture, 7);
+
+            canvas->push(picture);
+        }
+
+        //slot (transform: rotation)
+        {
+            slot8 = std::unique_ptr<tvg::LottieAnimation>(tvg::LottieAnimation::gen());
+            auto picture = slot8->picture();
+            if (!tvgexam::verify(picture->load(EXAMPLE_DIR"/lottie/extensions/slotsample8.json"))) return false;
+
+            const char* slotJson = R"({"rotation_id":{"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"s":[0],"t":0},{"s":[180],"t":100}]}}})";
+            if (!tvgexam::verify(slot8->override(slotJson))) return false;
+
+            sizing(picture, 8);
+
+            canvas->push(picture);
+        }
+
+        //slot (transform: opacity)
+        {
+            slot9 = std::unique_ptr<tvg::LottieAnimation>(tvg::LottieAnimation::gen());
+            auto picture = slot9->picture();
+            if (!tvgexam::verify(picture->load(EXAMPLE_DIR"/lottie/extensions/slotsample9.json"))) return false;
+
+            const char* slotJson = R"({"opacity_id":{"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"s":[0],"t":0},{"s":[100],"t":100}]}}})";
+            if (!tvgexam::verify(slot9->override(slotJson))) return false;
+
+            sizing(picture, 9);
+
+            canvas->push(picture);
+        }
+
         //marker
         {
             marker = std::unique_ptr<tvg::LottieAnimation>(tvg::LottieAnimation::gen());
@@ -209,7 +293,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, 6);
+            sizing(picture, 10);
 
             canvas->push(picture);
         }

examples/resources/lottie/extensions/slotsample6.json

@@ -0,0 +1 @@
+{"v":"5.7.1","ip":0,"op":180,"nm":"Animation","mn":"{a3bb98c7-d0dd-4484-b6da-74a0e70eaf2f}","fr":60,"w":512,"h":512,"assets":[],"layers":[{"ddd":0,"ty":4,"ind":2,"st":0,"ip":0,"op":180,"nm":"Anchor","mn":"{04f9b742-3603-49fa-9552-ea04de1a3f33}","ks":{"a":{"a":0,"k":[256,256]},"p":{"a":0,"k":[256,256],"sid":"position_id"},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"el","nm":"Ellipse","mn":"{4251e46a-bb13-464b-913c-e67c44a218da}","p":{"a":0,"k":[256,256]},"s":{"a":0,"k":[32,32]}},{"ty":"fl","nm":"Fill","mn":"{7d3070ed-88a3-41aa-a62e-7db8df1bd312}","o":{"a":0,"k":100},"c":{"a":0,"k":[0.9411764705882353,0.11372549019607843,0.0392156862745098]},"r":1}]},{"ddd":0,"ty":4,"ind":1,"st":0,"ip":0,"op":180,"nm":"Transformed","mn":"{d00298c4-66b4-4ae4-a730-22c1eb85c188}","ks":{"a":{"a":0,"k":[256,256]},"p":{"a":0,"k":[256,256]},"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}},"shapes":[{"ty":"rc","nm":"Rectangle1","mn":"{bf8ad877-113b-4df8-a2e2-3bb4af32edf7}","p":{"a":0,"k":[252.75223880597017,250.60298507462684]},"s":{"a":0,"k":[319.8089552238806,330.98507462686564]},"r":{"a":0,"k":0}},{"ty":"fl","nm":"Fill1","mn":"{b9040dc8-0753-4a6e-b5f1-d508d17bbd4f}","o":{"a":0,"k":100},"c":{"a":0,"k":[0.19607843137254902,0.3137254901960784,0.6901960784313725]},"r":1}]},{"ddd":0,"ty":4,"ind":0,"st":0,"ip":0,"op":180,"nm":"Reference","mn":"{8f351be7-8a51-4310-9dc3-59ed21594815}","ks":{"a":{"a":0,"k":[256,256]},"p":{"a":0,"k":[256,256]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"rc","nm":"Rectangle","mn":"{cb4f7b74-bed1-493b-a0e6-01b00566aedd}","p":{"a":0,"k":[252.75223880597017,250.60298507462684]},"s":{"a":0,"k":[319.8089552238806,330.98507462686564]},"r":{"a":0,"k":0}},{"ty":"fl","nm":"Fill","mn":"{05064670-7e14-4141-89c1-e0f0f3a1c57d}","o":{"a":0,"k":100},"c":{"a":0,"k":[0.1607843137254902,0.1843137254901961,0.4588235294117647]},"r":1}]}],"meta":{"g":"Glaxnimate0.4.6-32-gb62899be"}}

examples/resources/lottie/extensions/slotsample7.json

@@ -0,0 +1 @@
+{"v":"5.7.1","ip":0,"op":180,"nm":"Animation","mn":"{a3bb98c7-d0dd-4484-b6da-74a0e70eaf2f}","fr":60,"w":512,"h":512,"assets":[],"layers":[{"ddd":0,"ty":4,"ind":2,"st":0,"ip":0,"op":180,"nm":"Anchor","mn":"{04f9b742-3603-49fa-9552-ea04de1a3f33}","ks":{"a":{"a":0,"k":[256,256]},"p":{"a":0,"k":[256,256]},"s":{"a":0,"k":[100,100],"sid":"scale_id"},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"el","nm":"Ellipse","mn":"{4251e46a-bb13-464b-913c-e67c44a218da}","p":{"a":0,"k":[256,256]},"s":{"a":0,"k":[32,32]}},{"ty":"fl","nm":"Fill","mn":"{7d3070ed-88a3-41aa-a62e-7db8df1bd312}","o":{"a":0,"k":100},"c":{"a":0,"k":[0.9411764705882353,0.11372549019607843,0.0392156862745098]},"r":1}]},{"ddd":0,"ty":4,"ind":1,"st":0,"ip":0,"op":180,"nm":"Transformed","mn":"{d00298c4-66b4-4ae4-a730-22c1eb85c188}","ks":{"a":{"a":0,"k":[256,256]},"p":{"a":0,"k":[256,256]},"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}},"shapes":[{"ty":"rc","nm":"Rectangle1","mn":"{bf8ad877-113b-4df8-a2e2-3bb4af32edf7}","p":{"a":0,"k":[252.75223880597017,250.60298507462684]},"s":{"a":0,"k":[319.8089552238806,330.98507462686564]},"r":{"a":0,"k":0}},{"ty":"fl","nm":"Fill1","mn":"{b9040dc8-0753-4a6e-b5f1-d508d17bbd4f}","o":{"a":0,"k":100},"c":{"a":0,"k":[0.19607843137254902,0.3137254901960784,0.6901960784313725]},"r":1}]},{"ddd":0,"ty":4,"ind":0,"st":0,"ip":0,"op":180,"nm":"Reference","mn":"{8f351be7-8a51-4310-9dc3-59ed21594815}","ks":{"a":{"a":0,"k":[256,256]},"p":{"a":0,"k":[256,256]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"rc","nm":"Rectangle","mn":"{cb4f7b74-bed1-493b-a0e6-01b00566aedd}","p":{"a":0,"k":[252.75223880597017,250.60298507462684]},"s":{"a":0,"k":[319.8089552238806,330.98507462686564]},"r":{"a":0,"k":0}},{"ty":"fl","nm":"Fill","mn":"{05064670-7e14-4141-89c1-e0f0f3a1c57d}","o":{"a":0,"k":100},"c":{"a":0,"k":[0.1607843137254902,0.1843137254901961,0.4588235294117647]},"r":1}]}],"meta":{"g":"Glaxnimate0.4.6-32-gb62899be"}}

examples/resources/lottie/extensions/slotsample8.json

@@ -0,0 +1 @@
+{"v":"5.7.1","ip":0,"op":180,"nm":"Animation","mn":"{a3bb98c7-d0dd-4484-b6da-74a0e70eaf2f}","fr":60,"w":512,"h":512,"assets":[],"layers":[{"ddd":0,"ty":4,"ind":2,"st":0,"ip":0,"op":180,"nm":"Anchor","mn":"{04f9b742-3603-49fa-9552-ea04de1a3f33}","ks":{"a":{"a":0,"k":[256,256]},"p":{"a":0,"k":[256,256],"sid":"position_id"},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"el","nm":"Ellipse","mn":"{4251e46a-bb13-464b-913c-e67c44a218da}","p":{"a":0,"k":[256,256]},"s":{"a":0,"k":[32,32]}},{"ty":"fl","nm":"Fill","mn":"{7d3070ed-88a3-41aa-a62e-7db8df1bd312}","o":{"a":0,"k":100},"c":{"a":0,"k":[0.9411764705882353,0.11372549019607843,0.0392156862745098]},"r":1}]},{"ddd":0,"ty":4,"ind":1,"st":0,"ip":0,"op":180,"nm":"Transformed","mn":"{d00298c4-66b4-4ae4-a730-22c1eb85c188}","ks":{"a":{"a":0,"k":[256,256]},"p":{"a":0,"k":[256,256]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0,"sid":"rotation_id"},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"shapes":[{"ty":"rc","nm":"Rectangle1","mn":"{bf8ad877-113b-4df8-a2e2-3bb4af32edf7}","p":{"a":0,"k":[252.75223880597017,250.60298507462684]},"s":{"a":0,"k":[319.8089552238806,330.98507462686564]},"r":{"a":0,"k":0}},{"ty":"fl","nm":"Fill1","mn":"{b9040dc8-0753-4a6e-b5f1-d508d17bbd4f}","o":{"a":0,"k":100},"c":{"a":0,"k":[0.19607843137254902,0.3137254901960784,0.6901960784313725]},"r":1}]},{"ddd":0,"ty":4,"ind":0,"st":0,"ip":0,"op":180,"nm":"Reference","mn":"{8f351be7-8a51-4310-9dc3-59ed21594815}","ks":{"a":{"a":0,"k":[256,256]},"p":{"a":0,"k":[256,256]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"rc","nm":"Rectangle","mn":"{cb4f7b74-bed1-493b-a0e6-01b00566aedd}","p":{"a":0,"k":[252.75223880597017,250.60298507462684]},"s":{"a":0,"k":[319.8089552238806,330.98507462686564]},"r":{"a":0,"k":0}},{"ty":"fl","nm":"Fill","mn":"{05064670-7e14-4141-89c1-e0f0f3a1c57d}","o":{"a":0,"k":100},"c":{"a":0,"k":[0.1607843137254902,0.1843137254901961,0.4588235294117647]},"r":1}]}],"meta":{"g":"Glaxnimate0.4.6-32-gb62899be"}}

examples/resources/lottie/extensions/slotsample9.json

@@ -0,0 +1 @@
+{"v":"5.7.1","ip":0,"op":180,"nm":"Animation","mn":"{a3bb98c7-d0dd-4484-b6da-74a0e70eaf2f}","fr":60,"w":512,"h":512,"assets":[],"layers":[{"ddd":0,"ty":4,"ind":2,"st":0,"ip":0,"op":180,"nm":"Anchor","mn":"{04f9b742-3603-49fa-9552-ea04de1a3f33}","ks":{"a":{"a":0,"k":[256,256]},"p":{"a":0,"k":[256,256],"sid":"position_id"},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100,"sid":"opacity_id"}},"shapes":[{"ty":"el","nm":"Ellipse","mn":"{4251e46a-bb13-464b-913c-e67c44a218da}","p":{"a":0,"k":[256,256]},"s":{"a":0,"k":[32,32]}},{"ty":"fl","nm":"Fill","mn":"{7d3070ed-88a3-41aa-a62e-7db8df1bd312}","o":{"a":0,"k":100},"c":{"a":0,"k":[0.9411764705882353,0.11372549019607843,0.0392156862745098]},"r":1}]},{"ddd":0,"ty":4,"ind":1,"st":0,"ip":0,"op":180,"nm":"Transformed","mn":"{d00298c4-66b4-4ae4-a730-22c1eb85c188}","ks":{"a":{"a":0,"k":[256,256]},"p":{"a":0,"k":[256,256]},"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}},"shapes":[{"ty":"rc","nm":"Rectangle1","mn":"{bf8ad877-113b-4df8-a2e2-3bb4af32edf7}","p":{"a":0,"k":[252.75223880597017,250.60298507462684]},"s":{"a":0,"k":[319.8089552238806,330.98507462686564]},"r":{"a":0,"k":0}},{"ty":"fl","nm":"Fill1","mn":"{b9040dc8-0753-4a6e-b5f1-d508d17bbd4f}","o":{"a":0,"k":100},"c":{"a":0,"k":[0.19607843137254902,0.3137254901960784,0.6901960784313725]},"r":1}]},{"ddd":0,"ty":4,"ind":0,"st":0,"ip":0,"op":180,"nm":"Reference","mn":"{8f351be7-8a51-4310-9dc3-59ed21594815}","ks":{"a":{"a":0,"k":[256,256]},"p":{"a":0,"k":[256,256]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"rc","nm":"Rectangle","mn":"{cb4f7b74-bed1-493b-a0e6-01b00566aedd}","p":{"a":0,"k":[252.75223880597017,250.60298507462684]},"s":{"a":0,"k":[319.8089552238806,330.98507462686564]},"r":{"a":0,"k":0}},{"ty":"fl","nm":"Fill","mn":"{05064670-7e14-4141-89c1-e0f0f3a1c57d}","o":{"a":0,"k":100},"c":{"a":0,"k":[0.1607843137254902,0.1843137254901961,0.4588235294117647]},"r":1}]}],"meta":{"g":"Glaxnimate0.4.6-32-gb62899be"}}