行动画算法

行动画算法简述

1. 首先计算，修改前界面上的行 （oldRows）和修改后的行是哪些（newRows）

2. 然后对这部分行数组集合运算：

A：交集：修改前后都在界面上的行

B：oldRows 有，newRows 没有：修改前存在，修改后不存在

C：oldRows 没有，newRows 有：修改前不存在，修改后存在

​ 这样可以获得三个数组（集合）

1. 先把 C 部分的行渲染到界面上，位置是不可见区域（例如屏幕下方 top: 1000）

2. 执行动画

A: 始终在界面内部，计算前后的 top 差值，top1 - top 2。计算 top：假设某行的索引是 i，当前行高是 indent，不考虑分组，top = i * indent

B :直接移动到界面外，top2: 1000

C: 从界面外移动到界面内，top1: 1000

​ 具体可以通过css或者JS实现动画效果

1. 将 B 集合从数据层删除。数据层重新渲染，因为 top 不变，所以界面看起来没有变化，执行完成

---

Last update: November 5, 2023