还有一个动画片段，也是一个子物体

![[Pasted image 20240307153008.png]]

父物体是一个label文本，然后子物体，是两个显示要素VisualElement

![[Pasted image 20240307153142.png]]

动画片段的抽象父类，设置根节点，背景颜色，宽度，位置

![[Pasted image 20240307153401.png]]

其中，背景颜色，就是有选中，和消选，两个调用

![[Pasted image 20240307153530.png]]

表现：

![[Pasted image 20240307153603.png]]

动画片段，对应的具体逻辑：
加载对应的uxml配置，，设置一下主拖曳区域，和动画帧结束点线条；
设置标题的接口；
传参tracStyle是一个VisualElement，会新增该动画片段root节点，

![[Pasted image 20240307153633.png]]

传参tracStyle是这个

![[Pasted image 20240307154242.png]]

也就是回到，前面两个基础轨道类，是动画片段的显示父节点；
初始化函数，设置一下，自身的显示父节点 menuParent 和 contentParent；
然后加载俩配套的，轨道uxml文件；

![[Pasted image 20240307154305.png]]

是继承自SkillTrackStyleBase，主要逻辑就是，往自身根节点，通过代码的形式，添加子节点

![[Pasted image 20240307154417.png]]

继续，动画轨道AnimationTrack是继承自，SkillTrackBase技能基类

![[Pasted image 20240307154804.png]]

初始化，实例化基础轨道类相关，设置标题，然后注册回调函数，拖曳相关

![[Pasted image 20240307154822.png]]

表现：

![[Pasted image 20240307154946.png]]

在技能编辑器页面，会有一个统统一管理，所有轨道的list列表

![[Pasted image 20240307155018.png]]

在初始化动画轨道的时候，会加上这个；
后续还会加上，特效和音效轨道

![[Pasted image 20240307155047.png]]

动画片段，是可以点击，修改颜色等逻辑操作；
相关抽象基类：
选择、消选，重置帧宽度

![[Pasted image 20240307155408.png]]

继承子类；
选择的时候，unity属性面板，显示对应轨道信息，选中和消选颜色设置

![[Pasted image 20240307155512.png]]

面板显示相关

![[Pasted image 20240307155734.png]]

设置，选择当前轨道；
这个是技能编辑器本身的，CustomEditor属性面板逻辑；
调用当前轨道的OnSelect选中函数

![[Pasted image 20240307155744.png]]

Instance在创建面板中，有设置为this，调用的Show函数，是用来显示，动画相关数据

![[Pasted image 20240307155858.png]]

![[Pasted image 20240307160040.png]]

![[Pasted image 20240307160051.png]]

选中的，表现

![[Pasted image 20240307160110.png]]

动画片段的交互逻辑；
SkillAnimationTrackItemStyle的实例化，已经调用了对应的uxml显示文件，也设置了默认颜色，和选中颜色；

![[Pasted image 20240307160203.png]]

![[Pasted image 20240307160255.png]]

绑定对应的鼠标事件：点击，抬起，移出，移动；
重置动画帧宽度

![[Pasted image 20240307160344.png]]

重置函数，除了自身根据，动画帧的位置信息设定，还有动画终结线的显示属性，和位置设置

![[Pasted image 20240307160441.png]]

鼠标交互里面，点击，抬起，移出，这三个的逻辑，都还是比较简单的；
点击，就是触发选中函数，抬起和移出，都会调用，拖曳动画片段，本体的函数

![[Pasted image 20240307160656.png]]

选中的业务逻辑，会跳转到面板显示，还有选择和消选，调用了对应的，设置背景函数

![[Pasted image 20240307161006.png]]

拖曳，就是设置帧索引相关了

![[Pasted image 20240307161106.png]]

对应动画数据，字典存储的修改，删除旧的，增加新的，而且会自动保存配置文件

![[Pasted image 20240307161132.png]]

鼠标移动逻辑，会相对复杂一点；
需要计算开始坐标，和鼠标位置之间的偏移；
而且可能考虑到，整个轨道，边界的情况；

举例说明，表现上，有可能出现，两者之间，没有冗余空间，进行左边拖曳

![[Pasted image 20240307161447.png]]

![[Pasted image 20240307161250.png]]

这是配合，遍历，轨道整体动画数据的，帧索引，判断是否会出现，重叠的情况

![[Pasted image 20240307161402.png]]

检测，不能超过最大边界

![[Pasted image 20240307161822.png]]

以上，就是动画片段本身，相关的交互逻辑；
回到轨道逻辑，这是初始化最后需要做的，重置数据
先销毁，再重新绘制

![[Pasted image 20240307161910.png]]

这里遍历的，是配置信息数据

![[Pasted image 20240307162027.png]]

销毁是这里的，显示要素销毁

![[Pasted image 20240307162058.png]]

创建，就是根据帧索引，创建前面提及的，动画片段了；
然后加到，对应的trackItemDic字典

![[Pasted image 20240307162116.png]]