EasingAnimation 라이브러리

import * as React from "react";
import * as ReactDOM from "react-dom";
import EasingAnimation from "../../../src";

// Bar component (wrapped component)
interface IBarProps {
  currentValue: number;
}
class Bar extends React.Component<IBarProps> {
  public static defaultProps: IBarProps = {
    currentValue: 0,
  };

  public render() {
    const { currentValue } = this.props;
    const rounded = Math.round(currentValue);

    const styles = {
      bar: {
        backgroundColor: "#2ecc71",
        height: "100px",
        position: "relative" as "relative",
        width: `${currentValue}%`,
      },
      digits: {
        color: "#2ecc71",
        fontSize: "30px",
        position: "absolute" as "absolute",
        right: "0",
        top: "50%",
        transform: "translate(80px, -50%)",
      },
    };

    return (
      <div style={styles.bar}>
        <div style={styles.digits}>{rounded}%</div>
      </div>
    );
  }
}

// Page component (parent component)
interface IPageProps {
  initialValue: number;
}
interface IPageState {
  value: number;
}
class Page extends React.Component<IPageProps, IPageState> {
  constructor(props: IPageProps) {
    super(props);
    const initialState = {
      value: props.initialValue,
    };
    this.state = initialState;
    this.handleClick = this.handleClick.bind(this);
  }

  public handleClick(value: number) {
    this.setState({ value });
  }

  public render() {
    const styles = {
      container: {
        margin: "0 auto",
        maxWidth: "1366px",
      },
    };

    return (
      <div style={styles.container}>
        <EasingAnimation
          component={Bar}
          value={this.state.value}
          options={{
            duration: 1500,
          }}
        />
        <button onClick={() => { this.handleClick(30); }}>30%</button>
        <button onClick={() => { this.handleClick(50); }}>50%</button>
        <button onClick={() => { this.handleClick(75); }}>75%</button>
      </div>
    );
  }
}

const Props = {
  initialValue: 10,
};

ReactDOM.render(
  <Page {...Props} />,
  document.getElementById("app")!,
);

 

 

참고할 사이트

stackoverflow.com/questions/12592279/typeerror-p-easingthis-easing-is-not-a-function