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