时间过得很快, 开源夏令营就要结束了, 今天就简单总结一下这段时间的所学所做。
一. 准备工作
1. 研究源代码:
因为项目已经有一定规模, 所以第一步肯定是要先弄懂现有项目结构和代码逻辑。
- 所做的工作:
- 学习和练习backbonejs, requirejs, sass
- 理解MV*模式, 弄懂每一部分具体做哪些工作
- 我的理解:
- controlljs是整个编辑器的核心,是连接view层和model数据层的纽带。
- view层负责把数据显示出来, 包括每一帧的具体数据, 和骨骼父子关系等
- model, collection会负责数据的验证和存取。
每当用户操作时,会在view层触发事件, 然后通知到controller层, 然后拿到model层的数据, 最后再通过view层进行显示。
2. 其他工作
- 下载使用能制作骨骼动画编辑器的软件, 比如cocostudio和spine。
- 了解动画引擎(alloystick)的demo和需要的数据
二. 前期任务
- 骨骼数据合法性验证( 在model层经行验证,不通过则数据不变)
- 工作区可以一次性拖入多张图片, 同时添加多个骨骼
- 可以隐藏骨骼树面板, 为时间轴模板提供更大的空间, 便于编辑动画
通过这几个任务, 更加熟悉了这个项目, 包括每一部分具体的实现都会有所了解。
三. 后期任务
-
学习node-webkit:
- 看node-webkit的官方wiki, 配好环境
- 集成node-webkit到项目中
- 利用grunt-node-webkit-builder 导出应用
-
导出数据和动画预览
- 根据文档,具体了解动画引擎所需要的数据的作用
- 把骨骼蒙皮图片画到一张画布上, 然后导出一张大图和相关数据
- 把帧数据进行一些处理, 然后导出
- 加一个iframe, 加载动画引擎js, 然后实现动画预览
四. 总结
-
这段时间有很大的收获,以前写代码时总想着怎么去实现一个功能。 现在觉得这不够, 不仅要实现而且还要优雅的实现(包括容错, 可扩展, 代码规范, 注释, 实现方法的效率…),所以 时刻要想着有没有更好的办法实现。
-
深刻体会到了一个项目的整体规划,和MV*这种模式的好处。 把工作分成几个部分,交给几部分代码去实现。 这样便于理解, 也便于维护。
-
对骨骼动画有了更深入的理解,看似简单的变换(平移, 旋转, 缩放)和透明度(alpha), 遮盖顺序(z-index) 就能产生生动的动画, 让我更加体会到了编程的乐趣。