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

以下方法介绍了如何使用 framer 和 ReactJS 创建动画滑动图片库。

先决条件：

1. JavaScript 知识(ES6)
2. 了解 HTML/CSS。
3. ReactJS 的基础知识。

创建 React 应用程序并安装模块：

• 步骤 1：使用以下命令创建 React 应用程序：

  $ npx create-react-app image-gallery

• 第 2 步：创建项目文件夹(即image-gallery )后，使用以下命令移至该文件夹。

  $ cd image-gallery

• 第 3 步：添加您在项目中需要的 npm 包。

  $ npm install framer

打开 src 文件夹并删除以下文件：

1. 标志.svg
2. serviceWorker.js
3. 设置测试.js
4. App.test.js(如果有)
5. 应用程序.js
6. 应用程序.css

项目结构：它将如下所示。

项目结构

index.js

import React from "react";
import { render } from "react-dom";
  
// Importing framer components : Frame and Page
import { Frame, Page } from "framer";
import "./index.css";
  
export function MyComponent() {
  // Object array of sliding gallery pages data
  const pages = [
    {
      index: 1,
      // Source of the image
      src:
        "https://media.geeksforgeeks.org/wp-content/" + 
        "cdn-uploads/gfg_200x200-min.png",
      // background color of the page
      background: "#1e1e1e"
    },
    {
      index: 2,
      src:
        "https://media.geeksforgeeks.org/wp-content/" + 
        "cdn-uploads/20190710102234/download3.png",
      background: "#fcfcfc"
    },
    {
      index: 3,
      src:
        "https://yt3.ggpht.com/ytc/AAUvwnjJqZG9PvGfC3Go"+
        "V27UlohMeBLxyUdhs9hUbc-Agw=s900-c-k-c0x00ffffff-no-rj",
      background: "#bcbcbc"
    }
  ];
  
  return (
    // Framer component with some of its attributes
    
      {/* Map through the Pages object array and 
          rendering each page with its specified 
          image and background-color
       */}
      {pages.map((page) => (
        // Framer "Frame" component
        
          
        
      ))}
    
  );
}
  
// Export default MyComponent;
// rendering "MyComponent"
const rootElement = document.getElementById("root");
render(, rootElement);

索引文件

#root {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 85, 255, 1);
  perspective: 1000px;
  cursor: ew-resize;
}
  
body {
  font-family: sans-serif;
  text-align: center;
  margin: 0;
}
  
img {
  border-radius: 100%;
  height: 300px;
  width: 300px;
  margin-top: 25px;
  justify-content: center;
  align-items: center;
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

$ npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。

参考： https://codesandbox.io/s/animated-sliding-image-gallery-9pplj