需要 React.js 中的 Adob​​e SnapSVG-animator 运行 的解决方法

Question

Adobe 的 SnapSVG 扩展 Animate.cc 2017 能够为网络创建交互性和动画。我目前正在尝试在我的 REACT JS WebApplication 中使用导出的 SnapSVG Adob​​e Animate.cc 项目。

到目前为止我做了什么

1. 已发布来自 SnapSVG 项目的 html 文件（Animate.cc 2017）

2. 从我的 React 应用程序 animate.cc 中的 SnapSVG 项目创建的自定义 json 文件已复制。

3. 在我的 React 应用程序中通过 npm install 安装了 SnapSVG。

4. 通过导入代码导入了从 animate.cc 创建的 html 出版物复制的 js 文件。 （SnapSVG-animator 在 npm 中不可用）

5. 来自 animate.cc/snap svg 项目的自定义 json 文件被异步加载，并将添加到将创建的 SVGAnim(SnapSVGAnimator.min.js) 函数对象中浏览器中的 svg 动画。

代码

import axios from 'axios';
import snapsvg from 'snapsvg';
import { SVGAnim } from './SnapSVGAnimator.min.js';

let jsonfile = "circle.json", 
                responseType: 'json';

componentDidMount(){
    axios.get(jsonfile)
      .then(response => {
        const json = response.request.responseText;
        const animatedSVG = new SVGAnim(json);
      });
  } 

问题

SnapSVGAnimator.min.js 在 JSX 文件中导入时会产生警告和错误。编译这些代码似乎出了问题。

✖ 1557 个问题（110 个错误，1447 个警告）

Answer 1

首先，安装以下库：

npm install --save snapsvg-animator snapsvg-cjs

鉴于您的 json 位于 ../../public/myAnimation.json，请执行以下操作：

import React, { useEffect } from 'react';
import SVGAnim from "snapsvg-animator";
import "snapsvg-cjs";
const myAnimation = require('../../public/myAnimation.json'); //import your json


function Home() {

  const svg = new SVGAnim(
    myAnimation,
    200, //width
    220, //height
    40 //fps
  );

  useEffect(() => {
    const container = document.getElementById('animation');
    container.appendChild(svg.s.node);
  });

  return (
    <div id="main">
      <div id="animation"/>
    </div>
  )



};
export default Home;

我正在使用 React Hooks 因为它很流行 ☺ 但它与 "render" 和 "componentDidMount" 一起工作都是一样的。