对AlloyAnimation的理解

[xiaozhu12371237]

AlloyAnimation利用了backbone.js，实现了MVC模式。


数据层（model， collection）只负责数据方面的更改

视图层（view）负责交互，操作发出命令到controller，更新面板

控制层（controller）核心，联系view和model，调用view，model的方法


在alloyAnimation具体作用如下：

一. model, collection

主要作用（model）:

1.默认字段默认初值，

2.新增model时初始化id，

3.记录model总数量， 利用classProperties

4.对保存的数据经行合法验证，validate

5.数据发生变化 ，会log


主要作用（collection）:

1.新增collection时初始化id（应该只会实例化一次collection）

2.增加删除collection中的model时，log

3.监听model验证， 如果不合法触发control里的事件经行处理

特例（collection）：

keyframeCollection：getFrameData（） --获取某个帧的数据，（关键帧或补帧）

二.view

view之间的继承关系：

abstractBone（渲染到特定容器，更改骨骼状态，addChild，删除，更新多个数据，遍历）

-bone（在workspacejs里面）（缓存数据，渲染，更改骨骼状态，更新多个数据，获取完整骨骼数据， 设置获取骨骼数据同时会更改骨骼dom样式）

-bone（在bonetreejs里面）（缓存dom元素，渲染，设置获取骨骼数据同时会更改骨骼dom结构）

panel（最基础）：（初始panelName， 增加$el的class）

-action（渲染，增加action，激活action，得到激活actionId，监听input事件更改name）

-boneProp（渲染，监听input事件更改属性，切换骨骼，得到骨骼数据，更新数据，上传图片）

-timeLine（渲染，初始相关数据，增加删除移动时间线，增加删除关键帧，监听鼠标事件）

-abstractSkeleton（增加删除更新骨骼，切换骨骼）

-boneTree（渲染，更新骨骼，得到激活骨骼id，监听鼠标事件）

-workspace（渲染，缓存dom元素，更新骨骼，监听鼠标事件，拖动添加图片）

三.controller

controller

1.初始渲染各个面板（只是发出命令）

2.监听collection，view事件（通过此，view，collection可以向controller发出信息）

3.监听/取消监听,骨骼/关键帧(监听的相关model发生改变，更新面板）

4.添加删除更改，骨骼/关键帧/活动，会调用相关方法更新数据，面板

5.辅助函数，分解骨骼/关键帧数据，展示骨骼（不是关键帧时要获得补帧数据）