如何在 Flare React 包中实现类控制器选项

Question

更新：我在底部添加了一个 codesanbox，其中更详细地说明了我需要做什么。

所以我不太了解 React 中的类是如何工作的，我是 React 的新手并且使用过 useState 一点点，但从来不知道如何处理类。我正在使用这个 react 包，它有一个示例，说明如何使用控制器使您使用现在称为 rive 的flare 构建交互式动画。https://github.com/2d-inc/Flare-React#readme

我想要实现的是当我将鼠标悬停在生成的画布元素上时，要么运行不同的动画，要么再次运行相同的动画。我可以在 flate(rive) 中创建第二个动画，它仍然会在同一个 .flr 文件中输出，然后我应该能够在控制器中引用它并在悬停时运行它，只是坚持如何做那部分，或者甚至让这个控制器工作。需要注意的一件事是我可以让动画在没有控制器的情况下正常运行。

在文档中，他们有这个示例代码

class PenguinController extends FlareComponent.Controller
{
    constructor()
    {
        super();
        this._MusicWalk = null;
        this._Walk = null;
        this._WalkTime = 0;
    }

    initialize(artboard)
    {
        this._MusicWalk = artboard.getAnimation("music_walk");
        this._Walk = artboard.getAnimation("walk");
    }

    advance(artboard, elapsed)
    {
        // advance the walk time
        this._WalkTime += elapsed;
        const { _MusicWalk: musicWalk, _Walk: walk, _WalkTime: walkTime } = this;

        // mix the two animations together by applying one and then the other (note that order matters).
        walk.apply(walkTime % walk.duration, artboard, 1.0);
        // if you want to slowly disable the head bobbing (musicWalk animation) you could ramp down the 
        // final argument (the mix argument) to 0.0 over some time. For now we're mixing at full strength.
        musicWalk.apply(walkTime % musicWalk.duration, artboard, 1.0);

        // keep rendering
        return true;
    }
}

首先什么是构造函数？超级是什么意思？那么他们在构造函数中定义了什么，是某种状态，我如何确定在这里定义什么？

对于初始化，我假设我将它与上面的状态匹配，并通过我在flare(rive)中命名的名称获取动画

我不太明白的高级部分是我们将动画设置this._WalkTime += elapsed;为动画运行多长时间？我想我了解应用部分，它将持续时间应用于动画。

接下来它有这个代码

class MyComponent extends React.Component
{
    constructor()
    {
        this.state = { penguinController: new PenguinController() };
    }

    render()
    {
        return <FlareComponent controller={this.state.penguinController} /*... more properties here ...*/ />;
    }
}

这是我目前尝试的代码我收到以下错误

TypeError: Cannot set property 'state' of undefined

import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import FlareComponent from 'flare-react';
import styled from 'styled-components'
import Header from "./header"
import "../sass/index.scss"

const LogoWrapper = styled.div`
  width:200px;
  height:200px;
`

class AnimationController extends FlareComponent.Controller
{
    constructor()
    {
        super();
        this._MusicWalk = null;
    }

    initialize(artboard)
    {
        this._MusicWalk = artboard.getAnimation("Wispy Appear");
    }

    advance(artboard, elapsed)
    {

        const { _MusicWalk: musicWalk } = this;

        musicWalk.apply(musicWalk.duration, artboard, 1.0);

        // keep rendering
        return true;
    }
}

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)


        this.state = { AnimationController: new AnimationController() };


  return (
    <>
      <LogoWrapper>
        <FlareComponent width={200} height={200} animationName="Wispy Appear" controller={this.state.AnimationController} file="/wispy-2.flr"/>
      </LogoWrapper>

        <main className="main-wrapper">{children}</main>
        <footer>
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.org">Gatsby</a>
        </footer>
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

作为参考，有一个关于如何制作交互式动画的教程，但它是针对颤振的，但它对 api https://medium.com/rive/building-a-responsive-house-with-flare-flutter-有一些见解31af823ba805

更新

这是我尝试阅读 es6 中的类后新尝试的代码，我仍然需要学习更多。

那么我如何在单击或悬停或任何事件时运行第二个动画。动画现在运行一次，但我不知道如何使用控制器？

import React from "react"
import Img from 'gatsby-image'
import styled from "styled-components"
import FlareComponent from 'flare-react';
import Layout from "../components/layout"


const LogoWrapper = styled.div`
  width:200px;
  height:200px;
`

class wispyController extends FlareComponent.Controller
{
    constructor()
    {
        super();
        this._Animate = null;
    }

    initialize(artboard)
    {
        this._Animate = artboard.getAnimation("Wispy Appear");
    }

    advance(artboard, elapsed)
    {

        const { _Animate: animate } = this;
        animate.apply(5, artboard, 1.0);

        // keep rendering
        return true;
    }
}


class IndexPage extends React.Component  {

  constructor()
  {
      super();
      this.state = { wispyController: new wispyController() };
  }

  render(){
    const {data} = this.props;

    return(

      <Layout>

        <LogoWrapper>
          <FlareComponent width={200} height={200} animationName="Wispy Appear" controller={this.state.wispyController} file="/Wispy.flr"/>
        </LogoWrapper>



    {data.allSanityBlogPost.edges.map(({ node: post }) => (  
      <article key={post.id}>
        <h1>{post.name}</h1>
        <img src={post.imageGif.asset.url}/>
      </article>
    ))}


      </Layout>
    )

  }

}

export default IndexPage

export const query = graphql`
  query IndexQuery {
    allSanityBlogPost {
      edges {
        node {
          name
          id
          imageGif {
            asset {
              url
            }
          }
        }
      }
    }
  }
`

好的，希望有人可以在这里提供帮助，我制作了一个代码和框，以便有人可以看到我想要实现的目标。有两个动画，在页面上你可以看到第一个有一个控制器，应该混合这两个动画，然后是另外两个动画。我想要发生的是第一个动画运行，然后第二个在悬停时运行。这是代码沙箱https://codesandbox.io/s/frosty-water-jnj9m

Answer 1

React 上下文中的类可以被认为是大多数面向对象编程语言中的类，它们是创建对象的蓝图。为了让语言知道我们创建它时如何以及要做什么，它需要一个构造函数方法。此构造函数方法正在调用一个特殊方法，super()以便它调用它所扩展的类的构造函数，在本例中FlareComponent.Controller

将调用 advance 方法来添加班级跟踪的捕获步行时间。

问题之一是您尝试直接设置组件的状态，而不是使用 setState https://reactjs.org/docs/react-component.html

我强烈建议您在继续之前先温习一下 React 基础知识，这将真正帮助您获得所需的适当基础。