Rork Maxのアプリで、アイコンを気持ちよく動かすsymbolEffect実装メモ
Rork Maxが生成したSwiftアプリで、SF Symbolsをbounce・pulse・variableColor・contentTransitionで動かす実装を、動くコードとOSバージョンの出し分け、そして動かしすぎて後悔した落とし穴つきで整理します。
Reanimatedで作る、滑るインジケーター付きセグメントコントロール
標準のセグメントコントロールがAndroidで浮いて見える問題を、Reanimatedの自作コンポーネントで解決します。幅を実測して指標を滑らせる完全なコードと、UIスレッド駆動・アクセシビリティ・RTL対応までを実装メモとしてまとめました。
画面を離れてもアニメーションが回り続ける — Rork(Expo)アプリのフォーカス連動でバッテリーを守る
Rork が生成した Expo アプリで、別画面に進んだりホームに戻ったあともグラデーションや呼吸アニメーションが裏で回り続け、ジャンクとして表に出ないままバッテリーを静かに削っていく——その原因は Reanimated の withRepeat が UI スレッドで走り続けることと、ナビゲーションスタックが画面をマウントしたまま保持することにあります。useIsFocused と AppState を束ねたライフサイクル設計で、画面外とバックグラウンドのループを確実に止める実装を、動くコードで示します。
Rorkアプリのアニメーションがカクつく — フレームドロップの根本原因を特定して直した手順
Rorkで生成されたアニメーションがカクつく問題の根本原因と修正手順を解説します。JSスレッドとUIスレッドの分離、useNativeDriverの使い方、フレームドロップの診断方法まで実践的にまとめました。
Rork Max の AI × SwiftUI：生成コードをプロ品質の UX に仕上げる 4 つの実装パターン
Rork Max の AI が生成した SwiftUI コードを、ユーザーが「なめらかだ」と感じるプロ品質に仕上げる 4 つの実装パターンを解説します。スケルトン UI・アニメーション・エラー処理・ハプティクスまで、実コード付きで解説します。
Rork アプリで Reanimated の worklet エラーが出たときに順番に疑う 6 つのポイント
Rork 生成コードに Reanimated を組み込んだ途端に出る worklet 関連のエラーを、babel プラグインの抜け漏れから closure キャプチャまで、現場でぶつかる順に切り分けていきます。
Rork アプリの『触った瞬間の印象』を決める3つの実装 — アニメーション・ハプティクス・遷移速度
同じ機能のアプリでも『なんか気持ちいい』と感じるアプリと、そうでないアプリがあります。この差はアニメーション・ハプティクス・遷移速度の3要素の実装で決まります。Rork で作ったアプリに今日から取り入れられる具体的なコードを解説します。
Rork × React Native Skia 高品質グラフィックスUI — カスタムチャート・アニメーション・シェーダーエフェクト実装パターン
React Native Skiaを使ってRorkアプリに高品質なカスタムグラフィックスを実装する完全ガイド。Canvasによるカスタムチャート、グラデーション、シェーダーエフェクト、Reanimatedとの組み合わせによるインタラクティブアニメーションまで実践コード付きで解説します。
Rork × React Native Reanimated & Gesture Handler 実践ガイド — 60fps を維持するアニメーション設計と高度なジェスチャーインタラクション
Reanimated 3 と Gesture Handler で 60fps を保つ設計を、壁紙・癒し系アプリの実運用で踏んだ落とし穴とともに整理しました。runOnJS の発火遅延、useDerivedValue キャッシュ、FlashList との併用、cancelAnimation 漏れなど、公式ドキュメント外の知見を実測値付きで共有します。
Rork Max 高度なナビゲーション設計パターン — ネスト構造・カスタム遷移・認証フロー・共有要素トランジションの実装
Rork Max のナビゲーション設計を、2013年から個人で運用してきたアプリ群の実体験ベースで掘り下げる上級ガイド。Expo Router のネスト構造、認証フロー分岐、共有要素トランジションに加え、本番運用で気づいた6つの落とし穴と回避策を動くコードで紹介します。