模拟钉钉官网动画

成序猿@2024-02-02 8:05

实现思路：利用粘性定位sticky，以及滚动事件实现。首先我们应该设置滚动动画开始位置和结束位置，然后根据位置计算透明度或者transform，scale的值。

首先根据上述图线计算属性值，代码如下：

javascript 复制代码

function createAnimate(scrollStart, scrollEnd, valueStart, valueEnd) {
      return function (x) {
        if (x < scrollStart) {
          return valueStart;
        }
        if (x > scrollEnd) {
          return valueEnd;
        }
        const bili = (valueEnd - valueStart) / (scrollEnd - scrollStart);
        return bili * (x - scrollStart) + valueStart;
      };
    }

然后考虑到每个dom它的动画不是只有一个属性可能有多个，例如scale,opacity,transform等。然后应该将dom和属性存储到map集合中，key为dom,属性为value。

javascript 复制代码

const items = document.querySelectorAll('.list-item');
const animationMap = new Map();


const getTitleAnimation = (scrollStart, scrollEnd, dom) => {
      const opacityAnimation = createAnimate(scrollStart, scrollEnd, 1, 0);
      const yAnimation = createAnimate(scrollStart, scrollEnd, 0, -200);
      const transform = function (x) {
        return `translate(0,${yAnimation(x)}px)`;
      };
      const opacity = function (x) {
        return opacityAnimation(x);
      };
      return {
        transform,
        opacity,
      };
    };


const updateMap=()=>{
    for (const item of items) {
        animationMap.set(
          item,
          getTitleAnimation(scrollStart + 50, scrollEnd, item)
        );
      }
}

然后就是属性赋值：

javascript 复制代码

const updateStyles = () => {
      const scrollY = window.scrollY;
      for (const [dom, animations] of animationMap) {
        for (const prop in animations) {
          const value = animations[prop](scrollY);
          dom.style[prop] = value;
        }
      }
    };
updateStyles();
window.addEventListener('scroll', updateStyles);

全部代码访问： liuzicheng/web - Gitee.com