使用 Reactjs 制作 Framer Motion 动画英雄

使用 React.js 和 Framer Motion 创建令人惊叹的动画英雄

使用 **Framer Motion** 让您的网页设计栩栩如生！在这篇博文中，我们将探索如何使用 React.js 和 Framer Motion 创建视觉上令人惊叹的动画英雄部分。了解流畅的过渡、交互式动画和丰富多彩的设计如何增强您网站的用户体验。**您可以免费下载源代码。**。👇

🎥 你将学到什么

💻 动画英雄部分

我们将制作一个引人入胜的英雄部分：

平滑的过渡可以吸引观众。

响应用户交互的交互式动画。

✨ 为什么选择 Framer Motion？

如果你曾经想过：

为 React 项目中的元素添加动画。

在滚动、悬停或页面加载时触发动画。

通过动态设计增强您的用户体验——那么这对您来说就是完美的教程！

Framer Motion 可以轻松地将强大的动画集成到您的 React 组件中，将静态设计转变为动态体验。

🚀 分步指南

步骤 1：设置你的 React 项目

从 React 项目开始。如果你还没有：

yarn create vite my-project
cd my-project

yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p

**安装 Framer Motion**

yarn add framer-motion

**Tailwindcss 设置**

/** @type {import('tailwindcss').Config} */
export default {
  mode: 'jit', 
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        clash: ['Cabin Sketch"', 'sans-serif'], 
      },
      fontSize: {
        '10xl': '10rem', 
        '11xl': '12rem',
        '12xl': '14rem', 
        '13xl': '16rem', 
      },
      colors: {
        orange: '#FFEFDA',
        pineapple: '#E4FFC0',
      },
    },
  },
  plugins: [],
}

/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

html, body {
    font-family: "Cabin Sketch", sans-serif;
  }

步骤 2：创建 AnimatedImage 组件

在 `src` 文件夹中，创建一个名为 `Hero.tsx` 的新文件：

import React from 'react';
import { motion, MotionValue } from 'framer-motion';

interface AnimationProps {
  x?: MotionValue;
  y?: MotionValue;
  rotateX?: MotionValue;
  rotateY?: MotionValue;
  rotate?: MotionValue;
  rotateZ?: MotionValue;
  scale?: MotionValue;
}

interface AnimatedImageProps {
  src: string;
  alt: string;
  width: number;
  height: number;
  className: string;
  animationProps: AnimationProps;
}

const AnimatedImage: React.FC = ({
  src,
  alt,
  width,
  height,
  className,
  animationProps,
}) => {
  return (
    
      
    
  );
};

export default AnimatedImage;

步骤 3：为 AnimatedImage 创建容器组件

`AnimateImageContainer.tsx`

import React from 'react';
import AnimatedImage from './AnimatedImage';
import { useTransform } from 'framer-motion';

interface AnimatedImagesContainerProps {
  currentFlavor: string;
  flavors: { [key: string]: any };
  mouseX: any;
  mouseY: any;
}

const AnimatedImagesContainer: React.FC = ({
  currentFlavor,
  flavors,
  mouseX,
  mouseY,
}) => {
  return (
    <>
      {/* Can Image */}
      
        
      

      {/* Slice Image */}
      
        
      

      {/* Leaf Image */}
      
        
      

      {/* Additional Slice Image */}
      
        
      
    
  );
};

export default AnimatedImagesContainer;

步骤 4：集成所有 Hero 组件

在 `App.tsx` 中导入并使用 Hero 组件：

import React, { useState, useRef, useEffect } from 'react';
import { useMotionValue } from 'framer-motion';
import { motion } from 'framer-motion'; // Import motion from framer-motion
import Header from './components/Header';
import FlavorDisplay from './components/FlavorDetail';
import AnimatedImagesContainer from './components/AnimatedImagesContainer';
import SwitchFlavorButton from './components/Button';
import images from './assets';

// Define your types
type Flavor = 'orange' | 'pineapple';

interface FlavorDetails {
  name: string;
  color: string;
  textColor: string;
  can: string;
  slice: string;
  leafImage: string;
  sliceImage: string;
}

interface Flavors {
  [key: string]: FlavorDetails;
}

// Define flavors with additional images
const flavors: Flavors = {
  orange: {
    name: 'Orange',
    color: '#FFEFDA',
    textColor: '#FFD399',
    can: images.orange.can,
    slice: images.orange.slices[0],
    leafImage: images.orange.leaf,
    sliceImage: images.orange.slices[1],
  },
  pineapple: {
    name: 'Pineapple',
    color: '#E4FFC0',
    textColor: '#B7EC73',
    can: images.pineapple.can,
    slice: images.pineapple.slices[0],
    leafImage: images.pineapple.slices[2], // you can use leaf images as well
    sliceImage: images.pineapple.slices[1],
  },
};

const App: React.FC = () => {
  const [currentFlavor, setCurrentFlavor] = useState('orange');
  const containerRef = useRef(null);
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);

  const switchFlavor = () => {
    setCurrentFlavor((prev) => (prev === 'orange' ? 'pineapple' : 'orange'));
  };

  useEffect(() => {
    const handleMouseMove = (event: MouseEvent) => {
      const container = containerRef.current;
      if (container) {
        const { left, top, width, height } = container.getBoundingClientRect();
        const x = event.clientX - left;
        const y = event.clientY - top;
        mouseX.set(x / width);
        mouseY.set(y / height);
      }
    };

    window.addEventListener('mousemove', handleMouseMove);
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, [mouseX, mouseY]);

  return (
    
      

      

      

      
    
  );
};

export default App;

🔥 增强体验

使用 React Intersection Observer 触发滚动动画。

使用 Framer Motion Variants 实现可重复使用的动画逻辑。

探索 SVG 动画以添加独特的视觉元素。

🌐 亲自尝试一下

免费下载完整项目👉从 Buymecoffee 免费下载

Github👉 Github

灵感来自 Figma 设计👉 Figma

🎬 观看视频

对于 YouTube 上的完整视频：

使用 React.js 制作 Framer Motion 动画英雄

🖥 关于 Framer Motion

Framer Motion 是一个功能强大的 React 动画库。它提供：

使用 React 组件的声明式动画。

平滑的过渡和交互效果。

简单但高度可定制的 API。

💡 结论

动态设计将静态网站转变为引人入胜的体验。借助 Framer Motion，您可以轻松创建动画来增强您的 React 项目。

我们很乐意听取您的反馈！请在评论中告诉我们您将如何在自己的项目中使用这些动画。

👀 点赞、分享和关注

请继续关注有关 **React.js**、**网页设计** 和 **动画** 的更多教程。别忘了 **订阅** 我们的频道并与其他开发人员 **分享** 本指南！

🔗 有用的链接

Framer Motion 文档

React.js 官方网站

CLIS.CC