需要在React.js

Question

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

到目前为止我做了什么

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

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

3. 在我的React App中从npm install安装了SnapSVG。

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

5. 来自animate.cc/snap svg项目的自定义json文件被加载为异步，并将被添加到SVGAnim（SnapSVGAnimator.min.js）函数对象，该对象将在de browser中创建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钩子是因为它很流行，但是它与“ render”和“ componentDidMount”都一样。