lenis 滚动质感

components/Lenis.js

@@ -2,8 +2,6 @@
  * 鼠标滚动阻尼感
  */
 import { useEffect } from 'react'
-// import anime from 'animejs'
-import { siteConfig } from '@/lib/config'
 import { loadExternalResource } from '@/lib/utils'
 
 /**
@@ -16,10 +14,39 @@ const Lenis = () => {
     // 异步加载
     async function loadLenis() {
       loadExternalResource(
-        'https://unpkg.com/lenis@1.2.3/dist/lenis.mjs',
+        '/js/lenis.js',
         'js'
       ).then(() => {
         console.log('Lenis',window.Lenis)
+        if(!window.Lenis) {
+          console.error('Lenis not loaded')
+          return
+        }
+        const Lenis = window.Lenis
+        // 创建 Lenis 实例
+
+        const lenis = new Lenis({ 
+          duration: 1.2, 
+          easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://www.desmos.com/calculator/brs54l4xou 
+          direction: 'vertical', // vertical, horizontal 
+          gestureDirection: 'vertical', // vertical, horizontal, both 
+          smooth: true, 
+          mouseMultiplier: 1, 
+          smoothTouch: false, 
+          touchMultiplier: 2, 
+          infinite: false, 
+          }) 
+          
+          //get scroll value 
+          lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => { console.log({ scroll, limit, velocity, direction, progress }) 
+          }) 
+          
+          function raf(time) { 
+          lenis.raf(time) 
+          requestAnimationFrame(raf) 
+          } 
+          
+          requestAnimationFrame(raf) 
       })
     }