使用打字稿和成幀器運動的動畫影片工具提示

影片工具提示是一個動畫組件，當使用者將滑鼠停留在頭像上時會啟動。

此組件顯示一個人自我介紹或提供其他背景的短視頻，添加個人和互動風格。

它對於創建令人難忘的使用者體驗特別有用，無需額外點擊即可快速了解團隊成員、演講者或影響者。

示範

原始碼

影片工具提示.tsx

從「react」匯入{ useState, useCallback, useMemo }；
從「framer-motion」導入{motion、useTransform、AnimatePresence、useMotionValue、useSpring}；
從“@/lib/utils”導入{cn}；

介面工具提示項目{
  id：號碼；
  名稱：字串；
  名稱：字串；
  圖像：字串；
  影片：字串；
  文字：字串；
}

介面VideoTooltipProps {
  項目：工具提示項目[]；
  類別名？ ：字串；
}

匯出 const VideoTooltip = ({ items, className = "" }: VideoTooltipProps) =>; {
  const [hoveredIndex, setHoveredIndex] = useState<number>(空);
  const [showText, setShowText] = useState(false);
  const springConfig = useMemo(
    ()=> ({
      剛度：100，
      阻尼：5，
    }),
    []
  ）；

  // 運動設定
  const x = useMotionValue(0);
  const translateX = useSpring(useTransform(x, [-100, 100], [-50, 50]), springConfig);
  // 使用 useCallback 最佳化事件處理程序
  const handleMouseMove = useCallback(
    （事件：React.MouseEvent<htmlelement>）=> {
      const halfWidth = event.currentTarget.offsetWidth / 2;
      x.set(event.nativeEvent.offsetX - halfWidth);
    },
    [x]
  ）；

  返回 （
    <div classname='{cn("flex' items-center gap-2>;
      {items.map((item) => (
        <div classname="-mr-4 相關群組" key="{item.name}" onmouseenter="{()">; setHoveredIndex(item.id)} onMouseLeave={() =>; setHoveredIndex(null)}>
          <animatepresence>
            {hoveredIndex === item.id && (
              




          </animatepresence>
</div>

            
        <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>
</div></htmlelement></number>

以上是使用打字稿和成幀器運動的動畫影片工具提示的詳細內容。更多資訊請關注PHP中文網其他相關文章！