实现骨骼动画编辑器的准备工作

一.阅读已有的源代码：

看了一下现有AlloyAnimation的源代码， 对这个项目有了大致的了解。

看了一下，发现有几个地方不是很熟， 如backbone.js, requirejs， 和sass

于是就对开始看了下这几个库相关的教程。

在网上找了一下，看到了这个教程--backbone教程。 了解了基本的框架， 看了一些相关的实例。自己动手把官方的todo做了一遍， 更加深入的理解了它的思想。

backbone是一个前端的MVC框架， 如果项目比较复杂的话，用这个框架可以模块化的组织代码， 让思路更加清晰。而且增添代码非常方便，便于维护。

然后看了requirejs， 把做好的todo加上了requirejs。

然后非常感谢阮一峰， 在他的博客上看了compass，sass， requirejs等相关的内容， 感觉收益匪浅。

理解了这些，我对AlloyAnimation的源码有了更深刻的理解。再看MVC-workflow.jpg 思路感觉更加清晰了

二.了解动画编辑器

在网上看了下相关的骨骼动画原理，大致明白了它的思路。

发现cocos2d已经实现了骨骼动画， 于是又研究了下cocos2d， 配好相关的环境后， 练习了下基础教程。下载了cocos-studio，发现挺好用的， 界面好用美观， 功能也比较齐全。 我觉得对我挺有启发意义。

同时把flash 编辑器下载了下来，用了下flash的功能。

现在在界面操作上， 用户交互上有了基本的思路， 接下来就看下核心数据方面的部分。

三.动画数据分析

动画引擎需要的数据：

到AlloyStick官网看了一下demo， 弄到本地看了下，感觉动画引擎需要的数据是这样的

xx.playTo(动作名称， 总帧数，过度帧， 是否循环）;

TextureData:

"head": {

"x": 0, // 在Texture图片的x坐标位置

"width": 66, //蒙皮宽度

"y": 0, // 在Texture图片的y坐标位置

"originX": -33,

"originY": -33, // 旋转中心

"height": 66 //蒙皮高度

},

BoneData:

"head": {

"name": "head", //蒙皮名称

"x": -1,

"y": -80, // 骨骼偏移位置（具体作用不是太清楚）

"scaleX": 1,

"scaleY": 1 //缩放比例

},

AnimationData:

"run": {

"name": "run", //动作名称

"frame": 44, //总帧数

"footRight": { //骨骼名称

"nodeList": [{ //动作节点列表

"x": 15.25,

"y": 156.05, //坐标

"rotation": 90, //旋转角度

"offR": 0, //是否旋转过一圈

"scaleX": 1,

"scaleY": 1.03, //缩放比例

"alpha": 1, //透明度

"frame": 4 //节点帧数

},