{"id":16567904,"url":"https://github.com/hufe921/ae2web","last_synced_at":"2026-02-02T20:03:54.654Z","repository":{"id":114035977,"uuid":"125952011","full_name":"Hufe921/AE2Web","owner":"Hufe921","description":"AE animation is displayed on the web side","archived":false,"fork":false,"pushed_at":"2018-03-20T05:33:30.000Z","size":763,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-04T15:34:52.618Z","etag":null,"topics":["ae"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Hufe921.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-20T02:55:57.000Z","updated_at":"2018-03-20T05:33:31.000Z","dependencies_parsed_at":"2023-07-15T15:34:34.050Z","dependency_job_id":null,"html_url":"https://github.com/Hufe921/AE2Web","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Hufe921/AE2Web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hufe921%2FAE2Web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hufe921%2FAE2Web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hufe921%2FAE2Web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hufe921%2FAE2Web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hufe921","download_url":"https://codeload.github.com/Hufe921/AE2Web/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hufe921%2FAE2Web/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263619802,"owners_count":23489562,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ae"],"created_at":"2024-10-11T21:07:46.062Z","updated_at":"2026-02-02T20:03:54.610Z","avatar_url":"https://github.com/Hufe921.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AE2Web\nAE animation is displayed on the web side\n\n\u003e #### 从AE到Web展示\n\n###### 一、如何做到AE动效到Web显示？\n\n\n- [x] 1.手工：通过掌握的Web技术；(效率较低，且还原难度较大)\n- [x] 2.机械：通过工具进行导出；\n\n\n\n**机械实现：**\n1. **Bodymovin** 是 AE 的一个插件，用于将 AE 导出为 Web 动画（HTML、JSON、SVG 或 Canvas），仅支持 AE 部分特性。\n\n2. **lottie-web** 是 Airbnb 团队的一个用于在 Web、Android、iOS 和 React Native 渲染 AE 动画的库。\n\n\n**实现前准备步骤：**\n\n1.下载安装AE，[下载地址](https://www.adobe.com/cn/products/aftereffects/free-trial-download.html)\n\n2.下载Bodymovin插件\n\n3.下载插件安装工具\n\n4.制作AE动效或寻找合适的素材\n\n[提取密码：aar7（插件+安装工具+素材）](https://pan.baidu.com/s/1bTRgWaZqdQYf79WPhJNGiA)\n\n**导出步骤**\n\n1.编辑 =\u003e 首选项 =\u003e 常规 =\u003e 允许脚本写入文件和访问网络\n\n2.导入素材，窗口 =\u003e 扩展 =\u003e Bodymovin\n\n3.选中文件 =\u003e Render =\u003e 导出素材（JSON+images文件夹）\n\n\n**核心代码**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\t\u003chead\u003e\n\t\t\u003cmeta charset=\"utf-8\" /\u003e\n\t\t\u003ctitle\u003e\u003c/title\u003e\n\t\t\u003cstyle type=\"text/css\"\u003e\n\t\t\t#container{\n\t\t\t\twidth: 300px;\n\t\t\t\theight: 600px;\n\t\t\t}\n\t\t\u003c/style\u003e\n\t\u003c/head\u003e\n\t\u003cbody\u003e\n\t\t\n\t\t\u003c!--容器--\u003e\n\t\t\u003cdiv id=\"container\"\u003e\n\t\t\t\n\t\t\u003c/div\u003e\n\t\t\n\t\t\u003cscript src=\"https://cdn.bootcss.com/bodymovin/4.13.0/bodymovin.min.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript type=\"text/javascript\"\u003e\n\t\t\tvar animation = bodymovin.loadAnimation({\n\t\t\t  container: document.getElementById('container'), // Required\n\t\t\t  path: 'data.json', // Required\n\t\t\t  renderer: 'svg/canvas/html', // Required\n\t\t\t  loop: true, // Optional\n\t\t\t  autoplay: true, // Optional\n\t\t\t  name: \"Hello World\", // Name for future reference. Optional.\n\t\t\t})\n\t\t\u003c/script\u003e\n\t\u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhufe921%2Fae2web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhufe921%2Fae2web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhufe921%2Fae2web/lists"}