Austin/home
1
0
Fork 0
mirror of https://github.com/imsyy/home.git synced 2024-11-15 19:22:18 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: optimize the performance when the cursor is still

Browse Source
This commit is contained in:
nova1751 2024-08-25 01:14:44 +08:00
parent 3d4607226c
commit f29aa6c893
3 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -20,6 +20,7 @@
"dayjs": "^1.11.10",
"element-plus": "^2.7.1",
"fetch-jsonp": "^1.3.0",
"lodash-es": "^4.17.21",
"pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^3.2.1",
"swiper": "^11.1.1",

4
pnpm-lock.yaml
View File

@ -26,6 +26,9 @@ importers:
fetch-jsonp:
specifier: ^1.3.0
version: 1.3.0
lodash-es:
specifier: ^4.17.21
version: 4.17.21
pinia:
specifier: ^2.1.7
version: 2.1.7(vue@3.4.24)
@ -2405,6 +2408,7 @@ packages:
workbox-google-analytics@6.6.0:
resolution: {integrity: sha512-p4DJa6OldXWd6M9zRl0H6vB9lkrmqYFkRQ2xEiNdBFp9U0LhsGO7hsBscVEyH9H2/3eZZt8c97NB2FD9U2NJ+Q==}
deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
workbox-navigation-preload@6.6.0:
resolution: {integrity: sha512-utNEWG+uOfXdaZmvhshrh7KzhDu/1iMHyQOV6Aqup8Mm78D286ugu5k9MFD9SzBT5TcwgwSORVvInaXWbvKz9Q==}

19
src/utils/cursor.js
View File

@ -1,6 +1,13 @@
import { isEqual } from "lodash-es";
let mainCursor;
Math.lerp = (a, b, n) => (1 - n) * a + n * b;
const lerp = (a, b, n) => {
if (Math.round(a) === b) {
return b;
}
return (1 - n) * a + n * b;
};
const getStyle = (el, attr) => {
try {
@ -49,7 +56,6 @@ class Cursor {
document.body.appendChild((this.scr = document.createElement("style")));
this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='10px' height='10px'><circle cx='4' cy='4' r='4' fill='white' /></svg>") 4 4, auto !important}`;
}
refresh() {
this.scr.remove();
this.cursor.classList.remove("active");
@ -72,6 +78,7 @@ class Cursor {
y: e.clientY - 8,
};
this.cursor.classList.remove("hidden");
this.render();
};
document.onmouseenter = () => this.cursor.classList.remove("hidden");
document.onmouseleave = () => this.cursor.classList.add("hidden");
@ -81,13 +88,15 @@ class Cursor {
render() {
if (this.pos.prev) {
this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.35);
this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.35);
this.pos.prev.x = lerp(this.pos.prev.x, this.pos.curr.x, 0.35);
this.pos.prev.y = lerp(this.pos.prev.y, this.pos.curr.y, 0.35);
this.move(this.pos.prev.x, this.pos.prev.y);
} else {
this.pos.prev = this.pos.curr;
}
requestAnimationFrame(() => this.render());
if (!isEqual(this.pos.curr, this.pos.prev)) {
requestAnimationFrame(() => this.render());
}
}
}