Typescript 및 프레이머 모션을 사용한 애니메이션 비디오 도구 설명

비디오 도구 설명은 사용자가 아바타 위로 마우스를 가져가면 활성화되는 애니메이션 구성 요소입니다.

이 구성요소는 자신을 소개하는 사람의 짧은 동영상을 표시하거나 추가 컨텍스트를 제공하여 개인적이고 대화형 터치를 추가합니다.

추가 클릭 없이 팀 구성원, 발표자 또는 영향력 있는 사람에 대한 빠른 통찰력을 제공하여 기억에 남는 사용자 경험을 만드는 데 특히 유용합니다.

데모

소스 코드

video-tooltip.tsx

"반응"에서 { useState, useCallback, useMemo }를 가져옵니다.
"framer-motion"에서 import { 모션, useTransform, AnimatePresence, useMotionValue, useSpring };
"@/lib/utils"에서 {cn}을 가져옵니다.

인터페이스 TooltipItem {
  아이디: 번호;
  이름: 문자열;
  명칭: 문자열;
  이미지: 문자열;
  비디오: 문자열;
  텍스트: 문자열;
}

인터페이스 VideoTooltipProps {
  항목: TooltipItem[];
  클래스명?: 문자열;
}

const VideoTooltip 내보내기 = ({ items, className = "" }: VideoTooltipProps) => {
  const [hoveredIndex, setHoveredIndex] = useState<number | 널>(널);
  const [showText, setShowText] = useState(false);
  const springConfig = useMemo(
    () => ({
      강성: 100,
      댐핑: 5,
    }),
    []
  );

  // 모션 설정
  const x = useMotionValue(0);
  consttranslateX = useSpring(useTransform(x, [-100, 100], [-50, 50]), springConfig);
  // useCallback으로 이벤트 핸들러 최적화
  const handlerMouseMove = useCallback(
    (이벤트: React.MouseEvent<HTMLElement>) => {
      const halfWidth = event.currentTarget.offsetWidth / 2;
      x.set(event.nativeEvent.offsetX - halfWidth);
    },
    [엑스]
  );

  반품 (
    <div className={cn("flex items-center gap-2", className)}>
      {items.map((항목) => (
        <div className="-mr-4 상대 그룹" key={item.name} onMouseEnter={() => setHoveredIndex(item.id)} onMouseLeave={() => setHoveredIndex(null)}>
          <AnimatePresence mode="popLayout">
            {hoveredIndex === item.id && (
              <motion.div
                초기={{ 불투명도: 0, y: 20, 배율: 0.6 }}
                애니메이션={{
                  불투명도: 1,
                  y: 0,
                  규모: 1,
                  이행: {
                    강성: 260,
                    댐핑: 10,
                    지속시간: 0.3,
                  },
                  너비: showText ? "300px": "96px",
                  높이: showText ? "자동": "96px",
                }}
                종료={{ 불투명도: 0, y: 20, 배율: 0.6 }}
               >




          

            
        <script>
  // Detect dark theme
  var iframe = document.getElementById('tweet-1876277735032848773-256');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1876277735032848773&theme=dark"
  }

</script>

위 내용은 Typescript 및 프레이머 모션을 사용한 애니메이션 비디오 도구 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!