需要解决在React.js中运行Adobe SnapSVG-animator的问题
需要解决在React.js中运行Adobe SnapSVG-animator的问题
提问于 2017-08-14 23:47:38
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安装安装了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);
});
} Problem
当导入到JSX文件中时，SnapSVGAnimator.min.js会产生警告和错误。看起来在编译这些代码时出了点问题。
✖1557问题(110个错误，1447个警告)
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-06 02:38:45
首先，安装以下库：
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“和”render“。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45678310
复制相关文章
相似问题