使用 Framer 和 ReactJS 的动画滑动图片库

本文介绍了如何使用 Framer 和 ReactJS 创建一个动画滑动的图片库。

简介

Framer 是一个用于创建交互式界面的工具，它包含了一些强大的动画功能。ReactJS 则是一种用于构建用户界面的 JavaScript 库。

在本文中，我们将使用 Framer 和 ReactJS 来创建一个动画滑动的图片库，其中用户可以使用手势来浏览这些图片。

技术栈

• Framer
• ReactJS
• Hammer.js

准备工作

首先，我们需要安装 Framer 和 ReactJS。可以使用 npm 来安装它们：

npm install framer react

然后，我们需要安装 Hammer.js，用于处理用户的手势操作：

npm install hammerjs

创建组件

我们将创建一个名为 Slider 的组件，这个组件将包含一个图片列表，用户可以通过手势来浏览这些图片。

首先，让我们来创建一个基本的 React 组件骨架：

import React, { Component } from 'react';

class Slider extends Component {
  render() {
    return (
      <div className="slider">
        {/* 图片列表 */}
      </div>
    );
  }
}

export default Slider;

在 render 方法中，我们返回一个 div 元素，这个元素包含一个 className 为 slider 的 CSS 类名。

接下来，我们需要将图片列表呈现出来。为了方便起见，我们假设这个图片列表已经以以下格式存在：

const images = [
  {
    src: 'img1.jpg',
    caption: 'Image 1'
  },
  {
    src: 'img2.jpg',
    caption: 'Image 2'
  },
  {
    src: 'img3.jpg',
    caption: 'Image 3'
  }
];

我们会将这个列表作为 Slider 组件的一个属性来传递。然后，我们可以使用 map 方法来将这些图片呈现出来：

class Slider extends Component {
  render() {
    const { images } = this.props;
    return (
      <div className="slider">
        {images.map(image => (
          <div className="slider__item">
            <img src={image.src} alt={image.caption} />
          </div>
        ))}
      </div>
    );
  }
}

在这个方法中，我们使用了 ES6 的解构赋值语法来获取 images 属性。然后，我们使用 map 方法对这个列表进行遍历，将每个图片呈现为一个 div 元素，其中包含一个带有图片地址和标题的 img 元素。

现在，我们已经成功地创建了一个包含图片列表的 React 组件。

添加手势控制

下一步，我们需要添加手势控制功能，使用户可以通过手势来浏览图片。

首先，我们需要在组件的 state 中记录当前图片的索引：

class Slider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentSlideIndex: 0
    };
  }

  render() {
    // ...
  }
}

在这个构造函数中，我们初始化了 currentSlideIndex 为 0。

接下来，我们需要在组件的 componentDidMount 方法中初始化 Hammer.js，并设置手势操作的回调函数：

import Hammer from 'hammerjs';

class Slider extends Component {
  constructor(props) {
    // ...
    this.hammer = null;
    this.handleHammer = this.handleHammer.bind(this);
  }

  componentDidMount() {
    this.hammer = new Hammer(this.slider);
    this.hammer.on('swipeleft swiperight', this.handleHammer);
  }

  handleHammer(event) {
    const { images } = this.props;
    const { currentSlideIndex } = this.state;

    // 根据手势方向计算要显示的图片索引
    let newIndex = currentSlideIndex;
    if (event.type === 'swipeleft') {
      newIndex = Math.min(currentSlideIndex + 1, images.length - 1);
    } else if (event.type === 'swiperight') {
      newIndex = Math.max(currentSlideIndex - 1, 0);
    }

    // 更新组件的状态，显示新的图片
    if (newIndex !== currentSlideIndex) {
      this.setState({ currentSlideIndex: newIndex });
    }
  }

  render() {
    // ...
  }
}

在 componentDidMount 方法中，我们初始化了 Hammer.js，并将 swipeleft 和 swiperight 事件的回调函数设置为 handleHammer。这个回调函数将根据手势操作计算新的图片索引，然后通过 setState 方法更新组件的状态。

在 handleHammer 方法中，我们首先获取 images 和当前图片的索引。然后，我们根据手势的方向计算出新的图片索引。最后，我们将新的图片索引与当前索引进行比较，如果不同，就通过 setState 方法更新组件的状态。

现在，我们已经成功地在组件中添加了手势控制功能。

添加动画效果

最后，我们需要为组件添加动画效果，使用户在切换图片时看到平稳的过渡。

我们可以使用 Framer 的动画功能来实现这个效果。首先，让我们添加 Framer 的依赖：

npm install framer-motion

然后，在 Slider 组件中，我们需要记录上一个和当前图片的索引，以及上一个和当前图片元素的引用：

import { motion } from 'framer-motion';

class Slider extends Component {
  constructor(props) {
    // ...
    this.prevSlideIndex = null;
    this.currentSlideIndex = 0;
    this.prevSlide = null;
    this.currentSlide = null;
  }

  componentDidMount() {
    // ...
  }

  handleHammer(event) {
    const { images } = this.props;
    this.prevSlideIndex = this.currentSlideIndex;

    // 计算新的图片索引
    // ...

    this.currentSlideIndex = newIndex;
    this.prevSlide = this.currentSlide;
    this.currentSlide = this[`slide${newIndex}`];
    // ...
  }

  render() {
    const { images } = this.props;
    const { currentSlideIndex } = this.state;

    return (
      <div ref={el => (this.slider = el)} className="slider">
        {images.map((image, index) => (
          <motion.div
            key={index}
            className="slider__item"
            ref={el => (this[`slide${index}`] = el)}
            animate={
              index === currentSlideIndex
                ? { x: 0 }
                : index < currentSlideIndex
                ? { x: '-100%' }
                : { x: '100%' }
            }
            transition={{ duration: 0.3 }}
          >
            <img src={image.src} alt={image.caption} />
          </motion.div>
        ))}
      </div>
    );
  }
}

在 render 方法中，我们将每个图片元素包装在一个 motion.div 元素中，通过 ref 属性将这些元素的引用保存在 slide0、slide1、slide2 等属性中。

然后，在 handleHammer 方法中，我们记录上一个和当前图片的索引，以及上一个和当前图片元素的引用。

最后，在 motion.div 元素中，我们使用 animate 属性来控制滑动动画。如果当前元素和目标元素是同一个，我们将其 x 轴坐标设为 0；如果当前元素在目标元素左边，我们将其 x 轴坐标设为 -100%；如果当前元素在目标元素右边，我们将其 x 轴坐标设为 100%。我们将这些属性的值传递给 animate 属性，Framer 将自动为我们执行动画过渡效果。

现在，我们已经成功地添加了动画效果。用户在切换图片时会看到平稳的滑动效果。

总结

在本文中，我们介绍了如何使用 Framer 和 ReactJS 创建一个动画滑动的图片库，其中用户可以使用手势来浏览这些图片。我们使用 Hammer.js 处理用户手势操作，使用 Framer 的动画功能实现平稳的滑动过渡效果。

完整代码请见：https://github.com/LiXuanqi/react-slider-demo。