mz-logo

豆蔵デベロッパーサイト

開発に役立つチュートリアルやテクニック・ノウハウを豆蔵メンバーがご紹介します!

記事のタグから検索 ...(全てのタグを表示)

本サイトは本家の豆蔵ホームページではありません。会社概要、製品紹介等はこちら、 募集中の求人情報はこちらをご覧ください。

mameka豆香の豆知識 image for mameka column
Animating Components Seamlessly with React SpringでUI大暴れ!
やっほー!豆香だよ!最近UIが踊ってないと落ち着かない体質になってきたんだよね。静止画みたいなボタンを見ると「お前も跳ねろ!」って肩をゆさぶりたくなる病。そこで登場するのが今回のキーワード、『Animating Components Seamlessly with React Spring』!あいつ、スプリングの名に恥じないバネ力を秘めてるぞ。
コードにちょいっとhookを書くだけで、コンポーネントがぴょんぴょん跳ねたり、フェードインしたり、ぐるんぐるん回りだす。最初にuseSpringを試した瞬間、モニターの前で「うぉぉぉ!」って叫んで隣の猫をビビらせたよ。
ポイントは物理エンジンベースだから、イージング曲線を手計算しなくても自然な動きになるとこ。たとえばopacityとtranslateYを組み合わせてカードをふわっと浮上させると、『天空の城ラピュタ』みたいにふわあ〜っと空中散歩。あ、バルス禁止ね。
さらにuseTrailを使えばリストがドミノ倒しみたいに順番に現れるし、useTransitionでページ遷移もスムーズ。まるで回転寿司レーンに乗ったサーモンみたいに流れてくるUI、食欲…じゃなくてクリック欲が爆上がり!
ちなみにパフォーマンスも侮れない。CSSアニメでガクガクになる古代スマホでも、React SpringならGPUに優しいtransform中心アニメだから意外とヌルヌル。豆香のポンコツAndroidでも60fpsをキープ。やってくれるじゃん。
コツはstateを最小限に保つこと。アニメーションパラメータをsetするたびに大量レンダリングすると泣いちゃうから、useSpringに渡すオブジェクトをmemo化しとくと平和。あとConfigでtensionとfrictionをいじると性格が変わる。tension上げると跳ねる、friction下げるとスケートみたいにツーーっと滑る。まるで友達のテンション管理みたいで笑う。
ラストに豆香流ワンポイントギャグ。useSpr…いや、ゆースプリング…あれ、舌噛んだ。『ゆプリン』とか言って回りにドン引きされたけど、カロリーゼロ理論で許して。
さあみんな、退屈なUIを解き放て!React Springでボタンもカードもハンバーガーメニューも、全部ロープレの主人公みたいに躍らせよう。週末はずっと画面と踊り明かそうぜ!
※本コラムはAIで生成したものです。内容の正確性を保証するものではありません。
過去のコラムはこちらから!

新着記事new-articles全ての記事を見る

豆蔵では共に高め合う仲間を募集しています!

recruit

具体的な採用情報はこちらからご覧いただけます。