开源夏令营总结

  时间过得很快， 开源夏令营就要结束了， 今天就简单总结一下这段时间的所学所做。

一. 准备工作

1. 研究源代码：

因为项目已经有一定规模， 所以第一步肯定是要先弄懂现有项目结构和代码逻辑。

• 所做的工作： 
  
  • 学习和练习backbonejs， requirejs， sass
  • 理解MV*模式， 弄懂每一部分具体做哪些工作
• 我的理解： 
  
  • controlljs是整个编辑器的核心，是连接view层和model数据层的纽带。
  • view层负责把数据显示出来， 包括每一帧的具体数据， 和骨骼父子关系等
  • model， collection会负责数据的验证和存取。

每当用户操作时，会在view层触发事件， 然后通知到controller层， 然后拿到model层的数据， 最后再通过view层进行显示。

2. 其他工作

• 下载使用能制作骨骼动画编辑器的软件， 比如cocostudio和spine。
• 了解动画引擎（alloystick）的demo和需要的数据

二. 前期任务

1. 骨骼数据合法性验证（ 在model层经行验证，不通过则数据不变）
2. 工作区可以一次性拖入多张图片， 同时添加多个骨骼
3. 可以隐藏骨骼树面板， 为时间轴模板提供更大的空间， 便于编辑动画

通过这几个任务， 更加熟悉了这个项目， 包括每一部分具体的实现都会有所了解。

三. 后期任务

1. 学习node-webkit：

   • 看node-webkit的官方wiki， 配好环境
   • 集成node-webkit到项目中
   • 利用grunt-node-webkit-builder 导出应用

2. 导出数据和动画预览

   • 根据文档，具体了解动画引擎所需要的数据的作用
   • 把骨骼蒙皮图片画到一张画布上， 然后导出一张大图和相关数据
   • 把帧数据进行一些处理， 然后导出
   • 加一个iframe， 加载动画引擎js， 然后实现动画预览

四. 总结

• 这段时间有很大的收获，以前写代码时总想着怎么去实现一个功能。 现在觉得这不够， 不仅要实现而且还要优雅的实现（包括容错， 可扩展， 代码规范， 注释， 实现方法的效率…），所以 时刻要想着有没有更好的办法实现。

• 深刻体会到了一个项目的整体规划，和MV*这种模式的好处。 把工作分成几个部分，交给几部分代码去实现。 这样便于理解， 也便于维护。

• 对骨骼动画有了更深入的理解，看似简单的变换（平移， 旋转， 缩放）和透明度（alpha), 遮盖顺序（z-index） 就能产生生动的动画， 让我更加体会到了编程的乐趣。