需要在 React.js 中运行的 Adobe SnapSVG-animator 的解决方法答案

【问题标题】：Need a workaround for Adobe SnapSVG-animator running in React.js需要在 React.js 中运行的 Adobe SnapSVG-animator 的解决方法
【发布时间】：2018-01-22 12:23:09
【问题描述】：

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

到目前为止我做了什么

从 SnapSVG 项目中发布的 html 文件（Animate.cc 2017）
从我的 React 应用程序中 animate.cc 中的 SnapSVG 项目创建的复制自定义 json 文件。
在我的 React 应用程序中从 npm install 安装了 SnapSVG。
通过导入代码导入了从 animate.cc 创建的 html 出版物复制的 js 文件。（npm 中不提供 SnapSVG-animator）
来自 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 个警告）

【问题讨论】：

看起来您正在使用 eslint 或其他一些 linter 来检查缩小的代码 - 这是行不通的。您应该从 linting 中排除任何缩小的代码。
感谢您的评论。我将缩小后的代码放在一个 unminify.js 文件中，但出现了同样大量的警告和错误。
你不能对缩小后的代码进行 lint，因为它一点也不漂亮，它可以工作而且很小。因此，您需要对未缩小的代码进行 lint 或从 linting 中排除缩小版本。
我添加了 .eslintignore 文件并忽略了 SnapSVGAnimator.min.js 的 linting。错误和警告成功消失。现在 snapsvg.js 中出现了一个与此问题相关的新错误github.com/adobe-webplatform/Snap.svg/issues/341
现在添加了 snapsvg-cjs 而不是来自 NPM 的 snapsvg，并且 snapsvg 现在可以正常工作。现在唯一的问题是错误再次出现Uncaught (in promise) TypeError: _SnapSVGAnimator.SVGAnim is not a constructor

标签： reactjs animation svg snap.svg

【解决方案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”一起工作。

【讨论】：