草履虫动画编辑器

基于tvt.js的动画编辑器,支持动画编辑、动画播放、动画导出等功能

草履虫动画编辑器

基于tvt.js的动画编辑器,支持动画编辑、动画播放、动画导出等功能

预览截图

插件安装

本插件为TVT.js平台深度定制开发的源码包,如需在其他平台集成使用,建议进行适配性调整以实现最佳兼容效果。

1、点击右侧插件包下载,得到: 'animationEditor.zip' , 并放在 `icegl-three-vue-tres/pluginMaker/install/`

2、请使用命令终端,自行定位到您电脑的目录

cd /icegl-three-vue-tres/

3、输入命里,安装插件

yarn plugin.marker install animationEditor

4、启动预览模式即可:

yarn pre.dev

插件介绍

视频预览:

清晰版跳转 B站查看详情

首先当时是在线使用地址:

animationeditor.icegl.cn



插件依赖库: gif.js.optimized

请导入插件后,命令行增加:yarn add gif.js.optimized


1. 模型管理

(1)导入模型:支持导入 GLB 3D 模型文件
(2)模型缓存:使用 localforage 本地存储缓存导入的模型,刷新页面后可自动恢复
(3)模型解析:自动解析模型中的动画配置。
2. 动画类型(5种)
类型  说明
(1)平移 (translate)   沿 X/Y/Z 轴平移,可设置距离
(2)旋转 (rotate)      沿 X/Y/Z 轴旋转,可设置角度
(3)显隐 (visibility)  控制模型显示/隐藏(透明度渐变)
(4)视角 (camera)  相机动画,记录相机位置和朝向
(5)消融 (dissolve)    模型消融效果动画
3. 时间轴编辑
(1)可视化时间轴:底部面板展示所有动画项
(2)属性编辑:支持修改开始时间、持续时间、方向、距离/角度
(3)实时预览:拖动时间轴可实时查看动画效果
(4)动画排序:按时间顺序排列,支持删除单项
4. 播放控制
(1)播放/暂停:底部工具栏控制动画播放
(2)重置:一键重置所有动画到初始状态
5.工具箱
(1)屏幕截图

2026-06-01 10:38:20
测试完毕,并上架插件
版本正持续更新和优化,期待更多功能吧