jQuery源码阅读笔记动画（4）

前言

在此先对前几篇所写的代码做一下整理&＃xff0c;回头看还是挺糟糕的&＃xff0c;此篇做一个梳理&＃xff0c;也可以说是重写

filterAnimateArgs&＃xff08;&＃xff09;

内部自用&＃xff0c;处理动画函数的参数&＃xff0c;一个抽离的函数

/** * 处理参数 * &＃64;param prop 动画目标值 * &＃64;param speed 动画时间 * &＃64;param easing 动画运动曲线 * &＃64;param callback 回调函数 * &＃64;returns {{prop, callback, easing: string, speed: number}} */
const filterAnimateArgs &＃61; (prop, speed, easing, callback) &＃61;> { $.each(prop, (key, value) &＃61;> { //检查当前值是否为纯数字&＃xff0c;且可以增补CSS单位 if ( (typeof value &＃61;&＃61;&＃61; "number" || typeof value &＃61;&＃61;&＃61; "string") && !isNaN(value - parseFloat(value)) && /px$/.test(getComputedStyle(document.body)[key]) ) { value &＃43;&＃61; "px"; } prop[key] &＃61; value; }); //对可能的参数缺失做好替换与增补if (typeof speed &＃61;&＃61;&＃61; "function") { [speed, easing, callback] &＃61; [400, "ease", speed]; } else if (typeof easing &＃61;&＃61;&＃61; "function") { [easing, callback] &＃61; ["ease", easing]; } return { prop, speed, easing, callback, };
};


play()

内部函数&＃xff0c;核心

• 需要一个函数用于递归&＃xff0c;但又不想放外面&＃xff0c;因此将其设计成了闭包
• 过滤函数迁移到了动画入口&＃xff0c;让这边精简些
• 新加入一个生命周期钩子mounted&＃xff0c;在动画结束时执行&＃xff0c;样式定格的事交给了这个函数
• 新属性&＃xff0c;用于区分当前动画是属于隐藏还是显示形动画&＃xff0c;拦截一部分没必要执行的动画
• 将target从配置当中抽离&＃xff0c;对象很忙

//启动函数
const play &＃61; (() &＃61;> { const run &＃61; (target, { isHide &＃61; false, prop, speed &＃61; 400, easing, callback, mounted, beforePlay &＃61; () &＃61;> {} }) &＃61;> { const state &＃61; $(target).css("display"); //当元素符合了隐藏或者显示状态&＃xff0c;那么动画也无需启动了 if ((isHide &＃61;&＃61;&＃61; true && state &＃61;&＃61;&＃61; "none") || (isHide &＃61;&＃61;&＃61; false && state !&＃61;&＃61; "none")) { //出队 target._animateQueue.shift(); //此时判断&＃xff0c;如果队列不为空&＃xff0c;则开始下一轮执行 if (target._animateQueue.length !&＃61;&＃61; 0) { run(target, target._animateQueue[0]); } return; } //通用格式 const animation &＃61; new Animation(new KeyframeEffect(target, prop, { //速度曲线 easing, //动画时间 duration: speed, })); //结束时的回调&＃xff0c;只有在消失前往显示时不一样&＃xff0c; animation.onfinish &＃61; () &＃61;> { //完成之后执行的回调 mounted(); // $(target).css(mountedProp); //固定样式的同时&＃xff0c;提取当前盒子状态 //防止并没有传递函数参数 if (typeof callback &＃61;&＃61;&＃61; "function") { callback.bind(target)(); } //如果当前非消失结束&＃xff0c;那么清空记录 if ($(target).css("display") !&＃61;&＃61; "none") { target._styleState &＃61; null; } //出队 target._animateQueue.shift(); //此时判断&＃xff0c;如果队列不为空&＃xff0c;则开始下一轮执行 if (target._animateQueue.length !&＃61;&＃61; 0) { run(target, target._animateQueue[0]); } }; //动画开启前执行前&＃xff0c;执行函数 beforePlay(); //正式开始 animation.play(); }; return (target, config) &＃61;> { //当前对象没有此属性的情况下&＃xff0c;为其初始化 if (target._animateQueue &＃61;&＃61; null) { target._animateQueue &＃61; []; } //将参数存入队列当中 target._animateQueue.push(config); //如果是当前队列当中的唯一存在&＃xff0c;则启动 if (target._animateQueue.length &＃61;&＃61;&＃61; 1) { run(target, target._animateQueue[0]); } };
})();


因为参数在入口函数这边已经不重要了&＃xff0c;对此直接改为收集形式&＃xff0c;直接塞给filterAnimateArgs()处理

animate()

//自定义动画
const animate &＃61; function(prop, ...rest) { //参数不对头那就不必启动了 if ($.type(prop) !&＃61;&＃61; "object") return this; return this.each(function() { play(this, {//显示传入null是为了避免误判给拦截下来isHide: null,mounted: () &＃61;> { $(this).css(prop); }, ...filterAnimateArgs(prop, ...rest), }); });
};


hide()

const hide &＃61; function(...rest) { return this.each(function() { play(this, { isHide: true, //结束时的样式调整 mounted: () &＃61;> { this.style.display &＃61; "none"; }, //在开始执行前记录部分样式 beforePlay: () &＃61;> { if (this._styleState &＃61;&＃61; null) { this._styleState &＃61; $(this).css([ "height", "width", "margin", "padding", "overflow", "opacity", ]); } }, //记录开始执行前的样式 ...filterAnimateArgs({ overflow: "hidden", opacity: 0, height: 0, width: 0, margin: 0, padding: 0, }, ...rest), }); });
};


show()

显示动画做的事要更多

const show &＃61; function(...rest) { //有状态&＃xff0c;则表示是消失动画导致&＃xff0c;那么走它的路子 return this.each(function() { play(this, { //当显示完成之后&＃xff0c;还想做什么 mounted: () &＃61;> { //样式归位 this.style &＃61; this._initialStyle; }, //在开始前记录部分属性 //动画执行前&＃xff0c;将相关属性进入初始化 beforePlay: () &＃61;> { if (this._styleState &＃61;&＃61; null) { this._styleState &＃61; $(this).css([ "overflow", "opacity", "height", "width", "margin", "padding", ]); } //新加入属性&＃xff0c;记录最初始的style属性 //此处记录的是属性节点而非对象 this._initialStyle &＃61; this.getAttribute("style"); //如果是因为style属性而消失的,则将设定去掉&＃xff0c;不是的情况塞入属性 if (this.style.display &＃61;&＃61;&＃61; "none") { this._initialStyle &＃61; this._initialStyle.replace(/\s*display: none;\s*/, ""); } else { this._initialStyle &＃43;&＃61; "display:block"; }//样式初始化&＃xff0c;从消失至显示$(this).css({ overflow: "hidden", opacity: 0, height: 0, width: 0, margin: 0, padding: 0, display: "block", }); }, ...filterAnimateArgs(this._styleState, ...rest), }); });
};


在此基础之上&＃xff0c;一个简单的toggle()也可以完成了

toggle()

• 切换&＃xff0c;不能直接看当前对象的显示状态&＃xff0c;动画是异步的
• 当有动画队列存在的时候&＃xff0c;查看队尾动画表现即可&＃xff0c;也是isHead属性的一个效果

const toggle &＃61; function(...rest) { return this.each(function() { const $this &＃61; $(this); let isHide &＃61; $this.css("display") &＃61;&＃61;&＃61; "none"; //如果处于隐藏状态 //根据状态判断 //检查是否为老司机 if (this._animateQueue && this._animateQueue.length !&＃61;&＃61; 0) { //根据队尾动画的表现执行 if (this._animateQueue[this._animateQueue.length - 1].isHide &＃61;&＃61;&＃61; true) { isHide &＃61; true; } }//根据状态判断 if (isHide) { $this.show(...rest); } else { $this.hide(...rest); }});
};


对于当前效果来说&＃xff0c;还未完成&＃xff0c;就已经感受到深深的恶意了
当加入stop()这样的存在时&＃xff0c;会更麻烦