对AlloyAnimation的理解

来源:互联网 发布:淘宝反渗透膜 编辑:程序博客网 时间:2024/06/06 16:28

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

0 0
原创粉丝点击