AE-Element 项目使用教程

最新推荐文章于 2025-01-05 09:58:32 发布

缪昱锨Hunter

最新推荐文章于 2025-01-05 09:58:32 发布

阅读量474

点赞数 8

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00029/article/details/136775648

AE-Element 项目使用教程

AE-Element :art: use bodymovin to render some interesting After Effects vector element 项目地址: https://gitcode.com/gh_mirrors/ae/AE-Element

1. 项目目录结构及介绍

AE-Element/
├── AE-SRC/
│   ├── ... (After Effects 源文件)
├── PRERENDER/
│   ├── ... (预渲染的 JSON 数据)
├── demo/
│   ├── ... (演示文件)
├── images/
│   ├── ... (图片资源)
├── LICENSE
├── README.md
├── index.html

目录结构说明

AE-SRC: 包含 After Effects 的源文件，用于创建和修改矢量元素。
PRERENDER: 包含预渲染的 JSON 数据，这些数据可以直接用于网页渲染。
demo: 包含项目的演示文件，展示了如何在网页中使用预渲染的 JSON 数据。
images: 包含项目中使用的图片资源。
LICENSE: 项目的开源许可证文件。
README.md: 项目的说明文件，包含项目的基本信息和使用说明。
index.html: 项目的启动文件，用于展示演示内容。

2. 项目启动文件介绍

index.html

index.html 是项目的启动文件，用于展示演示内容。该文件包含了使用 bodymovin 插件渲染 After Effects 矢量元素的示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AE-Element Demo</title>
</head>
<body>
    <!-- 演示内容 -->
    <div id="demo"></div>

    <!-- bodymovin 插件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js"></script>
    <script>
        // 加载预渲染的 JSON 数据
        var animation = bodymovin.loadAnimation({
            container: document.getElementById('demo'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: 'PRERENDER/data.json'
        });
    </script>
</body>
</html>

启动文件说明

HTML 结构: index.html 文件包含了基本的 HTML 结构，用于展示演示内容。
bodymovin 插件: 通过引入 bodymovin 插件，可以在网页中渲染 After Effects 生成的 JSON 数据。
预渲染数据加载: 使用 bodymovin.loadAnimation 方法加载 PRERENDER 目录下的 JSON 数据，并在页面中进行渲染。

3. 项目配置文件介绍

README.md

README.md 文件是项目的说明文件，包含了项目的基本信息和使用说明。

# AE-Element

使用 bodymovin 渲染一些有趣的 After Effects 矢量元素。

## 演示

演示地址：http://web-oysun.cn/AE-Element/

请在 PC 端浏览，在手机端会比较卡，因为大量的渲染元素集中在一个页面上，所以非常吃手机内存。这是为了演示，实际上你不需要把这么多这种渲染元素放在同一个页面上。

## 使用

实际上你只需要 `PRERENDER` 文件夹下的 JSON 数据。

- 如果你用原生 JS 或者 jQuery，用 bodymovin。
- 如果在安卓使用，配合 airbnb 的 lottie-android。
- 如果在 iOS 使用，配合 airbnb 的 lottie-ios。
- 如果在 React Native 使用，配合 airbnb 的 lottie-react-native。

如果你会 AE，也可以使用 `AE-SRC` 文件下的 AE 源文件进行修改。

## 许可证

MIT 许可证