5

更新：これの最後にcodesanboxを追加し、何をする必要があるかについてのより詳細な説明を追加しました。

クラスが React でどのように機能するかよくわかりません。私は反応するのが初めてで、useState を少し使用しましたが、クラスをどうするかはわかりません。このreactパッケージを使用しています。これには、コントローラーを使用してアニメーションをインタラクティブにする方法の例があり、現在はriveと呼ばれるフレアで構築されています。https://github.com/2d-inc/Flare-React#readme

私が達成したいのは、生成されたキャンバス要素にカーソルを合わせたときに、別のアニメーションを実行するか、同じアニメーションを再度実行することです。同じ .flr ファイルに出力される flate(rive) で 2 番目のアニメーションを作成できます。その後、コントローラーでそれを参照し、ホバーで実行できるようにする必要があります。このコントローラーを機能させることさえできます。注意すべきことの 1 つは、コントローラーがなくてもアニメーションを正常に実行できることです。

ドキュメントには、このサンプルコードがあります

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;
    }
}

そもそもコンストラクタとは？超 とはどういう意味ですか? 次に、コンストラクターで何を定義していますか、それは何らかの状態ですか、ここで何を定義するかをどのように決定しますか?

初期化されたものについては、上記の状態に一致すると仮定し、フレア（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 のクラスを読み込もうとした後に試みた新しいコードです。まだ詳細を学ぶ必要があります。

では、クリックやホバーなどのイベントで 2 番目のアニメーションを実行するにはどうすればよいでしょうか。アニメーションが 1 回実行されるようになりましたが、コントローラーの使用方法がわかりません。

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
            }
          }
        }
      }
    }
  }
`

わかりました誰かがここで助けてくれることを願っています.codesandboxを作成したので、誰かが私が達成しようとしていることを見ることができます. ページには 2 つのアニメーションがあり、最初のアニメーションは 2 つをミキシングするコントローラーを持ち、次に他の 2 つのアニメーションが表示されます。私がやりたいのは、最初のアニメーションの実行と、次にホバーで実行する 2 番目のアニメーションです。コードサンドボックスはこちらhttps://codesandbox.io/s/frosty-water-jnj9m

4

1 に答える 1