@sugarat/theme 0.5.7 → 0.5.8

package/node.d.ts

@@ -186,6 +186,27 @@ declare namespace Theme {
          * @default false
          */
         blogInfoCollapsible?: boolean;
+        /**
+         * 旋转的配置
+         */
+        hoverSpin?: boolean | HoverSpinConfig;
+    }
+    interface HoverSpinConfig {
+        /**
+         * 旋转的加速度
+         * @default 180
+         */
+        accel?: number;
+        /**
+         * 旋转的最大角速度
+         * @default 2160
+         */
+        maxVel?: number;
+        /**
+         * 缓停时长
+         * @default 1500
+         */
+        decelDuration?: number;
     }
     interface ArticleConfig {
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -53,10 +53,10 @@
     "vitepress-plugin-group-icons": "1.2.4",
     "vitepress-plugin-mermaid": "2.0.13",
     "vitepress-plugin-tabs": "0.2.0",
-    "vitepress-plugin-pagefind": "0.4.15",
-    "vitepress-plugin-announcement": "0.1.5",
-    "vitepress-plugin-rss": "0.3.2",
-    "@sugarat/theme-shared": "0.0.6"
+    "vitepress-plugin-rss": "0.3.3",
+    "@sugarat/theme-shared": "0.0.6",
+    "vitepress-plugin-pagefind": "0.4.16",
+    "vitepress-plugin-announcement": "0.1.5"
   },
   "devDependencies": {
     "@element-plus/icons-vue": "^2.3.1",

package/src/components/BlogAuthor.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { useData, withBase } from 'vitepress'
-import { computed } from 'vue'
-import { useBlogConfig, useGlobalAuthor, useHomeConfig } from '../composables/config/blog'
+import { computed, ref } from 'vue'
+import { useGlobalAuthor, useHomeConfig } from '../composables/config/blog'
+import { useHoverSpin } from '../hooks/useHoverSpin'
 
 const home = useHomeConfig()
 const { frontmatter, site } = useData()
@@ -20,11 +21,15 @@ const logo = computed(() =>
   ?? '/logo.png'
 )
 const show = computed(() => author.value || logo.value)
+
+const imgRef = ref(null)
+
+useHoverSpin(imgRef, home?.value?.hoverSpin)
 </script>
 
 <template>
   <div v-if="show" class="blog-author">
-    <img v-if="logo" :src="withBase(logo)" alt="avatar">
+    <img v-if="logo" ref="imgRef" :src="withBase(logo)" alt="avatar">
     <p v-if="author">
       {{ author }}
     </p>
@@ -42,12 +47,7 @@ const show = computed(() => author.value || logo.value)
     height: 100px;
     border-radius: 50%;
     background-color: rgba(var(--bg-gradient-home));
-  }
-
-  img:hover {
-    transform: rotate(666turn);
-    transition-duration: 59s;
-    transition-timing-function: cubic-bezier(.34, 0, .84, 1)
+    cursor: pointer;
   }
 
   p {

package/src/components/BlogHomeHeaderAvatar.vue

@@ -1,7 +1,8 @@
 <script  setup lang="ts">
 import { useData, withBase } from 'vitepress'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useHomeConfig } from '../composables/config/blog'
+import { useHoverSpin } from '../hooks/useHoverSpin'
 
 const home = useHomeConfig()
 const { frontmatter, site } = useData()
@@ -13,11 +14,14 @@ const logo = computed(() =>
     ?? '/logo.png'
 )
 const alwaysHide = computed(() => frontmatter.value.blog?.minScreenAvatar === false)
+
+const imgRef = ref(null)
+useHoverSpin(imgRef, home?.value?.hoverSpin)
 </script>
 
 <template>
   <div v-show="!alwaysHide" class="blog-home-header-avatar">
-    <img :src="withBase(logo)" alt="avatar">
+    <img ref="imgRef" :src="withBase(logo)" alt="avatar">
   </div>
 </template>
 
@@ -36,13 +40,14 @@ const alwaysHide = computed(() => frontmatter.value.blog?.minScreenAvatar === fa
         background-color: transparent;
         border: 5px solid rgba(var(--bg-gradient-home));
         box-sizing: border-box;
+        cursor: pointer;
     }
 
-    img:hover {
-        transform: rotate(666turn);
-        transition-duration: 59s;
-        transition-timing-function: cubic-bezier(.34, 0, .84, 1)
-    }
+    // img:hover {
+    //     transform: rotate(666turn);
+    //     transition-duration: 59s;
+    //     transition-timing-function: cubic-bezier(.34, 0, .84, 1)
+    // }
 }
 
 @media screen and (min-width: 768px) {

package/src/composables/config/index.ts

@@ -191,6 +191,28 @@ export namespace Theme {
      * @default false
      */
     blogInfoCollapsible?: boolean
+    /**
+     * 旋转的配置
+     */
+    hoverSpin?: boolean | HoverSpinConfig
+  }
+
+  export interface HoverSpinConfig {
+    /**
+     * 旋转的加速度
+     * @default 180
+     */
+    accel?: number
+    /**
+     * 旋转的最大角速度
+     * @default 2160
+     */
+    maxVel?: number
+    /**
+     * 缓停时长
+     * @default 1500
+     */
+    decelDuration?: number
   }
 
   export interface ArticleConfig {

package/src/hooks/useHoverSpin.ts

@@ -0,0 +1,114 @@
+import { type Ref, onMounted, onUnmounted } from 'vue'
+import type { Theme } from '../composables/config/index'
+
+/**
+ * 元素悬停旋转
+ * @param elRef 元素引用
+ * @param accel 加速度
+ * @param maxVel 最大角速度
+ * @param decelDuration 缓停时长
+ */
+export function useHoverSpin(elRef: Ref<HTMLElement | null>, hoverSpinConfig?: Theme.HoverSpinConfig | boolean) {
+  const { accel = 180, maxVel = 2160, decelDuration = 1500 } = hoverSpinConfig === true ? {} : hoverSpinConfig || {}
+  let rafId = 0
+  let lastTs = 0
+  let rotation = 0
+  let velocity = 0
+  let decelStart = 0
+  let decelStartRotation = 0
+  let decelTargetRotation = 0
+  let decelBias = 0
+  let isDecel = false
+  let hovering = false
+
+  function animate(ts: number) {
+    if (!lastTs)
+      lastTs = ts
+    const dt = (ts - lastTs) / 1000
+    lastTs = ts
+
+    if (hovering) {
+      isDecel = false
+      decelStart = 0
+      velocity = Math.min(velocity + accel * dt, maxVel)
+      rotation += velocity * dt
+    }
+    else if (isDecel) {
+      const t = Math.min((ts - decelStart) / decelDuration, 1)
+      const durSec = decelDuration / 1000
+      const base = velocity * durSec * (t - t * t / 2)
+      const smooth = 3 * t * t - 2 * t * t * t
+      rotation = decelStartRotation + base + decelBias * smooth
+      if (t >= 1) {
+        decelTargetRotation = 0
+        decelStartRotation = 0
+        decelBias = 0
+        rotation = decelTargetRotation
+        velocity = 0
+        isDecel = false
+        if (rafId) {
+          cancelAnimationFrame(rafId)
+          rafId = 0
+        }
+        const el2 = elRef.value as HTMLElement | null
+        if (el2)
+          el2.style.transform = `rotate(${rotation}deg)`
+        return
+      }
+    }
+
+    const el = elRef.value as HTMLElement | null
+    if (el)
+      el.style.transform = `rotate(${rotation}deg)`
+    if (hovering || isDecel) {
+      rafId = requestAnimationFrame(animate)
+    }
+    else if (rafId) {
+      cancelAnimationFrame(rafId)
+      rafId = 0
+    }
+  }
+
+  function onEnter() {
+    hovering = true
+    if (!rafId) {
+      lastTs = 0
+      rafId = requestAnimationFrame(animate)
+    }
+  }
+
+  function onLeave() {
+    hovering = false
+    isDecel = true
+    decelStart = performance.now()
+    decelStartRotation = rotation
+    const durSec = decelDuration / 1000
+    const S = velocity * durSec / 2
+    const minTarget = decelStartRotation + S
+    decelTargetRotation = Math.ceil(minTarget / 360) * 360
+    decelBias = (decelTargetRotation - decelStartRotation) - S
+    lastTs = 0
+  }
+
+  onMounted(() => {
+    if (hoverSpinConfig === false)
+      return
+    const el = elRef.value
+    if (!el)
+      return
+    el.addEventListener('mouseenter', onEnter)
+    el.addEventListener('mouseleave', onLeave)
+  })
+
+  onUnmounted(() => {
+    if (hoverSpinConfig === false)
+      return
+    const el = elRef.value
+    if (el) {
+      el.removeEventListener('mouseenter', onEnter)
+      el.removeEventListener('mouseleave', onLeave)
+    }
+    if (rafId)
+      cancelAnimationFrame(rafId)
+  })
+}