在React组件中存储函数返回的位置？

Question

我正在尝试在react组件中使用anime.js。动画不能正常工作（不完全旋转，冻结，似乎跳过帧...）并且受到窗口大小调整的影响，我调整动画的时间越长，直到它冻结为止。

这是我的反应部分：

import React from "react";
import { SplitButton, MenuItem } from "react-bootstrap";
import * as animationOptions from "../../animations";

export default class ImageComponent extends React.Component {
    render() {

        let tttt = animationOptions.textAnim1();
        let iiii = animationOptions.imageAnim1();
        console.log(tttt);


        return (
            <div>

                <div id="canvas">
                    <p id="text" className="tttt">some text</p>
                    <image id="image" className="iiii" src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
                </div>
            </div>
        );
    }
}

我导入的动画：

import anime from "animejs";

export function textAnim1(){ return anime({
    targets: '#text',
    rotate: 360,
    duration: 2000,
    loop: true,
    autoplay:true,
  });
 }; 

export function imageAnim1(){ return anime({
    targets: '#image',
    translateX: 250,
    duration: 4300,
    loop: true,
    autoplay:true,
  });
}; 

不确定问题是我如何导出函数动画或如何定义保存函数返回的变量....没有错误，但这里是let tttt的日志：

以下是anime.js的基本示例： https://github.com/juliangarnier/anime/

请注意，我需要在组件中使用tttt来触发函数return let tttt = animationOptions.textAnim1();

中的tttt.play（）或.pause（）等方法

Answer 1

这将有效：

componentDidMount(){
  animationOptions.textAnim1();
  animationOptions.imageAnim1();
}

render(){
  return (
    <div>
      <div id="canvas">
        <p id="text" >some text</p>
        <img id="image" src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
      </div>
    </div>
    );
  }
}

检查CodeSandbox上正在运行的代码。