今天不写技术文了，写点轻松的。

我自己都没讨好自己，何苦要来讨好你呢？

开篇

本人最近的情况已经在题目中交待完了。为啥离职呢？职场上就那些事，离职和入职时一样安静，跟几个聊得来的人互道祝福就可以了。其实在此之前，也了解到今年行情不是很好。裁员的、降薪的、跑路的，这些消息可以说不绝于耳。但本人最终还是选择离职休整下。

得益于父辈们的努力，在房价还不到当前房价一半的时候出手了，让弱小的我在这座城市有瓦遮头，不必为三餐奔波。既没有房贷，也没有车贷，一人吃饱，全家不饿的我没有了这方面的顾虑，也有了底气做出这个选择。

希望明天还能看到那朵软萌萌的云，因为它好像你

说下离职后我都干了些什么吧，给各位列一下，说不定能找到知音。

• 刷力扣


• 整理下之前的东西


• 健身


• 写作


• 品鉴周董的新歌


• 看综艺


• ...

上面的这些东西不分先后，一直都在做。

刷力扣

刷力扣其实很早就开始了，每天登录力扣有一个积分，完成每日一题有 10 积分，到现在坚持了有差不多两年了，战绩如下：

大部分是中等

光看题目量不算少，但其实大部分困难和部分中等都是 cv 之后通过的，不装了，摊牌了。刷题过程也不艰难，就一句话，简单题重拳出击，困难题唯唯诺诺。有些人会觉得算法没有必要，因为平时的工作就用不到。但我觉得算法最重要的是锻炼人的思维，思维很重要，它能够指导一个人思考问题的轨迹和方向。虽然有时刷题时会感觉自己活着就是凑数的，没必要灰心，真的，因为你的判断是对的。

整理下之前的东西

之前在工作时也积累一些东西，但没有做整理，所以趁着这段时间整理下，看下能不能发现一些新东西。个人觉得一直处于一种忙碌的状态并不一定是好事，这有点像吃东西时狼吞虎咽，容易噎着。

健身

这件事是坚持的最久的一件事，从高一一直到现在。高一时上映的速 7，被强森和郭达在办公室的那段打戏吸引，当时觉得男人就应该这样。于是从最简单的俯卧撑、引体开始，一点点的朝自己的目标努力。但这过程走了很多弯路，比如训练的方式不对，太急于求成、吃的没跟上、休息没跟上，导致很长一段时间都处于瓶颈期，一直在原地踏步。这种不上不下的感觉真的不好受，也想过放弃，但已经戒不掉了。图就不发了，担心被喷。胸、背、腿、腰、手、腹肌都有练，腹肌不多不少，正好 6 块。至于身材，我个人觉得还行，至少不差，也被人说过身材好，同性异性都有。

被同性说

写作

这个貌似是在去年开始的，但中断了挺长一段时间，就想着在空窗期重新捡起来。至于最终能开出什么样的花，也没想过，就觉得写比不写强。读者感兴趣的可以看我之前写过的文章，主页：
鄙人的主页

对待生活，不必说的太多，你同样可以给它一个惊喜

品鉴周董的新歌

本人虽说不是周董的粉丝，但以前总想着能在晴天里给千里之外的她带一壶爷爷泡的茶，面对面安静的坐着，她的笑容甜甜的，我也对着她傻笑。院子里是一片花海，散发着迷迭香。

她送我来到渡口，她的倒影在满是桃花的粉色海洋里若隐若现。船夫摇着桨，背对着我，哼着她唱过的红颜如霜突然来了句：这是最伟大的作品。可谁让夜晚留不住错过的烟火，活该我到现在还在流浪。

看综艺

综艺平时也是我解压的一种方式，最近把跑男第十季追完了，几位 mc 都是各有特点。不过最喜欢的还是新加入的白鹿，人美，很搞笑，魔性的笑声让人很容易记住她。

你问我：我对你有多重要，我回答：太阳你知道吧

总结

可能有人看了之后会觉得有点躺平的趋势，但其实并没有。本人还是很爱折腾的，也希望能多认识点圈子以外的人，多认识点有趣的人，多认识点志同道合的人。有些人会觉得程序员很闷，不爱说话，天天就对着电脑。可能有部分人是这样的，但我不是，因为我是一个不走寻常路的程序员，而且我深知只有跳出圈子，才能打破认知。by the way，本人对数字化转型行业挺感兴趣的，有读者从事或者了解的话，可以大胆私信我啊。

前言

平时在使用v-for的时候，一般会要求传入key，有没有像我一样的小伙伴，为了省心，直接传索引index，貌似也没有遇到过什么问题，直到有一天，我遇到一个这样的需求

场景

在一个下单界面，我需要去商品列表选商品，然后在下单界面遍历显示所选商品，要求后选的排在前面，而且选好商品之后，需要在下单界面给每个商品选择发货地，发货地列表是通过商品id去接口取的，我的代码长这样：

• 下单界面调用商品组件

// 这里每次选了商品都是从前插入：list.value = [...newList, ...list.value]

<Goods

  v-for="(item, index) in list"

  :key="index"

  :goods="item">

</Goods>

• 商品组件内部调用发货地组件

<SendAddress

    v-model="address"

    :product-no="goods.productNo"

    placeholder="请选择发货地"

    @update:model-value="updateValue"></SendAddress>

• 发货地组件内部获取发货地址列表

onMounted(async () => {

  getList()

})

const getList = async () => {

  const postData = {

    productInfo: props.productNo,

  }

}

上述代码运行结果是，每次获取地址用的都是最开始选的那个商品的信息，百思不得其解啊，最后说服产品，不要倒序了，问题解决

解决过程

后来在研究前进刷新后退缓存时，关注到了组件的key,详细了解后才知其中来头

重点：根据key复用或者更新，也就是key没有变化，就是复用，变化了在更新挂载，而onMounted是在挂载完成后执行，没有挂载的元素，就不会走onMounted

回到上述问题，当我们每次从前面插入数据，key的变化逻辑是这样的

结论

最开始选中的商品key从1变成了2，最近选的是0。

而0和1是本来就存在的，只会更新数据，不会重新挂载，只有最开始选的那个商品key是全新的，会重新挂载，重新走onMounted。

所以每次选择数据后，拿去获取地址列表的商品信息都是第一个的

解决以上问题，把key改成item.productNo就解决了

上文提到有很多类库在用 IntersectionObserver 实现懒加载，但更精准的描述是，IntersectionObserver 提供了一种异步观察目标元素与根元素（窗口或指定父元素）的交叉状态的能力，这项能力不仅能用来做懒加载，还可以提供无限滚动，精准曝光的功能。

1. IntersectionObserver 基础介绍

不管我们使用哪个类库，都需要了解 IntersectionObserver 的基本原理，下面是一个简单的例子

import React, { useEffect } from "react";

import "./page.css";



const Page1 = (props: { handleShowTypeChange: (type: number) => void }) => {

  const { handleShowTypeChange } = props;



  useEffect(() => {

    const io = new IntersectionObserver((entries) => {

      console.log(entries[0].intersectionRatio);

    });



    const footer = document.querySelector(".footer");



    if (footer) {

      io.observe(footer);

    }



    return () => {

      io.disconnect();

    };

  }, []);



  return (

    <div className="scroll-container">

      <button className="btn" onClick={() => handleShowTypeChange(0)}>

        返回

      </button>

      <div className="placeholder">其他元素</div>

      <div className="placeholder">其他元素</div>

      <div className="placeholder">其他元素</div>

      <div className="footer">被观察的元素</div>

    </div>

  );

};



export default Page1;

如上例，可以了解到以下几点知识

1. 
   

   new 一个 IntersectionObserver 对象，下称 io，需传入一个函数，下称 callback，callback 的入参 entries 代表了正在被观察的元素数组，数组的每一项都拥有属性 intersectionRatio ，代表了被观察的元素与根元素可视区域的交叉比例，。

   
   


2. 
   

   使用 io 的 observe 方法来添加你想观察的元素，可以多次调用添加多个，

   
   


3. 
   

   使用 io 的 disconnect 方法来销毁观测

   
   

使用上方的代码，可以完成对元素最基本的观察。如上方 gif 操作，在控制台可得到以下结果 ，

• 进入页面时，callback 被调用了一次：intersectionRatio 为 0


• 滚动到可视区，再次调用：intersectionRatio > 0


• 滚动出可视区，再次调用：intersectionRatio 为 0


• 滚动到可视区，再次调用：intersectionRatio > 0

而懒加载，无限滚动，精准曝光是如何基于这个 api 去实现的呢，如果直接去写，当然也能实现，但是会有些繁琐，下面引入本篇文章的主角：react-intersection-observer 类库，先看看这个类库的基本介绍吧。

2. react-intersection-observer 基础介绍

这个类库在全局维护了一个 IntersectionObserver 实例（如果只有一个根元素，那全局仅有一个实例，实际上代码中维护了一个实例的 Map，此处简单表述），并提供了一个名为 useInView 的 hooks 方便我们了解到被观测的元素的观测状态。与上面相同的例子，他的写法如下：

import React, { useEffect } from "react";

import { useInView } from 'react-intersection-observer';

import "./page.css";



const Page2 = (props: { handleShowTypeChange: (type: number) => void }) => {

  const { handleShowTypeChange } = props;

  const { ref } = useInView({

    onChange: (inView, entry) => {

        console.log(entry.intersectionRatio);

    }

  });



  return (

    <div className="scroll-container">

      <button className="btn" onClick={() => handleShowTypeChange(0)}>

        返回

      </button>

      <div className="placeholder">其他元素</div>

      <div className="placeholder">其他元素</div>

      <div className="placeholder">其他元素</div>

      <div className="footer" ref={ref}>被观察的元素</div>

    </div>

  );

};



export default Page2;

如上例，使用更少的代码，就实现了相同的功能，而且带来了一些好处

• 不用自己维护 IntersectionObserver 实例，既不用关心创建，也不用关心销毁


• 不用控制被观察的元素到底是 entries 内的第几个，观察事件都会在相应绑定的 onChange 中进行回调

以上仅为基本使用，实战中需求是更为复杂的，所以这个类库也提供了一系列属性，方便大家的使用：

利用上面这些配置项，我们可以实现以下功能

3. 实战用例

3.1. 懒加载

import React from "react";

import { useInView } from "react-intersection-observer";

import "./page.css";



interface Props {

  width: number;

  height: number;

  src: string;

}



const LazyImage = ({ width, height, src, ...rest }: Props) => {

  const { ref, inView } = useInView({

    triggerOnce: true,

    root: document.querySelector('.scroll-container'),

    rootMargin: `0px 0px ${window.innerHeight}px 0px`,

    onChange: (inView, entry) => {

        console.log('info', inView, entry.intersectionRatio);

    }

  });



  return (

    <div

      ref={ref}

      style={{

        position: "relative",

        paddingBottom: `${(height / width) * 100}%`,

        background: "#2a4b7a",

      }}

    >

      {inView ? (

        <img

          {...rest}

          src={src}

          width={width}

          height={height}

          style={{ position: "absolute", width: "100%", height: "100%", left: 0, top: 0 }}

        />

      ) : null}

    </div>

  );

};



const Page3 = (props: { handleShowTypeChange: (type: number) => void }) => {

  const { handleShowTypeChange } = props;



  return (

    <div className="scroll-container">

      <button className="btn" onClick={() => handleShowTypeChange(0)}>

        返回

      </button>

      <div className="placeholder">其他元素</div>

      <div className="placeholder">其他元素</div>

      <div className="placeholder">其他元素</div>

      <LazyImage width={750} height={200} src={"https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4acf97e7dc944bf8ad5719b2b42f026~tplv-k3u1fbpfcp-watermark.image?"} />

    </div>

  );

};



export default Page3;

懒加载中我们需要用到几个额外的属性：

• 
  

  triggerOnce ：只触发一次

  
  


• 
  

  root：默认为文档视口（如果被观察的元素，父/祖元素中有 overflow: scroll，需要指定为该元素）

  
  


• 
  

  rootMargin：root 的 margin

  
  
  
  
  • 
    

    同 css 上右下左写法，需要带单位，可简写（'200px 0px'）

    
    
  
  
  • 
    

    正值代表观察区域增大，负值代表观察区域缩小

    
    
  
  
  
  

在图片懒加载中，因为通常不可能等到元素被滚动到了可视区域，才开始加载图片，所以需要调整 rootMargin ，可以写为，rootMargin: `0px 0px ${window.innerHeight}px 0px ，这样图片可以提前一屏进行加载。

同样懒加载不需要不可见的时候回收掉相应的 dom ，所以只需要触发一次，设置 triggerOnce 为 true 即可。

3.2. 无限滚动

import React, { useState } from "react";

import { useInView } from "react-intersection-observer";

import "./page.css";



const Page4 = (props: { handleShowTypeChange: (type: number) => void }) => {

  const { handleShowTypeChange } = props;

  const [datas, setDatas] = useState([1, 1, 1]);

  const { ref } = useInView({

    onChange: (inView, entry) => {

      console.log("inView", inView);

      if (inView) {

        setDatas((prevDatas) => [...prevDatas, ...new Array(3).fill(1)]);

      }

    },

  });



  return (

    <div className="scroll-container">

      <button className="btn" onClick={() => handleShowTypeChange(0)}>

        返回

      </button>

      {datas.map((item, index) => {

        return (

          <div key={index + 1} className="placeholder">

            第{index + 1}个元素

          </div>

        );

      })}

      <div className="load-more" ref={ref}></div>

    </div>

  );

};



export default Page4;

无限滚动主要依赖在 onChange 中对 inView 进行判断，我们可以添加一个高度为0的元素，名为 load-more ，当页面滚动到最下方时，该元素的 onChange 会被触发，通过对 inView 为 true 的判断后，加载后续的数据。同理，真正的无限滚动也需要提前加载（在观察内写异步请求等），也可以设置相应的 rootMargin ，让无限滚动更丝滑。

3.3. 精准曝光

import React from "react";

import { useInView } from "react-intersection-observer";

import "./page.css";



const Page5 = (props: { handleShowTypeChange: (type: number) => void }) => {

  const { handleShowTypeChange } = props;

  const { ref } = useInView({

    threshold: 0.5,

    delay: 500,

    onChange: (inView, entry) => {

      if (inView) {

        console.log("元素需要上报曝光事件", entry.intersectionRatio);

      }

    },

  });



  return (

    <div className="scroll-container">

      <button className="btn" onClick={() => handleShowTypeChange(0)}>

        返回

      </button>

      <div className="placeholder">其他元素</div>

      <div className="placeholder">其他元素</div>

      <div className="placeholder">其他元素</div>

      <div className="footer" ref={ref}>

        需要精准曝光的元素

      </div>

    </div>

  );

};



export default Page5;

精准曝光也是很常见的业务需求，通常此类需求会要求元素的露出比例和最小停留时长。

• 对露出比例要求的原因：因为有可能元素的有效信息并未展示，只是露出了一点点头，一般业务上会要求露出比例大于一半。


• 对停留时长要求的原因：有可能用户快速划过，比如小说看到了很啰嗦的章节快速滑动，直接看后面结果，如果不加停留时长，中间快速滑动的区域也会曝光，与实际想要的不符。

类库恰好提供了下面两个属性方便大家的使用

• threshold: 观察元素露出比例，取值范围 0～1，默认值 0


• delay: 延迟通知元素露出（如果延迟后元素未达标，则不会触发onChange），取值单位毫秒，非必填。

使用上面两个属性，就可以轻松实现业务需求。

3.4. 官方示例

示例，官方示例中还有很多对属性的应用，比如 threshold 传入数组，skip，track-visibility ，大家可自行体验。

总结

以上就是对 IntersectionObserver 以及 react-intersection-observer 的介绍了，希望能对大家有所帮助，文中录制的示例完整项目可以从此处获取。

背景

如果有一份接口定义，前端和后端都能基于此生成相应端的代码，不仅能降低前后端沟通成本，而且还能提升研发效率。

字节内部的 RPC 定义主要基于 thrift 实现，thrift 定义了数据结构和函数，那么是否可以用来作为接口定义提供给前端使用呢？如果可以作为接口定义，是不是也可以通过接口定义自动生成请求接口的代码呢？答案是肯定的，字节内部已经衍生出了多个基于 thrift 的代码生成工具，本篇文章主要介绍如何通过 thrift 生成前端接口调用的代码。

接口定义

接口定义，顾名思义就是用来定义接口的语言，由于字节内部广泛使用的 thrift 基本上满足接口定义的要求，所以我们不妨直接把 thrift 当成接口定义。

thrift 是一种跨语言的远程过程调用 (RPC) 框架，如果你对 Typescript 比较熟悉的话，那它的结构看起来应该很简单，看个例子：

namespace go namesapce



// 请求的结构体

struct GetRandomRequest {

    1: optional i32 min,

    2: optional i32 max,

    3: optional string extra

}



// 响应的结构体

struct GetRandomResponse {

    1: optional i64 random_num

}



// 定义服务

service RandomService {

   GetRandomResponse GetRandom (1: GetRandomRequest req)

}

示例中的 service 可以看成是一组函数，每个函数可以看成是一个接口。我们都知道，对于 restful 接口，还需要定义接口路径（比如 /getUserInfo）和参数（query 参数、body 参数等），我们可以通过 thrift 注解来表示这些附加信息。

namespace go namesapce



struct GetRandomRequest {

    1: optional i32 min (api.source = "query"),

    2: optional i32 max (api.source = "query"),

    3: optional string extra (api.source = "body"),

}



struct GetRandomResponse {

    1: optional i64 random_num,

}



// Service

service RandomService {

   GetRandomResponse GetRandom (1: GetRandomRequest req) (api.get = "/api/get-random"),

}

api.source 用来指定参数的位置，query 表示是 query 参数，body 表示 body 参数；api.get="/api/get-random" 表示接口路径是 /api/get-random，请求方法是 GET；

生成 Typescript

上面我们已经有了接口定义，那么对应的 Typescript 应该就呼之欲出了，一起来看代码：

interface GetRandomRequest {

    min: number;

    max: number;

    extra: string;

}



interface GetRandomResponse {

    random_num: number;

}



async function GetRandom(req: GetRandomRequest): Promise<GetRandomResponse> {

    return request<GetRandomResponse>({

        url: '/api/get-random',

        method: 'GET',

        query: {

            min: req.min,

            max: req.max,

        },

        body: {

            extra: req.extra,

        }

    });

}

生成 Typescript 后，我们无需关心生成的代码长什么样，直接调用 GetRandom 即可。

架构设计

要实现基于 thrift 生成代码，最核心的架构如下：

因为 thrift 的内容我们不能直接拿来用，需要转化成中间代码（IR），这里的中间代码通常是 json、AST 或者自定义的 DSL。如果中间代码是 json，可能的结构如下：

{

    name: 'GetRandom',

    method: 'get',

    path: '/api/get-random',

    req_schema: {

        query_params: [

            {

                name: 'min',

                type: 'int',

                optional: true,

            },

            {

                name: 'max',

                type: 'int',

                optional: true,

            }

        ],

        body_params: [

            {

                name: 'extra',

                type: 'string',

                optional: true,

            }

        ],

        header_params: [],

    },

    resp_schema: {

        header_params: [],

        body_params: [],

    } 

}

为了保持架构的开放性，我们在核心链路上插入了 PrePlugin 和 PostPlugin，其中 PrePlugin 决定了 thrift 如何转化成 IR，PostPlugin 决定 IR 如何生成目标代码。

这里之所以是「目标代码」而不是「Typescript 代码」，是因为我希望不同的 PostPlugin 可以产生不同的目标代码，比如可以通过 TSPostPlugin 生成 Typescript 代码，通过 GoPostPlugin 生成 go 语言的代码。

总结

代码生成这块的内容还有很多可以探索的地方，比如如何解析 thrift？是找第三方功能生成 AST 还是通过 pegjs 解析成自定义的 DSL？多文件联编如何处理、字段名 case 如何转换、运行时类型校验、生成的代码如何与 useRequest 或 ReactQuery 集成等。

thrift 其实可以看成接口定义的具体实现，如果 thrift 不满足你的业务场景，也可以自己实现一套类似的接口定义语言；接口定义作为前后端的约定，可以降低前后端的沟通成本；代码生成，可以提升前端代码的质量和研发效率。

如果本文对你有启发，欢迎点赞、关注、留言交流。

做后台系统，或者版权比较重视的项目时，产品经常会提出这样的需求：能不能禁止用户截图？有经验的开发不会直接拒绝产品，而是进行引导。

先了解初始需求是什么？是内容数据过于敏感，严禁泄漏。还是内容泄漏后，需要溯源追责。不同的需求需要的方案也不同。来看看就限制用户截图，有哪些脑洞？

有哪些脑洞

v站和某乎上的大佬给出了不少脑洞，我又加了点思路。

1.基础方案，阻止右键保存和拖拽。

这个方案是最基础，当前可只能阻拦一些小白用户。如果是浏览器，分分钟调出控制台，直接找到图片url。还可以直接ctrl+p，进入打印模式，直接保存下来再裁减。

2.失焦后加遮罩层

这个方案有点意思，看敏感信息时，必须鼠标点在某个按钮上，照片才完整显示。如果失去焦点图片显示不完整或者直接遮罩盖住。

3.高速动态马赛克

这个方案是可行的，并且在一些网站已经得到了应用，在视频或者图片上随机插像素点，动态跑来跑去，对客户来说，每一时刻屏幕上显示的都是完整的图像，靠用户的视觉残留看图或者视频。即时手机拍照也拍不完全。实际应用需要优化的点还是挺多的。比如用手机录像就可以看到完整内容，只是增加了截图成本。

下面是一个知乎上的方案效果。（原地址）：

正经需求vs方案

其实限制用户截图这个方案本身就不合理，除非整个设备都是定制的，在软件上阉割截图功能。为了这个需求添加更复杂的功能对于一些安全性没那么高的需求来说，有点本末倒置了。

下面聊聊正经方案：

1.对于后台系统敏感数据或者图片，主要是担心泄漏出去，可以采用斜45度七彩水印，想要完全去掉几乎不可能，就是观感比较差。

2.对于图片版权，可以使用现在主流的盲水印，之前看过腾讯云提供的服务，当然成本比较高，如果版权需求较大，使用起来效果比较好。

3.视频方案，tiktok下载下来的时候会有一个水印跑来跑去，当然这个是经过处理过的视频，非原画，画质损耗也比较高。Netflix等视频网站采用的是服务端权限控制，走的视频流，每次播放下载加密视频，同时获得短期许可，得到许可后在本地解密并播放，一旦停止播放后许可失效。

总之，除了类似于Android提供的截图API等底层功能，其他的功能实现都不完美。即使是底层控制了，一样可以拍照录像，没有完美的方案。不过还是可以做的相对安全。

你还有什么新思路吗？有的话咱评论区见，欢迎点赞收藏关注，感谢！

前端在向后端请求信息时，常常需要等待一定的时间才能得到返回结果。为了提高用户体验，可以通过实现一个接口进度条函数来增加页面的交互性和视觉效果。

接口响应快 - 效果

接口响应慢 - 效果

实现思路

首先定义一个进度条组件来渲染页面展示效果，组件包含进度条背景、进度长度、以及进度数字，同时还要设置数据绑定相关属性，如进度条当前的百分比、动画执行状态、以及完成状态等。在请求数据的过程中，需要添加监听函数来监测数据请求的过程变化，并更新组件相应的属性和界面元素。

代码实现

下面是使用 Vue 实现一个接口进度条的栗子：

<template>

    <div class="progress-bar">

        <div class="bg"></div>

        <div class="bar" :style="{ width: progress + '%' }"></div>

        <div class="label">{{ progress }}%</div>

    </div>

</template>



<script>

export default {

    data() {

        return {

            progress: 0,

            isPlaying: false,

            isCompleted: false

        }

    },

    mounted() {

        this.start();

    },

    methods: {

        start() {

            this.isPlaying = true;

            this.animateProgress(90)

                .then(() => {

                    if (!this.isCompleted) {

                        this.animateProgress(100);

                    }

                })

                .catch((error) => {

                    console.error('Progress error', error);

                });

        },

        animateProgress(target) {

            return new Promise((resolve, reject) => {

                let start = this.progress;

                const end = target;

                const duration = (target - start) * 150;



                const doAnimation = () => {

                    const elapsed = Date.now() - startTime;

                    const progress = Math.min(elapsed / duration, 1);



                    this.progress = start + ((end - start) * progress);



                    if (progress === 1) {

                        resolve();

                    } else if (this.isCompleted) {

                        resolve();

                    } else {

                        requestAnimationFrame(doAnimation);

                    }

                };



                const startTime = Date.now();

                requestAnimationFrame(doAnimation);

            });

        },

        finish() {

            this.isCompleted = true;

            this.progress = 100;

        }

    }

};

</script>



<style scoped>

.progress-bar {

    position: relative;

    height: 8px;

    margin: 10px 0;

}

.bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #ccc;

    border-radius: 5px;

}

.bar {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    border-radius: 5px;

    background-color: #409eff;

    transition: width 0.5s;

}

.label {

    position: absolute;

    top: -20px;

    left: calc(100% + 5px);

    color: #333;

    font-size: 12px;

}

</style>

首先定义了三个数据属性用于控制动画的播放和完成状态，分别是进度条当前比例 progress、动画播放状态 isPlaying、动画完成状态 isCompleted。在组件初始化的过程中，调用了 start 方法来启动进度条动画效果。在该方法内部，使用 Promise 来从 0% 到 90% 的百分比向相应位置移动，并在到达该位置时停止。

判断当前是否完成，如果没有完成则再次调用 animateProgress(100) ，并在进度加载期间检查是否有数据返回。若存在，则停止前半段动画，并使用1秒钟将进度条填充至100%。

下面讲解一下如何在请求数据的过程中添加监听函数：

import axios from 'axios';

import ProgressBar from './ProgressBar.vue';



const progressBar = new Vue(ProgressBar).$mount();

document.body.appendChild(progressBar.$el);

在这个代码片段中，使用了 Axios 拦截器来监听请求的过程。在请求开始之前，向页面添加进度条组件，之后将该组件挂载到页面中，并且将其元素追加到 HTML 的 <body> 标记尾部。

接下来，通过 onDownloadProgress 监听函数来监测下载进度的变化。如果加载完成则移除进度条组件。同时，也可以实现针对使用不同 API 的 ajax 请求设定不同的进度条，以达到更佳的用户体验效果。

axios.interceptors.request.use((config) => {    

    const progressBar = new Vue(ProgressBar).$mount();

    document.body.appendChild(progressBar.$el);



    config.onDownloadProgress = (event) => {

        if (event.lengthComputable) {

            progressBar.progress = parseInt((event.loaded / event.total) * 100, 10);  

            if (progressBar.progress === 100) {

                progressBar.finish();

                setTimeout(() => {

                    document.body.removeChild(progressBar.$el);

                }, 500);

            }

        }

    };



    return config;

}, (error) => {

    return Promise.reject(error);

});

参数注入

为了能够灵活地调整接口进度条效果，可以使用参数注入来控制动画速度和完成时间的设定。在 animateProgress 函数中，使用传参来设置百分比范围和动画播放速度，从而得到不同进度条和播放时间的效果。

animateProgress(target, duration) {

    return new Promise((resolve, reject) => {

        let start = this.progress;

        const end = target;



        const doAnimation = () => {

            const elapsed = Date.now() - startTime;

            const progress = Math.min(elapsed / duration, 1);



            this.progress = start + ((end - start) * progress);



            if (progress === 1) {

                resolve();

            } else if (this.isCompleted) {

                resolve();

            } else {

                requestAnimationFrame(doAnimation);

            }

        };



        const startTime = Date.now();

        requestAnimationFrame(doAnimation);

    });

}



...



this.animateProgress(90, 1000)

    .then(() => {

        if (!this.isCompleted) {

            this.animateProgress(100, 500);

        }

    })

...

在这个栗子中，将 duration 参数添加到 animateProgress 函数内部，并使用该参数来设置动画速度和完成时间。在第一个调用函数的时候，将异步进度条的播放时间设为 1000ms，从而得到速度较慢、完成时间较长的进度条效果。在第二个调用函数时，将进度条完成时间缩短为 500ms，并获得由此带来的更快动画效果。

总结

实现一个接口进度条函数可以提高网站性能和用户体验效果，同时也可以让页面更加交互性和生动有趣。在栗子中，使用了 Vue 框架来构建动画组件，使用了 Axios 拦截器来监听请求进度，使用了参数注入来控制动画速度和完成时间。

从下面代码引入问题

function a() {

    console.log('aa');

}



function b() {

    setTimeout(() => { //异步代码

        console.log('bb');

    }, 1000)

}



function c() {

    console.log('cc');

}



a()

b()

c()

上述代码的执行结果为先打印'aa',再打印'cc',等一秒后再打印'bb'。哎？我们是不是就有疑问了，我们明显是先调用的函数a，再调用的函数b，最后调用的函数c，为什么函数b的打印结果最后才出来呢？这里我们要清楚的是函数b中定义了一个计时器，执行此代码是需要时间的，属于异步代码，当浏览器执行到此代码时，会先将此程序挂起，继续往下执行，最后才会执行异步代码。那要怎么解决此类问题呢？一个方法是将其他函数体内也定义一个计时器，这样也就会按顺序调用了，但是这样太不优雅了；还一个方法是函数c作为参数传入函数b，在函数b中执行掉，这样也不优雅。es6出来后就可以使用promise来解决此问题了。

js是一种单线程语言

什么是单线程？

我们可以理解为一次只能完成一个任务，如果有其他任务进来，那就需要排队了，一个任务完成了接着下一个任务。

因为js是一种单线程语言，任务是按顺序执行的，但是有时我们有多个任务同时执行的需求，这就需要异步编程的思想。

什么是异步？

当客户端发送给服务端请求时，在等待服务端响应的时候，客户端可以做其他的事情。

什么是异步模式调用？ 

前一个任务执行完，调用回调函数而不是进行后一个任务。后一个任务不等前一个任务结束就执行，任务排列顺序与执行顺序无关。

什么是回调函数？

把函数当作参数传入另一个函数中，不会立即执行，当需要用这个函数时，再回调运行()这个函数。

以前是通过回调函数实现异步的，但是回调用多了会出现回调地狱，导致爆栈。

举个用回调函数来解决异步代码挂起问题

<body>

    <div class="box">

        <audio src="" id="audio" controls></audio> </audio>

    </div>

    <script>

        //ajax

        let url = ''

        function getSong(cb) {

            $.ajax({

                url: ' 数据地址',

                dataType: 'json',

                success(res) {

                    console.log(res);

                    url = res[0].url

                    cb()

                }

            })

        }

        getSong(playSong)



        function playSong() {

            let audio = document.getElementById('audio')

            window.addEventListener('click', () => {

                audio.src = url

                window.onclick = function () {

                    audio.play()

                }

            })

        }



    </script>

</body>

代码中用ajax向后端获取数据，这是需要时间的，属于异步代码，当我们分开调用这两个函数，函数getSong中的异步代码会出现挂起状态，导致函数playSong中的url获取不到值，会出现报错的情况，运用回调函数可以很好地解决这个问题。

Promise的使用

先执行一段代码

function xq() {



    setTimeout(() => {

        console.log('老王');

    }, 2000)



}





function marry() {

    setTimeout(() => {

        console.log('老王结婚了');

    }, 1000)

}





function baby() {

    setTimeout(() => {

        console.log('小王出生了');

    }, 500)

}

xq()

marry()

baby()

结果为

？？？这是不是有点违背了道德，只能说老王是个渣男。这时候我们就需要使用promise对象来调整一下顺序了。

function xq() {

    return new Promise((resolve, reject) => {

        setTimeout(() => {

            console.log('老王去相亲');

            resolve('ok')

        }, 2000)

    })

}





function marry() {

    return new Promise((resolve, reject) => {

        setTimeout(() => {

            console.log('老王结婚了');

            resolve('ok')

        }, 1000)

    })

}





function baby() {

    setTimeout(() => {

        console.log('小王出生了');

    }, 500)

}





// xq().then(() => {

//     marry().then(() => {

//         baby()

//     })

// })

xq()

    .then(marry)

    .then(baby)

// xq().then(marry)

// baby()

在这里我们可以理解为老王相亲的时候疯狂对相亲对象promise,才有了后面的步入婚姻的殿堂，结婚后想生个娃也要对妻子疯狂的promise，才有了后面的小王出生了。

老王长叹了一口气，终于通过promise挽回了形象。

小结

Js异步编程方法不只这两种，还有比如事件监听，发布/订阅，生成器函数 Generator/yield等。需要我们一起去探索研究，毕竟‘学无止境’。

国破山河在，城春草木深。 ——杜甫·春望

今日周一，在下与诸位同道中人一起来讨论一个话题：当一个前端空闲的时候会做些什么。

🤯是独自深耕论坛，钻研学术？

👯还是三两闲聊打趣，坐而论道？

💆‍♂️亦或是闭目养神，神游天地？

作为一名优秀的（摆子、摸鱼、切图...）前端开发者，在下在空闲时间最喜欢做的还是钻研（混）前端技术（工作量）。

新的一周，新的开始，上篇文章中有同学批评在下说不够“玩”，那么这周就“简单”画一个鼠标精灵再交予各位“玩一玩”吧。

说明一下：在下说的玩，是写一遍嗷

温馨提示：文章较长，图片较多，不耐看的同学可以先去文末玩一玩在下的“大眼”，不满足了再去创造属于各位自己的鼠标精灵

以下是这周“玩具”的简单介绍：

• 名称：大眼


• 生辰：发文时间的昨天(2022-08-15)


• 性别：随意


• 情绪：发怒/常态


• 状态：休眠/工作中


• 简介：没啥特别的，大眼就干一件事，就是盯着你的鼠标，以防你找不到鼠标了。不过大眼有起床气，而且非常懒散，容易犯困。

大眼生活照：

接下来请各位跟随在下的节奏，一步一步把自己的“大眼”创造出来。

👀 画“大眼”先画圆

老话说“画人先画骨”，同样画大眼也得先画它的骨，嗯......也就是个圆，没错，就是个普通的圆

在下的笔法还是老套路，先给他一个容器。

<div class="eyeSocket"></div>

给大眼容器添加一些必要的样式

body {

    width: 100vw;

    height: 100vh;

    overflow: hidden;

    background-color: #111;

}

.eyeSocket {

    position: absolute; // 浮动居中

    left: calc(50% - 75px);

    top: calc(50% - 75px);

    width: 150px; // 固定宽度

    aspect-ratio: 1; // 长宽比 1:1 如果浏览器不支持该属性，换成 height: 150px 也一样

    border-radius: 50%;

    border: 4px solid rgb(41, 104, 217);

    z-index: 1;

}

效果：

然后就是另外两个圆和一些阴影效果，由于另外两个圆没有特殊的动效，所以在下使用两个伪元素来实现

.eyeSocket::before,

.eyeSocket::after {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%); // 居中

    border-radius: 50%;

    box-sizing: border-box; // css3盒子模型

}

.eyeSocket::before {

    width: calc(100% + 20px);

    height: calc(100% + 20px);

    border: 6px solid #02ffff;

}

.eyeSocket::after {

    width: 100%;

    height: 100%;

    border: 4px solid rgb(35, 22, 140);

    box-shadow: inset 0px 0px 30px rgb(35, 22, 140);

}

效果：

👀 画龙需点睛

大眼的眼球画好了，之后就需要给它点上眼睛，喜欢什么样的眼睛因人而异，在下就选择这种分割线来作为大眼的眼仁。

为了方便做一些过渡效果，在下使用echarts来完成这个眼仁。

首先在下需要各位通过任何方式引入echarts库，然后给眼仁一个容器，并初始化echarts画布。

<div class="eyeSocket">

    <div id="eyeball"></div>

</div>

#eyeball {

    width: 100%;

    height: 100%;

}

// 画眼球

let eyeball = document.getElementById('eyeball'); // 获取eyeball元素

let eyeballChart = echarts.init(eyeball); // 初始化画布

function getEyeballChart() {

    eyeballChart.setOption({

        series: [

            {

                type: 'gauge', // 使用仪表盘类型

                radius: '-20%', // 采用负数是为了让分割线从内向外延伸

                clockwise: false,

                startAngle: '0', // 起始角度

                endAngle: '270', // 结束角度

                splitNumber: 3, // 分割数量，会将270度分割为3份，所以有四根线

                detail: false,

                axisLine: {

                    show: false,

                },

                axisTick: false,

                splitLine: {

                    show: true,

                    length: 12, // 分割线长度

                    lineStyle: {

                        shadowBlur: 20, // 阴影渐变

                        shadowColor: 'rgb(0, 238, 255)', // 阴影颜色

                        shadowOffsetY: '0',

                        color: 'rgb(0, 238, 255)', // 分割线颜色

                        width: 4, // 分割线宽度

                    }

                },

                axisLabel: false

            },

            {

                type: 'gauge',

                radius: '-20%',

                clockwise: false,

                startAngle: '45', // 倾斜45度

                endAngle: '315',

                splitNumber: 3,

                detail: false,

                axisLine: {

                    show: false,

                },

                axisTick: false,

                splitLine: {

                    show: true,

                    length: 12,

                    lineStyle: {

                        shadowBlur: 20,

                        shadowColor: 'rgb(0, 238, 255)',

                        shadowOffsetY: '0',

                        color: 'rgb(0, 238, 255)',

                        width: 4,

                    }

                },

                axisLabel: false

            }

        ]

    })

}

getEyeballChart();

效果：

眼仁就这么轻轻松松的画好了，对于常用echarts的同学可以说是轻而易举，对吧。

同时一个静态的大眼也创建完毕，接下来就要给大眼赋予生命了。

再次提醒：长文，而且代码量多，建议抽思路看即可。

✨ 生命仪式：休眠状态

赋予生命是神圣的，她需要一个过程，所以在下从最简单的开始——休眠状态。

在下给大眼设计的休眠状态，就是闭着眼睛睡觉，其实不露出眼仁同时有节奏的呼吸（缩放）罢了，相比于整个生命仪式来说，还是比较简单的，只需要修改大眼外框的大小即可。

呼吸

这里在下采用的是css转换+动画的方式

<div class="eyeSocket eyeSocketSleeping">

    <div id="eyeball"></div>

</div>

/* ...其他样式 */

.eyeSocketSleeping {

    animation: sleeping 6s infinite;

}



@keyframes sleeping {

    0% {

        transform: scale(1);

    }



    50% {

        transform: scale(1.2);

    }



    100% {

        transform: scale(1);

    }

}

闭眼

搞定了呼吸，但是睁着眼睛怎么睡得着？

所以接下来在下要帮助大眼把眼睛闭上，这时候咱们前面给眼睛设置负数radius的好处就来了（其实是在下设计好的），因为分割线是从内向外延伸的，所以此时只需要慢慢减小分割线的高度，即可实现眼睛慢慢缩小的效果，即在下给大眼设计的闭眼效果。

实现的效果是：大眼慢慢闭上眼睛（分割线缩小至0），然后开始呼吸

直接上代码

<div class="eyeSocket" id='bigEye'> // 去掉 eyeSocketSleeping 样式，添加id

    <div id="eyeball"></div>

</div>

let bigEye = document.getElementById('bigEye'); // 获取元素

// ...其他代码

let leftRotSize = 0; // 旋转角度

let ballSize = 12; // 眼睛尺寸

let rotTimer; // 定时器



function getEyeballChart() {

    eyeballChart.setOption({

        series: [

            {

                startAngle: `${0 + leftRotSize * 5}`, // 加为逆时针旋转，乘5表示速度为leftRotSize的倍

          	endAngle: `${270 + leftRotSize * 5}`, // 即变为每10微秒移动0.5度，1234678同理

                // ...其他

                splitLine: {

                    length: ballSize, // 分割线高度设置为眼球尺寸变量

                },

            },

            {

                startAngle: `${45 + leftRotSize * 5}`,

          		endAngle: `${315 + leftRotSize * 5}`,

                // ...其他

                splitLine: {

                    length: ballSize, // 同上

                }

            },

            }

        ]

    })

}

// 休眠

function toSleep() {

    clearInterval(rotTimer); // 清除定时器

    rotTimer = setInterval(() => {

        getEyeballChart()

        if (ballSize > 0) {

            ballSize -= 0.1; // 当眼球存在时慢慢减小

        } else {

            bigEye.className = 'eyeSocket eyeSocketSleeping'; // 眼球消失后添加呼吸

        }

        leftRotSize === 360 ? (leftRotSize = 0) : (leftRotSize += 0.1); // 旋转，

    }, 10);

}

getEyeballChart();

toSleep()

旋转实现原理：（看过在下第一篇动效的同学对旋转的实现原理应该不陌生）

修改每个圈的起始角度（startAngle）和结束角度（endAngle），并不断刷新视图，

增加度数为逆时针旋转，减去度数为顺时针旋转

如此一来就实现了眼睛缩小消失，然后开始呼吸的过程，同时咱们的大眼也进入了生命仪式之休眠状态（乱入的鼠标有点烦）；

✨ 生命仪式：起床气状态

在下相信，在座（站？蹲？）的各位同僚身边或者自身都存在一些小毛病，譬如咱们的大眼，它不但懒，喜欢睡觉，甚至叫醒它还会生气，通俗讲就是有起床气。

心理学上说有种说法是：情绪会让你接近生命的本真。

生命不就是情绪的结合嘛，没有情绪怎么能称之为生命的呢？

在设计之前我们还有点准备工作，就是让大眼先处于休眠状态。

<div class="eyeSocket eyeSocketSleeping" id='bigEye'> // 添加休眠

    <div id="eyeball"></div>

</div>

// ...其他代码

let ballSize = 0; // 初始眼球尺寸为0

// ...其他代码

// getEyeballChart(); // 把这两行删掉

// toSleep() // 把这两行删掉

唤醒

然后我们需要唤醒大眼，所以首先我们需要添加唤醒动作——点击事件；

let bigEye = document.getElementById('bigEye'); // 获取元素

// ...其他代码

let leftRotSize = 0;

let ballSize = 0;

let rotTimer;

let isSleep = true; // 是否处于休眠状态

// 添加点击事件，当处于休眠状态时执行唤醒方法

bigEye.addEventListener('click', () => {

    if (!isSleep) return;

    clickToWeakup();

})

// 唤醒

function clickToWeakup() {

    isSleep = false; // 修改状态

    bigEye.className = 'eyeSocket'; // 清除休眠状态

    clearInterval(rotTimer); // 清除定时器

    rotTimer = setInterval(() => {

        getEyeballChart()

        ballSize <= 12 && (ballSize += 0.1);

        leftRotSize === 360 ? (leftRotSize = 0) : (leftRotSize += 0.1);

    }, 10);

}

这样点一下大眼它就苏醒了过来：

生气

但是！

这是一个没有情绪的大眼，而在下需要的是一个有起床气的大眼，所以这样的大眼咱们不要！

退格←...退格←...退格←...退格←...退格←...退格←......

......

慢点慢点，也不是全都不要了，咱们只需要修改一下他唤醒以后的操作，给他添加上起床气不就行了？

接着来吧：

首先我们把代表了大眼常态的蓝色系抽离出来，使用css变量代替，然后再苏醒后给他添加成代表生气的红色系

body {

    width: 100vw;

    height: 100vh;

    overflow: hidden;

    background-color: #111;

    perspective: 1000px;

    --c-eyeSocket: rgb(41, 104, 217);

    --c-eyeSocket-outer: #02ffff;

    --c-eyeSocket-outer-shadow: transparent;

    --c-eyeSocket-inner: rgb(35, 22, 140);

}

.eyeSocket {

    /* 其他属性 */

    border: 4px solid var(--c-eyeSocket);

    box-shadow: 0px 0px 50px var(--c-eyeSocket-outer-shadow); /* 当生气时添加红色外发光，常态则保持透明 */

    transition: border 0.5s ease-in-out, box-shadow 0.5s ease-in-out; /* 添加过渡效果 */

}

.eyeSocket::before,

.eyeSocket::after {

    /* 其他属性 */

    transition: all 0.5s ease-in-out; /* 添加过渡效果 */

}

.eyeSocket::before {

    /* 其他属性 */

    border: 6px solid var(--c-eyeSocket-outer);

}

.eyeSocket::after {

    /* 其他属性 */

    border: 4px solid var(--c-eyeSocket-inner);

    box-shadow: inset 0px 0px 30px var(--c-eyeSocket-inner);

}

// ...其他代码

let ballColor = 'transparent'; // 默认透明，其实默认是啥都无所谓，反正看不见



function getEyeballChart() {

    eyeballChart.setOption({

        series: [

            {

                // ...其他

                splitLine: {

                    // ...其他

                    lineStyle: {

                        // ...其他

                        shadowColor: ballColor, // 把眼睛的眼影颜色设为变量控制

                        color: ballColor,

                    }

                },

            },

            {

                // ...其他

                splitLine: {

                    // ...其他

                    lineStyle: {

                        // ...其他

                        shadowColor: ballColor,

                        color: ballColor,

                    }

                }

            },

            }

        ]

    })

}

// 生气模式

function setAngry() {

    // 通过js修改body的css变量

    document.body.style.setProperty('--c-eyeSocket', 'rgb(255,187,255)');

    document.body.style.setProperty('--c-eyeSocket-outer', 'rgb(238,85,135)');

    document.body.style.setProperty('--c-eyeSocket-outer-shadow', 'rgb(255, 60, 86)');

    document.body.style.setProperty('--c-eyeSocket-inner', 'rgb(208,14,74)');

    ballColor = 'rgb(208,14,74)';

}

// 常态模式

function setNormal() {

    document.body.style.setProperty('--c-eyeSocket', 'rgb(41, 104, 217)');

    document.body.style.setProperty('--c-eyeSocket-outer', '#02ffff');

    document.body.style.setProperty('--c-eyeSocket-outer-shadow', 'transparent');

    document.body.style.setProperty('--c-eyeSocket-inner', 'rgb(35, 22, 140)');

    ballColor = 'rgb(0,238,255)';

}

// 唤醒

function clickToWeakup() {

    isSleep = false;

    bigEye.className = 'eyeSocket';

    setAngry(); // 设置为生气模式

    clearInterval(rotTimer);

    rotTimer = setInterval(() => {

        getEyeballChart()

        ballSize <= 50 && (ballSize += 1);

        leftRotSize === 360 ? (leftRotSize = 0) : (leftRotSize += 0.5);

    }, 10);

}

// 点击

bigEye.addEventListener('click', () => {

    if (!isSleep) return;

    clickToWeakup();

})

大眼生气长这样：

更生气

不知道在座（站？蹲擦？）各位是如何看待，但是在下看来，大眼这样好像还不够生气。

没错还不够生气，如何让大眼起来更生气呢，生气到发火如何？

嗦干酒干！

在下这里采用的是svg滤镜的方法，svg滤镜的属性和使用方法非常繁多，在下使用得也不是很娴熟，本文中在下就不赘述了，网上冲浪有许多技术大牛讲的非常好，希望各位勉励自己。emmmm......然后来教会在下，记得给在下留言文章地址

在下使用的是feTurbulence来形成噪声，然后用feDisplacementMap替换来给大眼添加粒子效果，因为feDisplacementMap会混合掉元素，所以在下需要给大眼新增一个大眼替身来代替大眼被融合。

创建大眼替身

<div class="filter"> // 添加滤镜的元素

    <div class="eyeSocket" id='eyeFilter'> // 大眼替身

    </div>

</div>

.filter {

    width: 100%;

    height: 100%;

}

.eyeSocket,

.filter .eyeSocket { /* 给替身加上相同的样式 */

    /* ...原属性 */

}

融合

<div class="filter">

    <div class="eyeSocket" id='eyeFilter'>

    </div>

</div>

<!-- Svg滤镜 -->

<svg width="0">

    <filter id='filter'>

        <feTurbulence baseFrequency="1">

            <animate id="animate1" attributeName="baseFrequency" dur="1s" from="0.5" to="0.55" begin="0s;animate1.end">

            </animate>

            <animate id="animate2" attributeName="baseFrequency" dur="1s" from="0.55" to="0.5" begin="animate2.end">

            </animate>

        </feTurbulence>

        <feDisplacementMap in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="B" />

    </filter>

</svg>

.filter {

    width: 100%;

    height: 100%;

    filter: url('#filter'); /* 开启滤镜 */

}

芜湖~果然献祭了一只“大眼”出来的效果看起来确实还不错哈？确实看起来酷炫多了，不愧是**“献祭”**啊！

真眼出现

既然粒子效果已经产生，咱们的真实大眼也就不需要躲躲藏藏了，该站出来获取这粒子“光环”了！

大眼：哈！

额......

其实......

也挺好看的嘛，不是吗？毕竟不是献祭的真正的大眼，毕竟是个替身，效果没有本体好也是很正常的对吧。

本质上是因为feDisplacementMap设置了scale属性的原因。

feDisplacementMap其实就是一个位置替换滤镜，通过就是改变元素和图形的像素位置的进行重新映射，然后替换一个新的位置，形成一个新的图形。

而scale就是替换公式计算后偏移值相乘的比例，影响着图形的偏移量和呈现的效果。

但是话虽如此，咱这个光环不能真的就这么戴着呀，咱们还需要对光环的位置进行一些微调。

.filter .eyeSocket {

    left: calc(50% - 92px);

    top: calc(50% - 92px);

}

看看，看看！这不就顺眼多了吗，献祭了替身，所以尺寸都是非常契合的，而且共用了样式，所以当大眼生气的时候，光环也会跟着生气。

这下光环也有了，看起来的确比之前更生气了。

但是我们还需要对大眼做一些细微的调整，因为大眼在常规状态下并不需要这个光环，睡着的时候光环在旁边“滋啦滋啦”不吵的慌么，所以我们还需要把常态下的大眼光环给消除掉。

在下采用的是不透明度opacity来控制，当大眼处于生气状态时，光环为不透明；处于常规状态时光环透明不可见。

.filter .eyeSocket {

    opacity: 0; // 默认状态下不透明度为0

    left: calc(50% - 92px);

    top: calc(50% - 92px);

    transition: all 0.5s ease-in-out; // 添加过渡效果，值得注意的是不能丢了原本的过渡效果，所以这里使用all

}

// ...其他代码

let eyeFilter = document.getElementById('eyeFilter'); // 获取元素

// 唤醒

function clickToWeakup() {

    eyeFilter.style.opacity = '1'; // 不透明度设为1

    // ...其他

}

deathEye.addEventListener('click', () => {

    if (!isSleep) return;

    clickToWeakup();

})

这样设置完，一个更生气的大眼就这样出现了：

更更生气

不知看到这样发火的大眼，各位是不是已经满足于此。

但是在下认为不，在下觉得一个真正足够生气的大眼，不只局限于自己生气，还需要找人发泄！！

所以在下还给大眼添加了一些大眼找人的动效（当然是找不到的，它这么笨）。

其实就是让大眼左右旋转，通过css转换来实现。

<div class="eyeSocket eyeSocketSleeping" id='bigEye'>

    <div id="eyeball"></div>

</div>

<div class="filter">

    <div class="eyeSocket" id='eyeFilter'>

    </div>

</div>

<!-- Svg滤镜 -->

<svg width="0">

    ...

</svg>

/* ...其他样式 */

body {

    /* ...其他属性 */

    perspective: 1000px;

}

.eyeSocketLooking {

    animation: lookAround 2.5s; // 添加动画，只播放一次

}

/* 环视动画 */

@keyframes lookAround {

    0% {

        transform: translateX(0) rotateY(0);

    }



    10% {

        transform: translateX(0) rotateY(0);

    }



    40% {

        transform: translateX(-70px) rotateY(-30deg);

    }



    80% {

        transform: translateX(70px) rotateY(30deg);

    }



    100% {

        transform: translateX(0) rotateY(0);

    }

}

// ...其他代码

let bigEye = document.getElementById('bigEye'); // 获取元素

let eyeFilter = document.getElementById('eyeFilter'); 



// 唤醒

function clickToWeakup() {

    // ...其他代码

    eyeFilter.className = bigEye.className = 'eyeSocket eyeSocketLooking'; // 同时给大眼和光环添加环视动画

}



bigEye.addEventListener('click', () => {

    if (!isSleep) return;

    clickToWeakup();

})

看看大眼在找什么？

向左看时，Y轴偏移量为-70px，同时按Y轴旋转-30°

向右看时，Y轴偏移量为70px，同时Y轴旋转30°

✨ 生命仪式：自我调整状态

这个状态非常好理解，大眼虽然有起床气，但是也仅限于起床对吧，总不能一直让它生气，气坏了咋办，带着情绪工作，效果也不好不是吗。

所以我们还需要给它一点时间，让它自我调整一下，恢复成正常状态。

这个自我调整状态就是一个从生气状态变回常态的过程，在这个过程中，大眼需要将生气状态的红色系切换为常态的蓝色系，同时红眼也会慢慢褪去恢复正常。

其实这个自我调整状态还是属于唤醒状态中，只是需要放在起床气状态之后。

这里在下采纳了上文中有位同学给的建议，监听动画结束事件webkitAnimationEnd，然后将自我调整放在动画结束以后。

同时这里也有两个步骤：

1. 退出起床气状态；


2. 变回常态

为了保证两个步骤的先后顺序，可以使用Promise来实现。不懂Promise的同学可以先去学习一下，在下也讲不清楚哈哈哈哈。

// ...其他代码

bigEye.addEventListener('webkitAnimationEnd', () => { // 监听动画结束事件

    new Promise(res => {

        clearInterval(rotTimer); // 清除定时器

        rotTimer = setInterval(() => {

            getEyeballChart(); // 更新视图

            ballSize > 0 && (ballSize -= 0.5); // 眼球尺寸减小

            leftRotSize === 360 ? (leftRotSize = 0) : (leftRotSize += 0.1);

            if (ballSize === 0) { // 当眼球尺寸为0时，将Promise标记为resolved，然后执行后面的代码

                clearInterval(rotTimer);

                res();

            }

        }, 10);

    }).then(() => {

        eyeFilter.style.opacity = '0'; // 清除光环

        eyeFilter.className = bigEye.className = 'eyeSocket'; // 清除环视动画

        setNormal(); // 设置常态样式

        rotTimer = setInterval(() => {

            getEyeballChart();

            ballSize <= 12 && (ballSize += 0.1); // 眼球尺寸缓慢增加

            leftRotSize === 360 ? (leftRotSize = 0) : (leftRotSize += 0.1);

        }, 10);

    })

})

添加了这样一个监听事件后，咱们的大眼就已经具备了自我调整的能力了：

✨ 生命仪式：工作状态

接下来就到了大眼重中之重的环节，也就是大眼的工作状态。

在下给大眼的工作非常简单，就是单纯的盯住在下的鼠标，如果各位想给各自的大眼一些其他的功能，可以自己发挥。

盯住鼠标，不只是说说而已，那么怎么样才能让大眼表现出他已经盯住了呢？

在下的思路是：

1. 以大眼的位置为原点建立一个直角坐标系


2. 然后通过监听鼠标移动事件，获取鼠标所在位置，计算出鼠标处于大眼坐标系的坐标。


3. 将整个视口背景以X轴和Y轴进行等分成无数个旋转角度，通过鼠标坐标的数值和正负来调整大眼眼框和眼睛的Y轴和Z轴旋转，从而达到盯住鼠标的目的。

好的，咱们理清思路，接下来就是付诸于行动。

// ...其他代码

// 工作

function focusOnMouse(e) {

    {

        // 视口尺寸，获取到整个视口的大小

        let clientWidth = document.body.clientWidth;

        let clientHeight = document.body.clientHeight;

        // 原点，即bigEye中心位置，页面中心

        let origin = [clientWidth / 2, clientHeight / 2];

        // 鼠标坐标

        let mouseCoords = [e.clientX - origin[0], origin[1] - e.clientY];

		// 旋转角度

        let eyeXDeg = mouseCoords[1] / clientHeight * 80; // 这里的80代表的是最上下边缘大眼X轴旋转角度

        let eyeYDeg = mouseCoords[0] / clientWidth * 60;

        bigEye.style.transform = `rotateY(${eyeYDeg}deg) rotateX(${eyeXDeg}deg)`;

        eyeball.style.transform = `translate(${eyeYDeg / 1.5}px, ${-eyeXDeg / 1.5}px)`;

    }

}

注意： 如果觉得旋转角度不够大，可以调整代码中的80和60，最大可以到180，也就是完全朝向，但是由于大眼终归是一个平面生物，如果旋转度数过大，就很容易穿帮，如果旋转角度为180，大眼就会在某个方向完全消失看不见（因为大眼没有厚度，这个也许是可以优化的点），所以个人喜好调整吧。

咱们来看看大眼工作时的飒爽英姿：

✨ 生命仪式：懒惰状态

顾名思义，懒惰状态就是......懒惰状态。

在下给大眼设计的懒惰状态就是当在下的鼠标超过30秒没有移动时，大眼就会进入休眠状态。

所以生命仪式的最后收尾其实非常的轻松，没有大量的代码，只需要添加一个定时器，然后修改休眠状态的代码，将大眼的所有参数初始化即可。

// ...其他代码

let sleepTimer; // 休眠定时器



// 休眠

function toSleep() {

    // ...其他操作

    document.body.removeEventListener('mousemove', focusOnMouse); // 移除鼠标移动事件

    bigEye.style.transform = `rotateY(0deg) rotateX(0deg)`; // 大眼归位

    eyeball.style.transform = `translate(0px, 0px)`; // 眼睛归位

}

// 工作

function focusOnMouse(e) {

    // ...其他操作

    // 设置休眠

    if (sleepTimer) clearTimeout(sleepTimer); // 如果休眠定时器已经被设置，则清除休眠定时器

    sleepTimer = setTimeout(() => { // 重新计时

        toSleep();

    }, 30000);

}

感谢上次掘金官方的提醒，在下把线上代码贴在这，在下文笔较差，看不下去的同学可以直接过来玩一玩，感兴趣再去创建自己的大眼。（没有点运行的不要来问我为什么出不来！！！）

如果自己在码上掘金动手的同学记得不要忘记添加echarts资源

💐 结语

好家伙，原来再写一遍大眼会这么累，这次是真真正正的“玩”了一天，有功夫的各位同僚也可以去玩一玩，于在下的基础上进行完善，创造出属于各位自己的大眼。当然如果有一些比较好玩的动效也可以留言告知在下，当下次混工作量时在下可以有东西写。

就这样！