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.辅助函数,分解骨骼/关键帧数据,展示骨骼(不是关键帧时要获得补帧数据)