使用打字稿和成帧器运动的动画视频工具提示

视频工具提示是一个动画组件，当用户将鼠标悬停在头像上时会激活。

此组件显示一个人自我介绍或提供其他背景的短视频，添加个人和互动风格。

它对于创建令人难忘的用户体验特别有用，无需额外点击即可快速了解团队成员、演讲者或影响者。

演示

源代码

视频工具提示.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中文网其他相关文章！