而技能配置文件，相关逻辑，就更加简单了

![[Pasted image 20240307124048.png]]

对技能配置进行赋值，刷新轨道和帧总数，是后面的逻辑

![[Pasted image 20240307124037.png]]

根据逻辑，为空的时候，帧上限是100

![[Pasted image 20240307124306.png]]

有了配置之后，就根据配置的来了，这里是130：

![[Pasted image 20240307124358.png]]

是一致的：

![[Pasted image 20240307124415.png]]

![[Pasted image 20240307125745.png]]

查看基本信息：

![[Pasted image 20240307124736.png]]

逻辑就是选中，对应的技能配置文件

![[Pasted image 20240307124746.png]]

技能配置文件的，逻辑入口

![[Pasted image 20240307125023.png]]

继承自框架内，配置基类：

![[Pasted image 20240307125429.png]]

结构上，主要是各个动画数据

![[Pasted image 20240307125039.png]]

最底层的，是帧事件类；
主要是，动画帧片段，是否RootMotion跟随移动，动画过渡时间，动画持续帧

![[Pasted image 20240307125128.png]]

动画帧数据，其中标签，指的是odin序列化，这个字典

![[Pasted image 20240307125457.png]]

这里实例化

![[Pasted image 20240307125546.png]]

具体配置表现：

![[Pasted image 20240307125625.png]]

第二个总布局，就是，主体时间轴，是这个部件

![[Pasted image 20240307130136.png]]

继续，分左右俩部件

![[Pasted image 20240307130213.png]]

时间轴：

![[Pasted image 20240307131530.png]]

时间轴和下方的轨道，鼠标滚轮缩放，会同步控制
所以逻辑上，也会关联起来

![[Pasted image 20240307131710.png]]

这是时间轴相关的，组件

![[Pasted image 20240307131825.png]]

时间轴是这个部件：

![[Pasted image 20240307131904.png]]

获取方式，也是同理：

![[Pasted image 20240307131947.png]]

这是一个滑动ScrollView

![[Pasted image 20240307132050.png]]

![[Pasted image 20240307132205.png]]

这俩组件：

![[Pasted image 20240307132236.png]]

对应：

![[Pasted image 20240307132247.png]]

时间轴的绘制逻辑

![[Pasted image 20240307132305.png]]

具体实现；
颜色是白，根据偏转坐标，拿到起始索引
[[Mathf.RoundToInt]]
根据技能配置的帧宽度，打点，去绘制线条和文本

![[Pasted image 20240307132825.png]]

![[Pasted image 20240307132332.png]]

偏转坐标，是跟上述ScrollView组件，是关联的

![[Pasted image 20240307132424.png]]

具体绘制出来的效果：

![[Pasted image 20240307132738.png]]

绘制完成之后，还需要注册，不同的交互事件逻辑，分别是：
鼠标滚轮移动，鼠标点击、移动、抬起，移出

![[Pasted image 20240307132853.png]]

滚轮控制，放大和缩小

![[Pasted image 20240307132959.png]]

打脏标记，重绘

![[Pasted image 20240307133026.png]]

也会同步控制，列表的宽度

![[Pasted image 20240307133112.png]]

这个帧线的绘制

![[Pasted image 20240307133204.png]]

表现和逻辑：

![[Pasted image 20240307133250.png]]

![[Pasted image 20240307133227.png]]

![[Pasted image 20240307133221.png]]

选中线的pos坐标，是根据，当前选中的索引，运算得到

![[Pasted image 20240307133416.png]]

鼠标按下逻辑，也是修改这个，选中索引

![[Pasted image 20240307133502.png]]

鼠标点击，转换帧索引逻辑：

![[Pasted image 20240307133549.png]]

鼠标移动、抬起、移出时间轴相关逻辑；
也是修改帧索引，和布尔值

![[Pasted image 20240307133619.png]]

最终实现效果：

![[Pasted image 20240307133700.png]]