功能

1. 添加进入视域和离开视域的回调
2. BlockManager添加threshold参数，每个根节点也添加这个属性，用来提前通知块要进入视域
3. 抽取callback类，并添加sleep属性，表示当前动画处于休眠中
4. variable初始化时，只传递一个context上下文对象作为参数，Context上下文实体类包含data属性，和父节点的所有变量，当b变量引用了a变量时，如果a未初始化，则将b压栈，并订阅a变量，当a初始化后，广播给所有订阅者；另一种思路就是将variable以数组形式初始化，这样按顺序声明的变量就可以引用之前的值了
5. 添加一个动画锁，避免点动画和线动画覆盖彼此效果，应该添加在编译阶段，在动画的transform没完成前不执行线动画，或把线动画参数压栈，等transitionend事件后一起执行；或者TransformDom类的set方法中可以设置transtion，然后监听transtionend事件后移除该transtion
6. 添加多选模式，一个选择器可以选中并绑定多个元素，通过父元素的variable也能达成效果
7. 直飞模式，或点击直达模式，需要判断飞行的方向，根据飞行的方向，对路径上经过的块作重置或置尾处理；或者采用ease-scroll方式，依次触发路径上的动画
8. resizeHandler，需要先深拷贝data

bug

1. 出现bug，直连5G页面的点触发动画都不动了，但是其他块的点触发动画都没问题 原因: 新修改的线动画的start和end中的redo方法，会修改共享的payload，导致distance混乱，redo方法应该改写，因为redo方法会让父元素从走_recursion 方法，范围太大，应该让redo只执行申请redo的方法
2. 点动画如果起始点是负数（渐进式启动），首次加载时，点动画不启动，原因在于，lazyload的watch是由scroll等事件触发的， init中直接执行的那次scrollListener不会触发callback_enter，所有首次加载时需要执行动画的块都要在 _fillAllList方法中手动放入activeList, 而这里的放入条件是yOffset>= root.top && yOffset<= root.bottom 没有考虑lazyload里的预加载距离，也没有考虑动画块中出现负数的情况
3. 手动滑完真8k模块，然后通过window.scrollTo(0, 6200)，发现真8k模块样式不重置

地址

苹果官网示例
大疆官网
苹果air

知识

1. mask-image 图片叠加

segmentfault.com/q/101000002…

2. 天高海阔，一镜通透canvas
3. css定义变量

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

4. 可替换元素样式控制object-fit object-position
5. css 计算属性 calc max等
6. div渐变阴影层 hero-shadow
7. 如何在懒加载中防止重绘
8. verlok/lazyload通过懒加载插件来判断动画分区是否进入了视域，但是需要hack一下，因为elements_selector上没有任何属性，不会触发exit钩子，lazyload本质上还是懒加载图片的插件，因为我们向lazyload注册的元素没有任何
9. Element和Node的区别

设计

数据原型

树状结构

{
    type: 'liner'
    start: 起始位置，// 相对于parent计算，为空时则是以parent的起始点为起始点
    end: 结束位置,  // 相对于parent计算，为空时则是以root的结束点为结束点
    parent: 父节点, // 可以为空
    children: 子节点数组,
    callbacks: 回调方法数组
}
{
    // point类型，会将points组装成callbacks，
    type: 'point'
    start: 起始位置，
    end: 结束位置,  
    parent: 父节点,
    children: 子节点数组,
    points: [
        {
            threshold: 阈值,
            startup: 装载函数,
            reset: 重置函数，
            _startuped: 已经完成的动画  
        }
    ]
}