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

更新：我在底部添加了一个codesanbox，对我需要做的事情进行了更详细的解释

所以我不太了解React中的类是如何工作的，我对React还不太熟悉，并且使用过一点useState，但我从来都不知道如何处理类。我正在使用这个react软件包，其中有一个示例，说明如何使用控制器使动画与flare（现在称为rive）交互

我想要实现的是运行不同的动画，或者在将鼠标悬停在生成的画布元素上时再次运行相同的动画。我可以在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）中命名的名称获取动画

我不太理解的高级部分是我们用

这个来设置动画动画运行多长时间？我想我理解应用部分，它将持续时间应用于动画

接下来是这个代码

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

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

作为参考，有一个关于如何使动画交互的教程，但它是为颤振，但它有一些对api的见解

更新

这是我在阅读了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
            }
          }
        }
      }
    }
  }
`

从“React”导入React
从“盖茨比图像”导入Img
从“样式化组件”导入样式化
从“flare react”导入flare组件；
从“./组件/布局”导入布局
const LogoWrapper=styled.div`
宽度：200px；
高度：200px；
`
类wispyController扩展FlareComponent.Controller
{
构造函数（）
{
超级（）；
这是。_Animate=null；
}
初始化（艺术板）
{
这是.u Animate=artboard.getAnimation（“小精灵出现”）；
}
预付款（艺术板，已用）
{
const{u Animate:Animate}=这个；
动画。应用（5，artboard，1.0）；
//继续渲染
返回true；
}
}
类IndexPage扩展了React.Component{
构造函数（）
{
超级（）；
this.state={wispyController:new wispyController（）}；
}
render（）{
const{data}=this.props；
返回(
{data.allSanityBlogPost.edges.map（{node:post}）=>（
在大多数面向对象编程语言中，React上下文中的类可以被视为类，它们是创建对象的蓝图。为了让语言知道如何创建对象以及创建对象时要做什么，它需要一个构造函数方法。此构造函数方法调用一个名为
super（）的特殊方法
以便调用它所扩展的类的构造函数，在本例中为
FlareComponent.Controller

方法advance将被调用，以添加到捕获的行走时间中，该时间是该类保持跟踪的时间

问题之一是您试图直接设置组件的状态，而不是使用setState

<>我强烈建议你在继续做这项工作之前，先去做一些基本的反应，这会帮助你找到你需要的合适的基础。
你的问题可以用一点重点。也许试着建立一个CODEPDEN来帮助你把它缩小到一个问题上。我正在努力实现。我在读了一些书之后更新了我的问题，我仍然被卡住了，希望你能给我指出正确的方向，我被卡住的部分是在IndexPage类中设置状态。我想我其他部分都是对的。我错过了super（）.所以我补充说，我现在陷入困境的是，我似乎不知道如何再次运行动画我不知道如何运行控制器，或控制它，使其在鼠标事件上运行单击或悬停。
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
            }
          }
        }
      }
    }
  }
`