add some animation

2025-06-05 03:37:21 +08:00 · 2025-06-05 03:37:21 +08:00 · 48b60b059d
commit 48b60b059d
parent ea0779e0ec
10 changed files with 384 additions and 98 deletions
--- a/.vitepress/theme/Layout.vue
+++ b/.vitepress/theme/Layout.vue
@ -1,9 +1,8 @@
-
-
 <template>
    <DefaultTheme.Layout id="k-layout">
-
    </DefaultTheme.Layout>
+    <ScrollBar />
+
 </template>

 <script setup lang="ts">
@ -12,6 +11,13 @@ import DefaultTheme from 'vitepress/theme';
 import { nextTick, onMounted, provide } from 'vue';
 import mediumZoom from "medium-zoom";
 import { animateIn, animateOut } from './hook/animate';
+import ScrollBar from './components/scrollbar/index.vue';
+
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+// 注册插件
+gsap.registerPlugin(ScrollTrigger);

 const data = useData()
 const router = useRouter()
@ -21,6 +27,7 @@ const enableTransitions = () =>

 const isDark = data.isDark;

+
 const setupMediumZoom = () => {
    mediumZoom("[data-zoomable]", {
        background: "transparent",
@ -65,14 +72,78 @@ const handleRouteChangeStart = async (to: string) => {
 const handleRouteChangeComplete = async (to: string) => {
    await animateOut();
    setupMediumZoom();
+
+    makeHomeAnimation();
 };


 router.onBeforeRouteChange = handleRouteChangeStart;
 router.onAfterRouteChange = handleRouteChangeComplete;

+function makeHomeAnimation() {
+    if (router.route.path !== '/openmcp/') {
+        return;
+    }
+
+    gsap.from(".main", {
+        opacity: 0,      // 初始透明度
+        x: -100,          // 初始位置（向下偏移100px）
+        duration: 1.2,     // 动画时长
+        ease: "power2.out", // 缓动函数（平滑结束）
+    });
+
+    gsap.from(".VPHero .VPImage", {
+        opacity: 0,      // 初始透明度
+        x: 100,          // 初始位置（向下偏移100px）
+        duration: 1.2,     // 动画时长
+        ease: "power2.out", // 缓动函数（平滑结束）
+    });
+
+    gsap.from(".VPFeatures.VPHomeFeatures", {
+        opacity: 0,      // 初始透明度
+        y: 100,          // 初始位置（向下偏移100px）
+        duration: 1.2,     // 动画时长
+        ease: "power2.out", // 缓动函数（平滑结束）
+    });
+
+
+    const elements = [
+        { selector: ".bilibili-player-container", start: "top 65%", end: "top 65%" },
+        { selector: "#openmcp-为谁准备", trigger: '#openmcp-为谁准备', start: "top 65%", end: "top 65%" },
+        { selector: ".k-tabs", trigger: '#openmcp-为谁准备', start: "top 65%", end: "top 65%" },
+        { selector: "#问题解答-faq", trigger: '#问题解答-faq', start: "top 65%", end: "top 65%" },
+        { selector: ".el-collapse", trigger: '#问题解答-faq', start: "top 65%", end: "top 65%" },
+    ];
+
+    elements.forEach(element => {
+        gsap.fromTo(element.selector, 
+            {
+                opacity: 0,
+                y: 100,
+                duration: 1.2,
+                ease: "power2.out",
+            },
+            { 
+                opacity: 1,
+                y: 0,
+                duration: 1.2, // 延长动画时间
+                ease: "power2.out", // 添加缓动效果
+                scrollTrigger: {
+                    trigger: element.trigger || element.selector,
+                    start: "top 70%",
+                    end: "top 70%",
+                    scrub: false,
+                    toggleActions: "play none reverse none",
+                }
+            }
+        );
+    });
+}
+
 onMounted(() => {
    setupMediumZoom();
+
+    makeHomeAnimation();
 });
 </script>

@ -82,6 +153,13 @@ onMounted(() => {
    transition: background-color 0.15s ease, color 0.3s ease;
 }

+
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+    width: 0px;
+}
+
 .medium-zoom-overlay {
    backdrop-filter: blur(5rem);
 }
@ -109,5 +187,4 @@ onMounted(() => {
    transform: translateY(100px);
    opacity: 0;
 }
-
 </style>
--- a/.vitepress/theme/components/KTab/index.vue
+++ b/.vitepress/theme/components/KTab/index.vue
@ -78,6 +78,7 @@ const tabsContainer: TabsContainer = reactive({
        const container = tabsContainer.panelContainer;
        const panels = Array.from(container.children) as HTMLElement[];

+        // 进行动画切换
        panels.forEach((panel, index) => {
            console.log('index', index);
            console.log('id', id);
--- a/.vitepress/theme/components/bilibli-player/index.vue
+++ b/.vitepress/theme/components/bilibli-player/index.vue
@ -54,7 +54,7 @@ function playVideo() {
    aspect-ratio: 16/9;
    border-radius: .5em;
    overflow: hidden;
-    border: 2px solid var(--vp-c-brand-3);
+    border: 3px solid var(--vp-c-brand-2);
 }

 .cover-container {
@ -78,7 +78,7 @@ function playVideo() {
    width: 64px;
    height: 64px;
    border-radius: 50%;
-    background-color: var(--vp-c-brand-3);
+    background-color: var(--vp-c-brand-2);
    border: none;
    color: var(--vp-c-bg);
    cursor: pointer;
--- a/.vitepress/theme/components/scrollbar/controller.ts
+++ b/.vitepress/theme/components/scrollbar/controller.ts
@ -0,0 +1,25 @@
+import { reactive } from 'vue';
+
+interface ScrollbarController {
+    element: any;
+    display: boolean;
+    height: number;
+    width: number;
+    top: number;
+    opacity: number;
+    percentage: number;
+}
+
+export const scrollbarController = reactive<ScrollbarController>({
+    element: undefined,
+    display: true,
+    height: 200,
+    width: 5,
+    top: 0,
+    opacity: 0,
+    percentage: 0
+});
+
+export const navigationBarController = reactive({
+    show: true
+});
--- a/.vitepress/theme/components/scrollbar/index.vue
+++ b/.vitepress/theme/components/scrollbar/index.vue
@ -0,0 +1,113 @@
+<template>
+    <div
+        class="k-scrollerbar"
+        :style="scrollbarStyle"
+        :ref="el => scrollbarController.element = el"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
+    >
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { scrollbarController } from './controller';
+import { navigationBarController } from './controller';
+
+const scrollbarStyle = computed(() => ({
+    height: scrollbarController.height + 'px',
+    width: scrollbarController.width + 'px',
+    opacity: scrollbarController.opacity
+}));
+
+let disappearHandler: undefined | number = undefined;
+
+function clearDisappearHandler() {
+    if (disappearHandler) {
+        clearTimeout(disappearHandler);
+    }
+}
+
+function hideDisappearHandler(timeout=500) {
+    disappearHandler = setTimeout(() => {
+        scrollbarController.opacity = 0;
+    }, timeout);
+}
+
+function onMouseEnter() {
+    clearDisappearHandler();
+    scrollbarController.opacity = 1;
+    scrollbarController.width = 8;
+}
+
+function onMouseLeave() {
+    scrollbarController.width = 5;
+    hideDisappearHandler(1000);
+}
+
+function onScroll(event) {    
+    clearDisappearHandler();
+    scrollbarController.opacity = 1;
+    // 总高度
+    const totalHeight = document.documentElement.scrollHeight;
+    // 视窗高度
+    const viewportHeight = window.innerHeight;
+    
+    // 如果视窗高度都大于总高度，不需要显示
+    if (viewportHeight >= totalHeight) {
+        scrollbarController.opacity = 0;
+        return;
+    }
+
+    // 当前的滚动距离 [0, totalHeight - viewportHeight]
+    const scrollPosition = window.scrollY;
+
+    // 计算滚动条的大小和位置
+    const ratio = viewportHeight / totalHeight;
+    const scrollbarHeight = Math.max(20, viewportHeight * ratio);
+
+    // top 取值为 [0, viewportHeight - scrollbarHeight]
+    const percentage = scrollPosition / (totalHeight - viewportHeight);
+    const scrollbarTop = percentage * (viewportHeight);
+    
+    scrollbarController.height = scrollbarTop;
+    // scrollbarController.top = scrollbarTop;
+    scrollbarController.percentage = percentage;
+}
+
+function onScrollEnd() {
+    hideDisappearHandler();
+}
+
+function onWheel(event) {
+    if (event.deltaY > 0) {
+        navigationBarController.show = false;        
+    } else {
+        navigationBarController.show = true;
+    }
+}
+
+document.addEventListener('scroll', onScroll);
+document.addEventListener('scrollend', onScrollEnd);
+document.addEventListener('resize', onScroll);
+document.addEventListener('wheel', onWheel);
+
+</script>
+
+<style>
+.k-scrollerbar {
+    left: 0;
+    top: 0;
+    background-color: var(--vp-c-brand-2);
+    border-radius: .3em;
+    position: fixed;
+    z-index: 200;
+    transition-property: width, opacity;
+    transition-duration: 0.5s;
+    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
+    cursor: pointer;
+}
+
+
+</style>
--- a/.vitepress/theme/css/animation.css
+++ b/.vitepress/theme/css/animation.css
@ -0,0 +1,52 @@
+
+
+.tagline {
+    width: fit-content;
+}
+
+.tagline {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    padding: 0.5rem 0;
+    cursor: pointer;
+}
+
+.tagline:hover::before {
+    transform: translateX(0);
+}
+
+.tagline::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 2px;
+    width: 100%;
+    background-color: var(--vp-c-brand-2);
+    transform: translateX(-105%);
+    transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+
+.VPFeatures .item {
+    cursor: pointer;
+    transition: .5s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.VPFeatures .item:hover {
+    transform: scale(1.05);
+}
+
+.VPFeatures .item .box {
+    transition: .5s cubic-bezier(0.23, 1, 0.32, 1);
+    border-radius: .5em;
+}
+
+.VPFeatures .item:hover .box {
+    background-color: var(--vp-c-brand-3);
+}
+
+.VPFeatures .item:hover .box .details {
+    color: var(--vp-c-white);
+}
--- a/.vitepress/theme/css/style.css
+++ b/.vitepress/theme/css/style.css
@ -49,10 +49,14 @@
    --vp-c-default-3: var(--vp-c-gray-3);
    --vp-c-default-soft: var(--vp-c-gray-soft);

-	--vp-c-brand-1: #d8a8e7; /* 较深的变体 */
-	--vp-c-brand-2: #C285D6; /* 基底颜色 */
-	--vp-c-brand-3: #a368b8; /* 较浅的变体 */
-	--vp-c-brand-soft: rgba(194, 133, 214, 0.1); /* 半透明的柔和版本 */
+    --vp-c-brand-1: #d8a8e7;
+    /* 较深的变体 */
+    --vp-c-brand-2: #C285D6;
+    /* 基底颜色 */
+    --vp-c-brand-3: #a368b8;
+    /* 较浅的变体 */
+    --vp-c-brand-soft: rgba(194, 133, 214, 0.1);
+    /* 半透明的柔和版本 */

    --vp-c-tip-1: var(--vp-c-brand-1);
    --vp-c-tip-2: var(--vp-c-brand-2);
@ -232,7 +236,7 @@ iframe {

 /* 自定义全局滚动条样式 */
 ::-webkit-scrollbar {
-  width: 8px;
+    width: 0px;
 }

 ::-webkit-scrollbar-track {
@ -247,3 +251,20 @@ iframe {
 ::-webkit-scrollbar-thumb:hover {
    background: var(--vp-c-brand-2);
 }
+
+/* 设置选中文本的背景色和文字颜色 */
+::selection {
+    background: var(--vp-c-brand-2);
+    color: white;
+}
+
+/* 兼容 Firefox */
+::-moz-selection {
+    background: var(--vp-c-brand-2);
+    color: white;
+}
+
+.VPHero .name.clip {
+    color: var(--vp-c-brand-2) !important;
+    background-color: var(--vp-c-brand-2) !important;
+}
--- a/.vitepress/theme/index.mts
+++ b/.vitepress/theme/index.mts
@ -20,6 +20,7 @@ import { ElCollapse, ElCollapseItem, ElTimeline, ElTimelineItem } from 'element-
 import './css/style.css';
 import './css/iconfont.css';
 import './css/element-plus.css';
+import './css/animation.css';
 import '@nolebase/vitepress-plugin-git-changelog/client/style.css';
 import '@nolebase/vitepress-plugin-enhanced-mark/client/style.css';
 import '@nolebase/vitepress-plugin-inline-link-preview/client/style.css';
--- a/package-lock.json
+++ b/package-lock.json
@ -6,6 +6,7 @@
    "": {
      "dependencies": {
        "element-plus": "^2.9.11",
+        "gsap": "^3.13.0",
        "vitepress": "^1.6.3"
      },
      "devDependencies": {
@ -3643,7 +3644,6 @@
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "dependencies": {
@ -3944,7 +3944,6 @@
      "version": "4.2.11",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
      "license": "ISC",
      "optional": true
    },
@ -3964,6 +3963,11 @@
        "node": ">=6.0"
      }
    },
+    "node_modules/gsap": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.13.0.tgz",
+      "integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw=="
+    },
    "node_modules/hachure-fill": {
      "version": "0.5.2",
      "resolved": "https://registry.npmjs.org/hachure-fill/-/hachure-fill-0.5.2.tgz",
@ -4033,7 +4037,7 @@
      "version": "0.6.3",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "safer-buffer": ">= 2.1.2 < 3.0.0"
@ -4056,7 +4060,6 @@
      "version": "0.5.5",
      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "bin": {
@ -4417,7 +4420,6 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "dependencies": {
@ -4665,7 +4667,6 @@
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "bin": {
@ -4758,7 +4759,6 @@
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
      "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "dependencies": {
@ -4970,7 +4970,6 @@
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "engines": {
@ -5072,7 +5071,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true,
      "license": "MIT",
      "optional": true
    },
@ -5271,14 +5269,13 @@
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/sax": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
-      "dev": true,
      "license": "ISC",
      "optional": true
    },
@ -5306,7 +5303,6 @@
      "version": "5.7.2",
      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "dev": true,
      "license": "ISC",
      "optional": true,
      "bin": {
@ -5381,7 +5377,6 @@
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
      "license": "BSD-3-Clause",
      "optional": true,
      "engines": {
--- a/package.json
+++ b/package.json
@ -7,6 +7,7 @@
  },
  "dependencies": {
    "element-plus": "^2.9.11",
+    "gsap": "^3.13.0",
    "vitepress": "^1.6.3"
  },
  "devDependencies": {