nav新增动画，修复潜在的性能和bug，优化动画流畅度

2026-01-29 09:48:05 +08:00
parent 0a1bd07492
commit 2377e2dda2
6 changed files with 34 additions and 27 deletions
--- a/components/HeroButtons.tsx
+++ b/components/HeroButtons.tsx
@@ -30,7 +30,7 @@ export default function HeroButtons() {
    >
      {/* .component-82 - Start Investing Button */}
      <button
-        className="bg-white flex flex-row gap-2 items-center justify-center flex-shrink-0 h-[60px] relative overflow-hidden hover:bg-[#f3f4f6] transition-colors"
+        className="bg-white flex flex-row gap-2 items-center justify-center flex-shrink-0 h-[60px] relative overflow-hidden hover:bg-[#f3f4f6] transition-colors select-none"
        style={{
          borderRadius: '4px',
          padding: '0px 32px'
@@ -61,7 +61,7 @@ export default function HeroButtons() {

      {/* .component-9 - Read the Whitepaper Button */}
      <button
-        className="border border-white/20 flex flex-row gap-2 items-center justify-center self-stretch flex-shrink-0 relative overflow-hidden hover:bg-white/70 hover:border-white/60 transition-all"
+        className="border border-white/20 flex flex-row gap-2 items-center justify-center self-stretch flex-shrink-0 relative overflow-hidden hover:bg-white/70 hover:border-white/60 transition-all select-none"
        style={{
          background: 'rgba(255, 255, 255, 0.1)',
          borderRadius: '4px',
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -14,7 +14,14 @@ export default function HeroSection() {
        muted
        playsInline
        className="absolute inset-0 w-full h-full object-cover"
-        style={{ zIndex: 0 }}
+        style={{
+          zIndex: 0,
+          objectFit: 'cover',
+          objectPosition: 'center center',
+          minWidth: '100%',
+          minHeight: '100%',
+          transform: 'scale(1.1)'
+        }}
      >
        <source src="/hero-background.mp4" type="video/mp4" />
      </video>
--- a/components/HowItWorksSection.tsx
+++ b/components/HowItWorksSection.tsx
@@ -270,8 +270,8 @@ export default function HowItWorksSection() {
            boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
            transformOrigin: '0 0',
            transform: animate && activeStep === 1
-              ? 'rotate(6.535deg) scale(1, 1) translateY(0)'
-              : 'rotate(6.535deg) scale(1, 1) translateY(3rem)',
+              ? 'rotate(6.535deg) scale(1, 1) translateX(0)'
+              : 'rotate(6.535deg) scale(1, 1) translateX(3rem)',
            transitionDelay: activeStep === 1 ? '200ms' : '0ms',
            pointerEvents: activeStep === 1 ? 'auto' : 'none'
          }}
@@ -305,8 +305,8 @@ export default function HowItWorksSection() {
            }`}
            style={{
              transform: animate && activeStep === 1
-                ? 'rotate(-3deg) translateY(0)'
-                : 'rotate(-3deg) translateY(3rem)',
+                ? 'rotate(-3deg) translateX(0)'
+                : 'rotate(-3deg) translateX(3rem)',
              transformOrigin: 'center center',
              transitionDelay: activeStep === 1 ? '200ms' : '0ms',
              pointerEvents: activeStep === 1 ? 'auto' : 'none'
@@ -420,8 +420,8 @@ export default function HowItWorksSection() {
            style={{
              boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
              transform: animate && activeStep === 2
-                ? 'rotate(3deg) translateY(0)'
-                : 'rotate(3deg) translateY(3rem)',
+                ? 'rotate(3deg) translateX(0)'
+                : 'rotate(3deg) translateX(3rem)',
              transformOrigin: '0 0',
              transitionDelay: activeStep === 2 ? '200ms' : '0ms',
              pointerEvents: activeStep === 2 ? 'auto' : 'none'
@@ -493,8 +493,8 @@ export default function HowItWorksSection() {
            style={{
              boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
              transform: animate && activeStep === 3
-                ? 'rotate(3deg) translateY(0)'
-                : 'rotate(3deg) translateY(3rem)',
+                ? 'rotate(3deg) translateX(0)'
+                : 'rotate(3deg) translateX(3rem)',
              transformOrigin: '0 0',
              transitionDelay: activeStep === 3 ? '200ms' : '0ms',
              overflow: 'hidden',
@@ -545,7 +545,7 @@ export default function HowItWorksSection() {
                      +10% APY
                    </span>
                    <div
-                      className="bg-[#000000] rounded-lg px-4 py-2"
+                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                      style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                    >
                      <span className="text-white font-inter text-[12px] font-bold leading-4">
@@ -578,7 +578,7 @@ export default function HowItWorksSection() {
                      +10% APY
                    </span>
                    <div
-                      className="bg-[#000000] rounded-lg px-4 py-2"
+                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                      style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                    >
                      <span className="text-white font-inter text-[12px] font-bold leading-4">
@@ -611,7 +611,7 @@ export default function HowItWorksSection() {
                      +10% APY
                    </span>
                    <div
-                      className="bg-[#000000] rounded-lg px-4 py-2"
+                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                      style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                    >
                      <span className="text-white font-inter text-[12px] font-bold leading-4">
@@ -644,7 +644,7 @@ export default function HowItWorksSection() {
                      Get USDC
                    </span>
                    <div
-                      className="bg-[#000000] rounded-lg px-4 py-2"
+                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                      style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                    >
                      <span className="text-white font-inter text-[12px] font-bold leading-4">
@@ -677,7 +677,7 @@ export default function HowItWorksSection() {
                      10% APY
                    </span>
                    <div
-                      className="bg-[#000000] rounded-lg px-4 py-2"
+                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                      style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                    >
                      <span className="text-white font-inter text-[12px] font-bold leading-4">
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -133,18 +133,18 @@ export default function Navbar() {
      {/* Launch App Button & Language Selector */}
      <div className="flex-1 flex justify-end items-center gap-4">
        <div
-          className="bg-[#111827] rounded-lg px-5 py-2.5 h-10 flex items-center justify-center overflow-hidden cursor-pointer hover:opacity-90 select-none"
          style={{
            transform: animate ? 'translateY(0)' : 'translateY(-3rem)',
            opacity: animate ? 1 : 0,
-            transition: 'all 1s ease-out',
-            transitionDelay: '200ms'
+            transition: 'transform 1s ease-out 200ms, opacity 1s ease-out 200ms'
          }}
          suppressHydrationWarning
        >
-          <span className="text-[#fcfcfd] font-bold text-sm leading-[150%] font-inter">
-            {t('nav.launchApp')}
-          </span>
+          <div className="bg-[#111827] rounded-lg px-5 py-2.5 h-10 flex items-center justify-center overflow-hidden cursor-pointer hover:scale-105 select-none transition-transform duration-300">
+            <span className="text-[#fcfcfd] font-bold text-sm leading-[150%] font-inter">
+              {t('nav.launchApp')}
+            </span>
+          </div>
        </div>

        {/* Language Selector */}
--- a/components/ShatterTransition.tsx
+++ b/components/ShatterTransition.tsx
@@ -7,9 +7,9 @@ interface ShatterTransitionProps {
  onComplete: () => void;
 }

-// 增加网格密度以获得更细腻的破碎感
-const GRID_COLS = 10;
-const GRID_ROWS = 10;
+// 优化性能：减少碎片数量
+const GRID_COLS = 7;
+const GRID_ROWS = 7;

 export default function ShatterTransition({ isActive, onComplete }: ShatterTransitionProps) {
  const [isAnimating, setIsAnimating] = useState(false);
--- a/components/TrustedBySection.tsx
+++ b/components/TrustedBySection.tsx
@@ -98,13 +98,13 @@ export default function TrustedBySection() {
        {partners.map((partner, index) => (
          <div
            key={partner.name}
-            className={`flex-shrink-0 relative overflow-hidden transition-all duration-700 ease-out ${
+            className={`flex-shrink-0 relative overflow-hidden cursor-pointer hover:brightness-0 ${
              animate
                ? 'translate-y-0 opacity-100'
                : 'translate-y-12 opacity-0'
            }`}
            style={{
-              transitionDelay: `${index * 100}ms`,
+              transition: `transform 0.7s ease-out ${index * 100}ms, opacity 0.7s ease-out ${index * 100}ms, filter 0.3s ease-out`,
              width: `${partner.width}px`,
              height: `${partner.height}px`,
              aspectRatio: `${partner.width}/${partner.height}`