使用 framer-motion 和 React.js 的动画滑动页面画廊

这是一个使用 framer-motion 和 React.js 技术实现的动画滑动页面画廊应用。它具有以下特点：

• 使用 React.js 构建，具有良好的组件化结构；
• 使用 framer-motion 实现各种动画效果；
• 具有响应式布局，在不同设备上呈现良好的用户体验；
• 支持移动端滑动事件，提供更友好的交互方式。

技术栈

• React.js
• framer-motion
• styled-components
• react-icons

实现过程

首先我们需要用 create-react-app 工具来创建一个 React.js 项目：

npx create-react-app gallery-app
cd gallery-app

然后安装 framer-motion 和 styled-components：

npm install framer-motion styled-components

接着我们可以开始创建 React 组件了。我们创建一个 Gallery 组件，用于呈现画廊页面。该组件包含了一个图片列表，通过滑动来实现左右翻页的效果。

import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
import { Container, Slide, SlideWrapper, Arrow, ArrowWrapper } from './Gallery.style';

const IMAGE_WIDTH = 500;
const TRANSITION_DURATION = 0.5;

const Gallery = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const prevSlide = () => {
    setCurrentIndex((currentIndex - 1 + images.length) % images.length);
  };

  const nextSlide = () => {
    setCurrentIndex((currentIndex + 1) % images.length);
  };

  return (
    <Container>
      <ArrowWrapper left>
        <Arrow onClick={prevSlide}><FaArrowLeft /></Arrow>
      </ArrowWrapper>
      <SlideWrapper $currentIndex={currentIndex} $translateX={-IMAGE_WIDTH * currentIndex}>
        {images.map((src, index) => (
          <Slide key={`slide-${index}`} $width={IMAGE_WIDTH}>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: TRANSITION_DURATION }}
            >
              <img src={src} alt={`image-${index}`} />
            </motion.div>
          </Slide>
        ))}
      </SlideWrapper>
      <ArrowWrapper right>
        <Arrow onClick={nextSlide}><FaArrowRight /></Arrow>
      </ArrowWrapper>
    </Container>
  );
};

export default Gallery;

在上面的代码中，我们定义了三个 styled-components 组件：Container、SlideWrapper 和 Slide。它们分别用于包裹整个画廊、每个图片的容器和每个图片元素。

在 SlideWrapper 组件中，我们使用了 framer-motion 的动画效果，实现了图片的滑动切换效果。我们设置 $translateX 属性为当前图片索引乘以图片宽度的负值，即可实现图片滑动的效果。

而在 ArrowWrapper 组件中，我们设置了一个布尔类型的 left 或 right 属性，用于控制箭头按钮的位置和方向。Arrow 组件则用于呈现箭头图标，并响应点击事件来切换图片。

最后，我们在 App.js 文件中使用 Gallery 组件，并传入一些图片路径：

import Gallery from './Gallery';

const images = [
  'https://picsum.photos/id/1016/500/300',
  'https://picsum.photos/id/1021/500/300',
  'https://picsum.photos/id/1032/500/300',
  'https://picsum.photos/id/1043/500/300',
];

function App() {
  return (
    <div className="App">
      <Gallery images={images} />
    </div>
  );
}

export default App;

效果演示

你可以访问我们的在线演示页面体验该应用：https://codesandbox.io/s/awesome-mendeleev-tw0oy

总结

通过上述实现过程，我们使用了 framer-motion 和 React.js 技术实现了一个响应式的动画滑动页面画廊。希望这篇文章能对你学习 React 和动画效果有所帮助。