react motionで実現したいアニメーションがあるのですがreact　motionを使うこと自体が初めてで全然どのようにしたらそれが実現できるかわからず困っております。

具体的にはまず一つの円を表示してその円をクリックすると３つの小さな円が展開される　というアニメーションです。

このような感じです。
どなたかアドバイスをいただけるとありがたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

react-motion の使い方ですが、まず、変化させたいコンポーネントを Motion で囲みます。
Motion には defaultStyle と style の二つのプロパティが設定できます。
defaultStyle で設定した値が style で設定した値に徐々に変化していき interpolatingStyle に代入されます。
以下のコードは circle の半径が 10 から 65 に変化します。

js
1class extends Component {
2    render() {
3        return <Motion
4            defaultStyle={{
5                r: 10,
6            }}
7            style={{
8                r: spring(65),
9            }}
10        >
11            {interpolatingStyle =>
12                <svg
13                    onClick={event =>
14                        this.setState({
15                            clicked: false,
16                        })
17                    }
18                    viewBox="0 0 300 150"
19                >
20                    <circle r={interpolatingStyle.r} />
21                </svg>
22            }
23        </Motion>
24    }
25}