轻量级嵌入式系统的 Lottie 动画实现

在嵌入式 Linux 系统中实现流畅的 Lottie 动画交互

引言

Lottie 动画以其轻量级、高质量的特点，已经成为现代 UI 设计的标配。但在嵌入式 Linux 系统中实现流畅的 Lottie 动画播放，并提供精确的交互控制，却并非易事。本文将介绍如何在 TinyPiXOS 中实现可暂停/恢复的 Lottie 动画效果。

技术背景

TpGUI 是TinyPiXOS提供的轻量级 GUI 框架。它提供了 TpLottieAnimation 类来支持 Lottie 动画播放。

TpLottieAnimation

原生的 TpLottieAnimation 类只提供了 setVisible() 方法来控制显隐，隐藏组件会让动画内容消失。

我们要实现的效果是:停止播放但保持当前帧显示。

解决方案:扩展类设计

通过继承 TpLottieAnimation 并添加独立的暂停/恢复方法:

cpp 复制代码

class PausableLottieAnimation : public TpLottieAnimation
{
public:
    void pause() {
        if (!isPaused) {
            isPaused = true;
            TpLottieAnimation::setVisible(false);  // 停止定时器
            TpWidget::setVisible(true);             // 保持可见
        }
    }
    
    void resume() {
        if (isPaused) {
            isPaused = false;
            TpLottieAnimation::setVisible(true);   // 重启定时器
        }
    }
    
    void togglePause() {
        isPaused ? resume() : pause();
    }
};

核心技巧 :利用 setVisible() 的副作用来控制定时器，但通过分别调用父类方法来分离定时器控制和可见性控制。

完整示例:点击屏幕暂停/播放

1. 自定义主窗口类

通过重写 onMousePressEvent() 捕获点击事件:

cpp 复制代码

class AnimationControlWindow : public TpMainWindow
{
protected:
    virtual bool onMousePressEvent(TpMouseEvent *event) override {
        for (auto* anim : animations) {
            anim->togglePause();
        }
        statusLabel->setText(animations[0]->paused() ? 
            "状态: 已暂停(停在当前帧)" : "状态: 播放中");
        return true;
    }
};

2. 主程序实现

cpp 复制代码

int main(int argc, char *argv[])
{
    TpApp app(argc, argv);
    AnimationControlWindow *mainWindow = new AnimationControlWindow();
    
    // 创建状态标签
    TpLabel *statusLabel = new TpLabel(mainWindow);
    statusLabel->setText("状态: 播放中 (点击屏幕暂停/播放)");
    mainWindow->statusLabel = statusLabel;
    
    // 创建多个动画
    PausableLottieAnimation *anim1 = new PausableLottieAnimation(mainWindow);
    anim1->setRect(50, 50, 300, 300);
    anim1->load("/path/to/animation1.json");
    mainWindow->addAnimation(anim1);
    
    // ... 添加更多动画 ...
    
    mainWindow->show();
    return app.run();
}

应用场景

加载动画: 在数据加载时显示 Lottie 动画，完成后暂停在最后一帧
交互反馈: 点击按钮时播放动画，提供视觉反馈
引导页: 多个动画组成的引导流程，支持暂停/继续

总结

通过扩展 TpLottieAnimation 类，我们实现了真正的暂停功能------停止播放但保持当前帧显示。这种设计模式可以应用到其他需要精确控制的动画场景中。

完整代码已在上文展示，您可以直接在 TinyPiXOS 项目中使用。

TinyPiXOS开发者联盟

源码级支持 + 真实项目：TinyPiXOS开发者联盟招募中。
获取开发资料
 技术手册
 项目官网
 B 站视频

感谢支持和关注，如果对项目感兴趣，请点赞、收藏和转发！