Glottie 项目安装与使用教程

Glottie 项目安装与使用教程

glottieOpenGL/WebGL based Lottie animation player项目地址:https://gitcode.com/gh_mirrors/gl/glottie

1. 项目的目录结构及介绍

Glottie 项目的目录结构如下：

glottie/
├── CMakeLists.txt
├── README.md
├── LICENSE
├── include/
├── src/
├── examples/
│   ├── wasm/
│   │   └── index.html
├── scripts/
│   ├── linux_build
│   ├── macos_build
│   ├── setup-windows.ps1
│   └── wasm_build.bat
└── third_party/
    └── SDL2/

目录结构介绍

• CMakeLists.txt: 项目的 CMake 配置文件，用于构建项目。
• README.md: 项目的介绍文档，包含项目的基本信息和使用说明。
• LICENSE: 项目的开源许可证文件。
• include/: 包含项目的头文件。
• src/: 包含项目的源代码文件。
• examples/: 包含项目的示例文件，例如 WASM 的示例文件 index.html。
• scripts/: 包含项目的构建脚本，例如 linux_build、macos_build、setup-windows.ps1 和 wasm_build.bat。
• third_party/: 包含项目依赖的第三方库，例如 SDL2。

2. 项目的启动文件介绍

Glottie 项目的启动文件根据不同的平台有所不同：

Windows

在 Windows 平台上，Glottie 的启动方式如下：

type <JSONfile> | <CMAKE_INSTALL_PREFIX>/glottie.exe

其中 <JSONfile> 是包含 Lottie 动画的 JSON 文件路径，<CMAKE_INSTALL_PREFIX> 是 CMake 安装路径。

WASM

在 WASM 平台上，Glottie 的启动方式如下：

<script src="glottie.js"></script>
<script>
  const glottie = new Glottie();
  glottie.loadJSON(jsonData);
</script>

其中 glottie.js 是 WASM 构建生成的 JavaScript 文件，jsonData 是 Lottie 动画的 JSON 数据。

3. 项目的配置文件介绍

Glottie 项目的主要配置文件是 CMakeLists.txt，该文件用于配置项目的构建过程。以下是 CMakeLists.txt 的主要配置项：

# 设置项目名称
project(Glottie)

# 设置包含目录
include_directories(include)

# 添加源文件
add_executable(glottie src/main.cpp)

# 链接库
target_link_libraries(glottie SDL2)

配置项介绍

• project(Glottie): 设置项目的名称为 Glottie。
• include_directories(include): 设置包含目录为 include 目录。
• add_executable(glottie src/main.cpp): 添加可执行文件 glottie，源文件为 src/main.cpp。
• target_link_libraries(glottie SDL2): 链接 SDL2 库。

通过以上配置，Glottie 项目可以在不同的平台上进行编译和运行。

glottieOpenGL/WebGL based Lottie animation player项目地址:https://gitcode.com/gh_mirrors/gl/glottie