mirror of
https://github.com/thorvg/thorvg.git
synced 2025-06-07 21:23:32 +00:00
examples: added LottieInteraction sample
The Interaction sample demonstrates how to handle user input with ThorVG Lottie Expressions.
This commit is contained in:
parent
5de098f128
commit
02baa6b462
5 changed files with 17499 additions and 9 deletions
|
@ -68,7 +68,9 @@ struct Example
|
|||
|
||||
virtual bool content(tvg::Canvas* canvas, uint32_t w, uint32_t h) = 0;
|
||||
virtual bool update(tvg::Canvas* canvas, uint32_t elapsed) { return false; }
|
||||
virtual bool clicked(tvg::Canvas* canvas, int32_t x, int32_t y) { return false; }
|
||||
virtual bool clickdown(tvg::Canvas* canvas, int32_t x, int32_t y) { return false; }
|
||||
virtual bool clickup(tvg::Canvas* canvas, int32_t x, int32_t y) { return false; }
|
||||
virtual bool motion(tvg::Canvas* canvas, int32_t x, int32_t y) { return false; }
|
||||
virtual void populate(const char* path) {}
|
||||
virtual ~Example() {}
|
||||
|
||||
|
@ -227,9 +229,15 @@ struct Window
|
|||
break;
|
||||
}
|
||||
case SDL_MOUSEBUTTONDOWN: {
|
||||
if (example->clicked(canvas, event.button.x, event.button.y)) {
|
||||
needDraw = true;
|
||||
}
|
||||
needDraw |= example->clickdown(canvas, event.button.x, event.button.y);
|
||||
break;
|
||||
}
|
||||
case SDL_MOUSEBUTTONUP: {
|
||||
needDraw |= example->clickup(canvas, event.button.x, event.button.y);
|
||||
break;
|
||||
}
|
||||
case SDL_MOUSEMOTION: {
|
||||
needDraw |= example->motion(canvas, event.button.x, event.button.y);
|
||||
break;
|
||||
}
|
||||
case SDL_WINDOWEVENT: {
|
||||
|
@ -249,9 +257,7 @@ struct Window
|
|||
}
|
||||
|
||||
if (tickCnt > 0) {
|
||||
if (example->update(canvas, example->elapsed)) {
|
||||
needDraw = true;
|
||||
}
|
||||
needDraw |= example->update(canvas, example->elapsed);
|
||||
}
|
||||
|
||||
if (needDraw) {
|
||||
|
|
197
examples/LottieInteraction.cpp
Normal file
197
examples/LottieInteraction.cpp
Normal file
|
@ -0,0 +1,197 @@
|
|||
/*
|
||||
* Copyright (c) 2025 the ThorVG project. All rights reserved.
|
||||
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
|
||||
#include <thorvg_lottie.h>
|
||||
#include <math.h>
|
||||
#include "Example.h"
|
||||
|
||||
/************************************************************************/
|
||||
/* ThorVG Drawing Contents */
|
||||
/************************************************************************/
|
||||
|
||||
struct UserExample : tvgexam::Example
|
||||
{
|
||||
unique_ptr<tvg::LottieAnimation> lottie;
|
||||
|
||||
tvg::Point down, prv;
|
||||
tvg::Point origin;
|
||||
float rotation = 0.0f;
|
||||
uint32_t time = 0;
|
||||
bool pressed = false;
|
||||
|
||||
|
||||
struct {
|
||||
uint32_t duration = 2000; //5secs
|
||||
float target = 0.0f;
|
||||
uint32_t time = 0.0f;
|
||||
bool on = false;
|
||||
} effect;
|
||||
|
||||
|
||||
float calculate(tvg::Point& prv, tvg::Point& cur)
|
||||
{
|
||||
//degree with dot product
|
||||
auto degree = acos((prv.x * cur.x + prv.y * cur.y) / (sqrt(prv.x * prv.x + prv.y * prv.y) * sqrt(cur.x * cur.x + cur.y * cur.y)));
|
||||
degree *= 30.f; //weight x30
|
||||
|
||||
//direction with cross product
|
||||
auto dir = (prv.x * cur.y - (float)prv.y * (float)cur.x);
|
||||
if (dir < 0) degree *= -1.0f;
|
||||
|
||||
return degree;
|
||||
}
|
||||
|
||||
|
||||
bool clickdown(tvg::Canvas* canvas, int32_t x, int32_t y) override
|
||||
{
|
||||
down = {float(x), float(y)};
|
||||
prv = {float(x) - origin.x, float(y) - origin.y};
|
||||
time = elapsed;
|
||||
pressed = true;
|
||||
effect.on = false;
|
||||
effect.target = rotation;
|
||||
return false;
|
||||
}
|
||||
|
||||
bool clickup(tvg::Canvas* canvas, int32_t x, int32_t y) override
|
||||
{
|
||||
pressed = false;
|
||||
|
||||
//flicking in 500ms
|
||||
if (elapsed - time > 500) return false;
|
||||
if (abs(down.x - x) < 10 && abs(down.y - y) < 10) return false;
|
||||
|
||||
tvg::Point cur = {float(x) - origin.x, float(y) - origin.y};
|
||||
tvg::Point prv = {float(down.x) - origin.x, float(down.y) - origin.y};
|
||||
|
||||
effect.target = rotation + calculate(prv, cur) * 20.0f; //target to spinning effect
|
||||
effect.time = elapsed;
|
||||
effect.on = true;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
bool motion(tvg::Canvas* canvas, int32_t x, int32_t y) override
|
||||
{
|
||||
//update cursor
|
||||
tvgexam::verify(lottie->assign("FingerCursor", 3, "ct_xcoord", float(x)));
|
||||
tvgexam::verify(lottie->assign("FingerCursor", 3, "ct_ycoord", float(y)));
|
||||
|
||||
if (!pressed) return false;
|
||||
|
||||
tvg::Point cur = {float(x) - origin.x, float(y) - origin.y};
|
||||
|
||||
rotation = fmodf(rotation + calculate(prv, cur), 360.0f); //current rotation
|
||||
|
||||
tvgexam::verify(lottie->assign("SpinBoard", 10, "ct_val", rotation));
|
||||
|
||||
prv = cur;
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
bool content(tvg::Canvas* canvas, uint32_t w, uint32_t h) override
|
||||
{
|
||||
//LottieAnimation Controller
|
||||
lottie = unique_ptr<tvg::LottieAnimation>(tvg::LottieAnimation::gen());
|
||||
auto picture = lottie->picture();
|
||||
|
||||
//Background
|
||||
{
|
||||
auto shape = tvg::Shape::gen();
|
||||
shape->appendRect(0, 0, w, h);
|
||||
shape->fill(0, 0, 0);
|
||||
canvas->push(std::move(shape));
|
||||
}
|
||||
|
||||
//Lottie Boundary
|
||||
{
|
||||
auto shape = tvg::Shape::gen();
|
||||
shape->appendRect(100, 100, w - 200, h - 200);
|
||||
shape->fill(50, 50, 50);
|
||||
canvas->push(std::move(shape));
|
||||
}
|
||||
|
||||
if (!tvgexam::verify(picture->load(EXAMPLE_DIR"/lottie/extensions/spin.json"))) return false;
|
||||
|
||||
//image scaling preserving its aspect ratio
|
||||
float scale;
|
||||
float shiftX = 0.0f, shiftY = 0.0f;
|
||||
float w2, h2;
|
||||
picture->size(&w2, &h2);
|
||||
|
||||
if (w2 > h2) {
|
||||
scale = w / w2 * 0.8f;
|
||||
shiftX = w2 * 0.2f;
|
||||
shiftY = (h - h2 * scale) * 0.5f;
|
||||
} else {
|
||||
scale = h / h2 * 0.8f;
|
||||
shiftX = (w - w2 * scale) * 0.5f;
|
||||
shiftY = h2 * 0.2f;
|
||||
}
|
||||
|
||||
picture->scale(scale);
|
||||
picture->translate(shiftX, shiftY);
|
||||
|
||||
canvas->push(picture);
|
||||
|
||||
origin.x = float(w / 2);
|
||||
origin.y = float(h / 2);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
bool update(tvg::Canvas* canvas, uint32_t elapsed) override
|
||||
{
|
||||
if (!canvas) return false;
|
||||
|
||||
//spinning effect
|
||||
if (effect.on) {
|
||||
auto elapsedTime = elapsed - effect.time;
|
||||
auto progress = float(elapsedTime) / float(effect.duration);
|
||||
if (progress >= 1.0f) {
|
||||
progress = 1.0f;
|
||||
effect.on = false;
|
||||
}
|
||||
rotation = fmodf(effect.target * sin(progress), 360.0f);
|
||||
tvgexam::verify(lottie->assign("SpinBoard", 10, "ct_val", rotation));
|
||||
}
|
||||
|
||||
auto progress = tvgexam::progress(elapsed, lottie->duration());
|
||||
|
||||
//Update animation frame only when it's changed
|
||||
lottie->frame(lottie->totalFrame() * progress);
|
||||
canvas->update();
|
||||
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/************************************************************************/
|
||||
/* Entry Point */
|
||||
/************************************************************************/
|
||||
|
||||
int main(int argc, char **argv)
|
||||
{
|
||||
return tvgexam::main(new UserExample, argc, argv, true, 1024, 1024, 0);
|
||||
}
|
|
@ -95,7 +95,7 @@ struct UserExample : tvgexam::Example
|
|||
cout << "tween to: " << states[stateIdx].name << endl;
|
||||
}
|
||||
|
||||
bool clicked(tvg::Canvas* canvas, int32_t x, int32_t y) override
|
||||
bool clickdown(tvg::Canvas* canvas, int32_t x, int32_t y) override
|
||||
{
|
||||
auto intersect = [&](float x, float y, tvg::Point* obb) -> bool {
|
||||
//compute edge vectors
|
||||
|
|
|
@ -77,7 +77,7 @@ if lottie_loader
|
|||
endif
|
||||
|
||||
if lottie_expressions
|
||||
source_file += 'LottieExpressions.cpp'
|
||||
source_file += ['LottieExpressions.cpp', 'LottieInteraction.cpp']
|
||||
endif
|
||||
|
||||
foreach current_file : source_file
|
||||
|
|
17287
examples/resources/lottie/extensions/spin.json
Normal file
17287
examples/resources/lottie/extensions/spin.json
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue