带有反应的AnimeJs实现不起作用答案

【问题标题】：AnimeJs implementation with react doesn't work带有反应的AnimeJs实现不起作用
【发布时间】：2020-01-15 16:45:16
【问题描述】：

我在我的 react 应用中实现了一个简单的 Anime Js 文本动画；我还有其他动漫 Js 项目表现完美，但我只是没有看到这个问题，以及为什么它不起作用。

TextColourChangeLoader.js

import React from 'react';

import './styles/TextColourChangeLoader.css';

import anime from 'animejs';

export default class TextColourChangeLoader extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            text: "",
            play: false
        }
    }

    componentDidMount() {
        this.setState({
            text: this.props.textToRender,
            play: true
        })
    }

    componentWillUnmount() {
        this.setState({
            text: '',
            play: false
        })
    }

    playAnimeColourChange = () => {
        if(this.state.play) {
            anime({
                targets: '.loader-letter',
                delay: anime.stagger(100),
                duration: 1000,
                scale: anime.stagger(2, {easing: "easeInElastic"}),
                color: '#7DE2FC',
                direction: 'alternate',
                easing: 'easeInOutElastic(1,.8)',
                loop: true,
                loopComplete: function() {
                    console.log('done')
                }
            });
        }
    }

    render() {
        this.playAnimeColourChange();
        return (
            <div id="loader-text-holder">
                {this.state.text.split('').map((letter, i) => {
                    return <span id={letter === " " ? "loader-letter-space" : "loader-letter"+i} key={i} className="loader-letter text">{letter}</span>
                })} 
                {this.playAnimeColourChange()}
            </div>
        )
    }
}

Example.js

import React from 'react';

import './styles/ViewLoaderWithText.css';
import anime from 'animejs';

import TextColourChangeLoader from './TextColourChangeLoader';


export default class ViewLoaderWithText extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            play: false
        }
    }

    componentDidMount() {
        this.setState({
            play: true
        })
    }


    playAnime = () => {
        if(this.state.play) {
            let loaderAnime = anime({
                targets: '.view-loader-shape',
                delay: anime.stagger(100, {start: -100}),
                translateY: [{value: -25, easing: 'easeInCubic'}, {value: 0, easing: 'easeOutCirc'}],
                background: '#7DE2FC',
                direction: 'alternate',
                easing: 'easeInOutElastic(1,.8)',
                duration: 1000,
                loop: true,
                autoplay: true
            });            
        }
    }

    render() {
        return (
            <div id="view-loader-wrapper">
                <div id="loader-shape-holder">
                    <span className="view-loader-shape" id="view-loader-shape1"></span>
                    <span className="view-loader-shape" id="view-loader-shape2"></span>
                    <span className="view-loader-shape" id="view-loader-shape3"></span>
                    <span className="view-loader-shape" id="view-loader-shape4"></span>
                    <span className="view-loader-shape" id="view-loader-shape5"></span>
                </div>
                <TextColourChangeLoader textToRender="Verifying email"/>
                {this.playAnime()}
            </div>
        )
    }
}

Example.js 文件中的动漫 js 实例可以正常工作；但是 TextColourChangeLoader.js 动画没有运行。每次循环使用 loopComplete 回调选项完成时，我都尝试登录到控制台，它显示循环正在运行，但是动画没有。我也试过只运行 TextColourChangeLoader.js 动画，但这仍然不起作用。对此有什么可能的解释？任何事情都有帮助。

【问题讨论】：

标签： css reactjs anime.js

【解决方案1】：

我认为这不起作用，因为您正在尝试为尚未首先加载的组件设置动画。记住 React 中的生命周期流程，我更喜欢使用 React Hooks 来解决问题，这是这样的：使用 useEffect 钩子传递 animate 函数，以便首先渲染组件然后执行函数，而不是相反命令。我猜类组件中的等价物是componentDidMount（），因此请尝试重构您的代码，以便将anime（）与componentDidMount连接起来。结论，主要概念是先渲染组件，然后执行anime()。对不起我的英语水平。

【讨论】：