中期报告

开源夏令营-中期报告

非常感谢csdn和腾讯开源的导师们能给我这样一个机会， 在这段时间里， 每天看源码，写代码，学习新的知识和使用新的工具， 过得很充实。 今天就简单总结一下这段时间的所学所做。

一.开始阶段

由于这个项目本来已经有了好几千行代码，很高的完成度。所以我的首要任务就是读懂这些代码。暑假开始后，我便从github上下好代码， 然后开始看。第一次看代码量这么大的js项目确实有些不适应， 而且项目中用到的MVC的库（backbone）我以前没有用过， 这增加了我的理解难度，于是我决定开始恶补相关的知识。

二.学习阶段

首先， 我在backbone官网简单地看了一下的API和todo example， 然后在the5fire blog跟着教程做了一下。 虽然以前写后台的时候用过MV模式，
但是和前台的MV模式感觉还是有所不一样的。总之感觉学完之后收获颇丰， 于是很欣喜的把以前的一个前台的小项目花了一天多的时间用backbonejs重构了一遍，顺便也加上养了requirejs，顿时感觉代码清晰了好多。

通过学习加练习， 花了几天的时间， 基本上算是搞懂了backbonejs项目的架构，然后再回过头来看AlloyAnimation的源码， 基本上能把握总体的结构了。刚好那几天和我的导师聊了一下， 他给我讲了一下项目的整体架构思想， 让我更加深刻地理解了源代码的结构。

三.尝试阶段

当时跟我的导师聊了下， 觉得让我一开始就做很大的功能，比如导出数据，比较有难度。 就让我先做点小的改进， 同时能更加熟悉代码。首先做的是骨骼数据的验证。开始我在属性输入面板的监听函数直接验证，后来我的导师让我放在model里面更加合理。我在网上查了下，确实这样比较合理，于是就修改过来了。

然后导师让我用下编辑器，觉得有什么不好的地方再进行改进。我用了一下，觉得每次只导入一张图片挺麻烦的，然后就在workspace那个面板拖动图片进来时可以支持多个图片一起,然后创建多个骨骼，这样感觉要方便些。
在用编辑器的时候，我感觉在编辑动画的时候， 时间轴面板显得小了， 这个时候骨骼树面板基本又用不到， 于是我就写了代码，可以隐藏骨骼树面板， 同时时间轴面板会填充这个区域。 如果以后要实现更多帧的动画，感觉可以让时间轴面板可以拖动。

四.探索阶段

做了一些小功能之后， 对项目的实现细节有了更深的理解。又花时间看了一下源代码,感觉还是收获颇丰。 记得csdn任务要求上说要用node实现离线化。于是就开始看node-webkit。看完node-webkit后，感觉js能做的事真是越来越多。后来看到导出node-webkit时可以用grunt的一个插件， 于是又看了下grunt（记得在源码里面有个Todo上提到过）由于项目暂时还没有用到node的库，所以导出node-webkit的应用也很容易，基本不用改代码， 就可以导出了（感觉还是挺爽的)
不过如果要真的离线化的话， 感觉应该再加些保存进度菜单什么的。

五.下一步计划

接下来我主要想做的是导出数据给骨骼动画引擎用。今天导师把数据格式也给了我。现在对项目也有一定熟悉度，应该可以完成。
我是这样想的，首先要把几张骨骼蒙皮图片画到一张画布上，同时记录每个图片的位置等相关数据， 这样就可以导出骨骼蒙皮的信息了。然后得到关键帧数据和骨骼数据， 经行一些处理，再导出成json。

导出成功后，感觉可以再加动画预览的功能。 点击动画预览后加一层canvas，然后加载alloystick的js文件和关键帧的数据，就可以预览动画了。

​