Petua Alat Video Animasi menggunakan skrip taip dan gerakan pembingkai

Petua Alat Video ialah komponen animasi yang diaktifkan apabila pengguna menuding pada avatar.

Komponen ini memaparkan video pendek orang itu memperkenalkan diri mereka atau menyediakan konteks tambahan, menambahkan sentuhan peribadi dan interaktif.

Ia amat berguna untuk mencipta pengalaman pengguna yang tidak dapat dilupakan, menawarkan cerapan pantas tentang ahli pasukan, penceramah atau pemberi pengaruh tanpa memerlukan klik tambahan.

Demo

Kod Sumber

video-tooltip.tsx

import { useState, useCallback, useMemo } daripada "react";
import { motion, useTransform, AnimatePresence, useMotionValue, useSpring } daripada "framer-motion";
import { cn } daripada "@/lib/utils";

antara muka TooltipItem {
  id: nombor;
  nama: rentetan;
  sebutan: rentetan;
  imej: rentetan;
  video: rentetan;
  teks: rentetan;
}

antara muka VideoTooltipProps {
  item: TooltipItem[];
  Nama kelas?: string;
}

export const VideoTooltip = ({ item, className = "" }: VideoTooltipProps) => {
  const [hoveredIndex, setHoveredIndex] = useState<nombor | null>(null);
  const [showText, setShowText] = useState(false);
  const springConfig = useMemo(
    () => ({
      kekakuan: 100,
      redaman: 5,
    }),
    []
  );

  // Persediaan gerakan
  const x = useMotionValue(0);
  const translateX = useSpring(useTransform(x, [-100, 100], [-50, 50]), springConfig);
  // Optimumkan pengendali acara dengan useCallback
  const handleMouseMove = useCallback(
    (acara: React.MouseEvent<HTMLElement>) => {
      const halfWidth = event.currentTarget.offsetWidth / 2;
      x.set(event.nativeEvent.offsetX - halfWidth);
    },
    [x]
  );

  kembali (
    <div className={cn("flex items-center gap-2", className)}>
      {items.map((item) => (
        <div className="-mr-4 relative group" key={item.name} onMouseEnter={() => setHoveredIndex(item.id)} onMouseLeave={() => setHoveredIndex(null)}>
          <AnimatePresence mode="popLayout">
            {hoveredIndex === item.id && (
              <motion.div
                permulaan={{ kelegapan: 0, y: 20, skala: 0.6 }}
                bernyawa={{
                  kelegapan: 1,
                  y: 0,
                  skala: 1,
                  peralihan: {
                    kekakuan: 260,
                    redaman: 10,
                    tempoh: 0.3,
                  },
                  lebar: showText ? "300px" : "96px",
                  ketinggian: showText ? "auto" : "96px",
                }}
                keluar={{ kelegapan: 0, y: 20, skala: 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>

Atas ialah kandungan terperinci Petua Alat Video Animasi menggunakan skrip taip dan gerakan pembingkai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!