问题分类
loading 动画的可编辑
问题描述
电子课本之前的书本加载 loading 不满足章节之间的跳转 loading动画的要求，需要制作新的 loading 动画
原因分析
无
解决方案
制作一个 loading 动画并能编辑其最终效果：
下面是最终实现调用的代码：
const _obj = { interval: "0.15s", bgColor: "#1bf", size: "20px", shrink: 3.75, }; const config = mkResponsive(_obj); // 至此实现了数据到视图层的绑定 // setTimeout(() => { // config.bgColor = "#f00"; // config.size = "50px"; // config.shrink = 5; // config.interval = "0.2s"; // }, 2000); // 至此实现编辑器视图到数据的绑定 editor.append(config,"interval","","速度：","text"); editor.append(config,"shrink","","伸缩度：","range",1,10); editor.append(config,"size","px","点直径：","range",10,100); editor.append(config,"bgColor","","点颜色：","color");
大体分两步，第一步实现数据到动画的绑定，这里特意做了多个属性同步更改只实现一次重刷的效果，类似 React 使用 SetState 收集帧前状态，但是因为这里使用类似 Vue3 的 Proxy 对象，因此可以直接通过点操作符实现，当然具体实现要简单很多。
第二步是编辑器到数据的绑定，也就是 css3 自带 input 类元素的变动会反射到数据上。
这样，最终效果就是：编辑器 => 数据 => 动画。
首先实现 css 动画，一个 div 包含四个小球，此 div 旋转 45 度后得到另一个 div：
每个小圆给到一个不断循环 scale 的 animation 播放，8 个小球依次具备 interval 时长的播放时差，因为单个 html 文件，直接用 css 变量：
.dots2 > li:nth-child(1) { animation-delay: calc(var(--interval) * -7); } .dots1 > li:nth-child(2) { animation-delay: calc(var(--interval) * -6); } .dots2 > li:nth-child(2) { animation-delay: calc(var(--interval) * -5); } .dots1 > li:nth-child(3) { animation-delay: calc(var(--interval) * -4); } .dots2 > li:nth-child(3) { animation-delay: calc(var(--interval) * -3); } .dots1 > li:nth-child(4) { animation-delay: calc(var(--interval) * -2); } .dots2 > li:nth-child(4) { animation-delay: calc(var(--interval) * -1); }然后是 css 中定义的动画相关的变量，用来方便 js 统一修改：
:root { --interval: 0.2s; --shrink: 3.75; --bgColor: #1bf; --size: 20px; }
接下是数据响应式的实现：
// 响应式处理器生成工厂 const responsiveHandlerFactory = () => { const setPropHandlers = []; const setPropHandlerCtxMap = new Map(); const addSetPropHandler = (f) => { setPropHandlers.push(f); setPropHandlerCtxMap.set(f, Object.create(null)); }; const delSetPropHandler = (f) => { const index = setPropHandlers.indexOf(f); if (index !== -1) { setPropHandlers.splice(index, 1); setPropHandlerCtxMap.delete(f); } }; const responsiveHandler = { set(obj, prop, val) { for (let f of setPropHandlers) { f(setPropHandlerCtxMap.get(f), obj, prop, val); } obj[prop] = val; return true; }, }; return { responsiveHandler, addSetPropHandler, delSetPropHandler, }; };这里是一个极其简单粗糙的实现，给每个注册进来的 handler 创建一个独立的上下文，且使用 Map 记录。
这样做的原因是为了实现每个代理对象属性修改后的延迟响应。
这样使用 addSetPropHandler 就可以注册对象属性变更后的 UI 渲染逻辑了。
最后再实现一个极简编辑器：
// 编辑器 const editor = { edbox: null, init() { this.edbox = document.createElement("div"); const style = { position: "fixed", left: "20px", top: "20px", width: "300px", height: "200px", border: "1px solid #ccc", borderRadius: "5px", padding: "10px" }; ((obj) => { for (let key in obj) { this.edbox.style[key] = obj[key]; } })(style); document.body.appendChild(this.edbox); }, handlers: {}, append(obj, prop, unit, showText, type, min, max) { let str = ""; // 生成随机函数名 const fname = "f" + Math.random().toString().slice(-5); this.handlers[fname] = (val) => { obj[prop] = val + unit; }; str = `<div><span>${showText}</span><input type="${type}" ${ type === "range" && ` min=${min || 0} max=${max || 1}` } value="${obj[prop]}" on${type === "range" ? "change" : "blur"}="editor.handlers.${fname}(event.target.value)" /></div>`; this.edbox.innerHTML += str; }, };
纠正措施
案例推广
本案例可推广到XXX项目（XXX项目也存在本案例的问题）