01 · ツール
どれもひとつの仕事を最後までやり切ります。単体でも、組み合わせても。ぴったり噛み合うようにつくられています。
状態管理React + React Native
フックひとつで共有。保存は自分のタイミングで。
Provider もアクションもリデューサーもなしで、コンポーネントが同じ値を読み取ります。再レンダリングは選択した値が変わったときだけ。保存や復元は、指示したときにだけ行われます。
npm install @kkwaenggwari/restateライブ
左右どちらかのボタンを押してみてください。2 つのパネルは同じ restate() の値を読み取って一緒に変わり、送料バッジは選択した値だけを監視しています。
ヘッダー
2 点がカート内
商品リスト
2 点がカート内
モーションエンジンReact DOM
ひとつの値が、画面全体を指揮する。
React Native の Animated でおなじみの timing、spring、interpolate を React DOM で。ひとつの値で多くの要素のスタイルを動かし、フレームごとの React レンダリングはありません。
npm install @kkwaenggwari/animatedライブ
スライダーが変えるのはひとつの Value だけ。12 個の図形の位置、回転、大きさ、角の丸みはすべてそこから導かれます。スプリングを押して、動いている途中でスライダーをつかんでみてください。
完成済みコンポーネントReact · React Native
難しいインタラクションは、もう完成しています。
回転する数字、移動するハイライト、変わった項目だけが動くリスト、シート、スワイプアクション。データを渡すだけで、Provider も初期化の呼び出しも要りません。React でも React Native でも動きます。
npm install @kkwaenggwari/animated-chorus @kkwaenggwari/animatedライブ
期間を選んでみてください。MotionHighlight がそこへ移動し、MotionNumber が回転し、ProgressRing が満ち、MotionList は変わった行だけを動かします。
訪問数
1,284
サンプルデータ
02 · アンサンブル
このステージは Animated でつくられています。スクロールの進み具合を持つひとつの Value が、48 個の図形の位置、回転、大きさ、不透明度を同時に指揮します。
散らばった点が集まり、銅鑼の輪になります。
輪は 3 つに分かれ、それぞれのツールの色をまといます。
状態のつながり、モーションの軌跡、コーラスの柱へと姿を変えます。
すべてが整列し、同じビートに着地します。
progress
03 · 原則
最初からラップする Provider やグローバルな設定は要りません。アプリが必要としたときに、必要な機能だけを足します。
更新されるのは、選択した値が変わったコンポーネント、値を使う要素、そして動いた行だけです。
中断されたモーションは画面に見えている状態から続き、購読やアニメーションは持ち主がいなくなれば解放されます。
すべてのパッケージに TypeScript の型定義が付属し、ドキュメントは 39 の言語で読めます。
04 · 名前の由来
ケンガリ(Kkwaenggwari)は、韓国の打楽器「꽹과리」の名前をそのまま響かせた名前です。韓国の伝統芸能・農楽(プンムル)では、先頭でケンガリを打つ奏者が合奏全体のリズムを導きます。私たちのツールも同じでありたいと考えています。小さくても明快に、アプリ全体をひとつのビートでそろえるために。
kkwaenggwariケンガリ(Kkwaenggwari)という名前は、韓国の小さな銅鑼「꽹과리(ケンガリ)」に由来します。ばちで打つと明るく澄んだ音が響くこの楽器のように、小さくても存在感のあるオープンソースのツールをつくっています。