jQuery源码阅读笔记-动画（1）

Animation对象

作为一个对象，可以通过new Animation()来获取

而实例化时，可以接收一个KeyFrameEffect对象

//实例化Animation对象
const animation = new Animation(new KeyframeEffect(
  document.querySelector("div"),
  {
    background: 'red',
  },
  5000,
));

对于KeyFrameEffect对象，接受三个参数

1. 目标 – 唯一，执行动画的元素
2. CSS属性 – 以键值对形式加入
3. 时间 | 配置 – 可以传入一个对象定制更多属性

在创建完成之后并不会立刻执行，而是通过对象使用play()来启动，最主要是解决几个问题

• 动画完成之后的回调函数‘
• 动画可以刹车

这些，都有对象对应的方法来完成

基础动画

在jQuery动画函数系统中，只要实现了animate()这一个，其他只是外层套壳的简写形式

参数解析

参数	说明
prop	一个对象，以键值对展示的CSS属性，表示动画结束时的样式
speed	速度，关键词或者以毫秒为单位的纯数字，并不接受1s这一类带单位的时间，当未填写时默认为400
easing	速度曲线
callback	结束时的回调函数

先完成一个骨架

const animate = function(prop, speed, easing, callback) {
  //循环法，给匹配元素都加上
  this.each(function() {
    //创建动画对象，初始化相应属性
    const animation = new Animation(new KeyframeEffect(
      this,
      prop,
      {
        //速度曲线
        easing,
        //执行时间
        duration: speed ? speed : 400,
      }
    ));
    //设置动画结束时的回调函数
    animation.onfinish = () => {
      //修改回调函数this
      callback.bind(this)();
    };
    //启动动画
    animation.play();
  });
  //返回对象，继续链式
  return this;
};

可以尝试其他几个现成动画是否可以达到效果，如hide()与show()

注意，方法要添加至原型上

//单位暂时不能省略
$("div").animate({
  height: 0,
  width: 0,
  opacity: 0,
}, 5000, "ease", function() {
  $(this).animate({
    height: "100px",
    width: "100px",
    opacity: 1,
  }, 1000, "linear", () => {
    console.log("动画完成");
  });
});

回调稳定没有问题，但是并没有将最后动画完成的状态给保留下来，与CSS中的动画表现一致，需要设置配置Animation对象属性

const animation = new Animation(new KeyframeEffect(
  this,
  prop,
  {
    //速度曲线
    easing,
    //执行时间
    duration: speed ? speed : 400,
    //动画结束时保持最后一帧状态
    fill: 'forwards',
  }
));

至此，基础的使用便能畅通，再对参数做好相应的处理做好判断

//优化
const animate = function(prop, speed, easing, callback) {
  //关键参数需要有保证
  if ($.type(prop) === "object") {
    //如果第二参数就是函数，那么时间参数调整为默认值
    if (typeof speed === "function") {
      callback = speed;
      speed = 400;
      easing = "ease";
    } 
    //或者说曲线参数省略
    else if (typeof easing === "function") {
      callback = easing;
      easing = "ease";
    }
    //对于漏缺的单位进行检查补充，使用之前包装的函数unit
    $.each(prop, (key, value) => {
      prop[key] = unit(value, key);
    });
    $("div").each(function() {
      const animation = new Animation(
        new KeyframeEffect(
          this,
          prop,
          {
            //速度曲线
            easing,
            //防止只有一个参数时，时间默认为空
            duration: speed ? speed : 400,
            //动画结束时保持最后一帧状态
            fill: "forwards",
          },
        ),
      );
      //结束回调
      animation.onfinish = () => {
        //防止并没有传递函数参数
        if (typeof callback === "function") {
          callback.bind(this)();
        }
      };
      animation.play();
    });
  }
  //返回对象，继续链式
  return this;
};

因为多个参数都可以省略不写，使用默认参数并不能解决问题