【干货篇】仿明日方舟风格鼠标效果实现

之前就有这个计划来着，后来咕了很久，本次决定整理出来，供自己存档的同时，也给希望实现类似效果的小伙伴一个参考~

本次效果实现为简单粗暴的在html框架中添加</script>和<style>标签+在已有css中补充代码来实现上述的效果，直接上代码~

</script>标签

<script>
  var CURSOR;

Math.lerp = (a, b, n) => (1 - n) * a + n * b;

const getStyle = (el, attr) => {
    try {
        return window.getComputedStyle ?
            window.getComputedStyle(el)[attr] :
            el.currentStyle[attr];
    } catch (e) {}
    return "";
};

class Cursor {
    constructor() {
        this.pos = {
            curr: null,
            prev: null
        };
        this.pt = [];
        this.create();
        this.init();
        this.render();
    }

    move(left, top) {
        this.cursor.style["left"] = `${left}px`;
        this.cursor.style["top"] = `${top}px`;
    }

    create() {
        if (!this.cursor) {
            this.cursor = document.createElement("div");
            this.cursor.id = "cursor";
            this.cursor.classList.add("hidden");
            document.body.append(this.cursor);
        }

        var el = document.getElementsByTagName('*');
        for (let i = 0; i < el.length; i++)
            if (getStyle(el[i], "cursor") == "pointer")
                this.pt.push(el[i].outerHTML);

        document.body.appendChild((this.scr = document.createElement("style")));
        this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,") 4 4, auto !important}`;
    }

    refresh() {
        this.scr.remove();
        this.cursor.classList.remove("hover");
        this.cursor.classList.remove("active");
        this.pos = {
            curr: null,
            prev: null
        };
        this.pt = [];

        this.create();
        this.init();
        this.render();
    }

    init() {
        document.onmouseover = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.add("hover");
        document.onmouseout = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.remove("hover");
        document.onmousemove = e => {
            (this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8);
            this.pos.curr = {
                x: e.clientX - 8,
                y: e.clientY - 8
            };
            this.cursor.classList.remove("hidden");
        };
        document.onmouseenter = e => this.cursor.classList.remove("hidden");
        document.onmouseleave = e => this.cursor.classList.add("hidden");
        document.onmousedown = e => this.cursor.classList.add("active");
        document.onmouseup = e => this.cursor.classList.remove("active");
    }

    render() {
        if (this.pos.prev) {
            this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.45);
            this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.45);
            this.move(this.pos.prev.x, this.pos.prev.y);
        } else {
            this.pos.prev = this.pos.curr;
        }
        requestAnimationFrame(() => this.render());
    }
}

(() => {
    CURSOR = new Cursor();
    // 需要重新获取列表时，使用 CURSOR.refresh()
})();
</script>

<style>标签

<style>
* {cursor: url("data:image/svg+xml,") 4 4, auto !important}
</style>

补充的CSS

#cursor {
    position: fixed;
    width: 18px;
    height: 18px;
    background: #ffffffcc;
    border-radius: 8px;
    opacity: 0.25;
    z-index: 99999999;
    pointer-events: none;
    transition: 0.2s ease-in-out;
    transition-property: background, opacity, transform;
}

#cursor.hidden {
    opacity: 0;
}

#cursor.hover {
    opacity: 0.1;
    /* transform: scale(1.2); */
}

#cursor.active {
    opacity: 0.5;
    transform: scale(0.5);
}

大功告成！想要预览该效果请前往Arknights (kuroko.cn)

此界面主体为Mashiro大佬的GitHub - mashirozx/arknights-ui: H5 复刻版明日方舟游戏主界面
我仅在此页面增加了鼠标样式作为效果展示，且已经Mashiro大佬授权