'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import * as Lucide from 'lucide-react'; const WIDTH = 1200; const HEIGHT = 700; export default function SilkRoadSearchAnimation() { const [phase, setPhase] = useState('typing'); // typing, moving, loading, results, scrolling const [typedText, setTypedText] = useState(""); const [mousePos, setMousePos] = useState({ x: 800, y: 500 }); const [isClicking, setIsClicking] = useState(false); const [scrollOffset, setScrollOffset] = useState(0); const targetText = "丝绸之路怎么拍"; const frameRef = useRef(0); // 初始化结果数据 const results = useMemo(() => [ { id: 1, title: "如何拍摄出震撼的丝绸之路大片？专业摄影指南", url: "www.photography-travel.cn/silk-road-tips", desc: "丝绸之路不仅是历史的见证，更是摄影师的天堂。本文将从光影运用、构图技巧以及最佳拍摄时间三个维度，带你领略大漠孤烟直的壮美...", tag: "精选攻略", imgColor: "#e0f2f1" }, { id: 2, title: "丝绸之路自驾游摄影装备推荐：从相机到无人机", url: "tech.gear-review.com/silk-road-equipment", desc: "在极端的温差和风沙环境下，选择合适的器材至关重要。我们测试了多款全画幅相机与滤镜组合，确保你能捕捉到最纯净的星空与戈壁...", tag: "装备评测", imgColor: "#fff3e0" }, { id: 3, title: "光影丝路：纪录片导演教你如何捕捉人文瞬间", url: "vlog.creators.cn/silk-road-humanity", desc: "除了风景，丝绸之路上的面孔同样动人。学习如何在尊重当地文化的前提下，利用自然光拍摄出具有故事感的人物肖像...", tag: "视频教程", imgColor: "#f3e5f5" }, { id: 4, title: "最美丝绸之路取景地Top 10：莫高窟、鸣沙山与七彩丹霞", url: "travel.map.cn/silk-road-locations", desc: "从西安出发到喀什，横跨数千公里。我们为你整理了沿途最值得停留的十个拍摄点，并附带了每个地点的最佳拍摄角度示意图...", tag: "地理发现", imgColor: "#e8f5e9" }, { id: 5, title: "丝绸之路摄影团：跟随名家走入历史长河", url: "tour.art-photo.com/silk-road-2024", desc: "2024年度摄影创作营现已开启报名。专业导师随团指导，深入无人区，拍摄独家机位，让你的作品在朋友圈脱颖而出...", tag: "摄影团", imgColor: "#e1f5fe" } ], []); useEffect(() => { let isMounted = true; const runSequence = async () => { if (!isMounted) return; // 重置状态 setPhase('typing'); setTypedText(""); setMousePos({ x: 800, y: 500 }); setIsClicking(false); setScrollOffset(0); // 1. 等待并模拟光标闪烁 await new Promise(r => setTimeout(r, 1000)); // 2. 打字效果 for (let i = 0; i <= targetText.length; i++) { if (!isMounted) return; setTypedText(targetText.slice(0, i)); await new Promise(r => setTimeout(r, 150 + Math.random() * 100)); } await new Promise(r => setTimeout(r, 800)); // 3. 鼠标移动 setPhase('moving'); setMousePos({ x: 770, y: 350 }); // 移动到搜索按钮位置 await new Promise(r => setTimeout(r, 1000)); // 4. 点击动作 setIsClicking(true); await new Promise(r => setTimeout(r, 200)); setIsClicking(false); // 5. 加载中 setPhase('loading'); await new Promise(r => setTimeout(r, 1200)); // 6. 显示结果 setPhase('results'); await new Promise(r => setTimeout(r, 1000)); // 7. 模拟滚动 setPhase('scrolling'); setScrollOffset(-400); await new Promise(r => setTimeout(r, 3000)); // 循环 if (isMounted) runSequence(); }; runSequence(); return () => { isMounted = false; }; }, []); return (

{/* 浏览器窗口模拟 */} {/* 浏览器头部 */}

{phase === 'results' || phase === 'scrolling' ? `search.silkroad.com/q=${encodeURIComponent(targetText)}` : 'www.silkroad-search.com'}

{/* 内容区域 */}

{/* 搜索首页 */} {(phase === 'typing' || phase === 'moving') && ( {/* Logo */} SilkRoad {/* 搜索框 */}

{typedText.split("").map((char, i) => ( {char} ))}

{/* 搜索按钮 */} {/* 快捷标签 */}

{['敦煌摄影', '大漠星空', '古道人文', '自驾路线'].map((tag) => (

{tag}

))}

)} {/* 加载动画 */} {phase === 'loading' && ( )} {/* 搜索结果页面 */} {(phase === 'results' || phase === 'scrolling') && ( {/* 结果页头部 */}

SilkRoad

{targetText}

{/* 导航标签 */}

{['全部', '图片', '视频', '地图', '资讯'].map((tab, i) => (

{tab}

))}

{/* 结果列表 */}

找到约 12,800,000 条结果（用时 0.42 秒）

{results.map((item, idx) => (

{item.url}

{item.title}

2024年3月12日 — {item.desc}

{item.tag}

{/* 缩略图占位 */}

))} {/* 底部装饰 */}

S i l k R o a d

)}

{/* 虚拟鼠标指针 */} {/* 点击扩散光圈 */} {isClicking && ( )} {/* 底部提示文字 */}

{phase === 'typing' && "正在输入搜索词..."} {phase === 'moving' && "准备搜索..."} {phase === 'loading' && "正在获取全网摄影攻略..."} {phase === 'results' && "探索丝路之美"} {phase === 'scrolling' && "浏览更多专业内容"}

); }