Show HN: Inertia – あなたのおじいさんのアニメーションエディタではありません

なぜInertiaなのか あなたのアプリがキャンバスです デザインツールは、UIの横で再生されるものをエクスポートしますが、UIそのものではありません。コードファーストライブラリは、コンパイル・実行・調整のループに留まり、40ミリ秒のタイミング変更に再ビルドが必要になります。Inertiaは、この2つの中間に位置します。 実際のコンポーネント 実際のRoundedRectangle、実際のCardコンポーザブル、実際の<div>。再実装や、アプリから乖離するデザインファイルはありません。 ネイティブ再生 SwiftUIはKeyframeAnimatorを通じてトラックを再生します。ComposeとReactは、それぞれ自身のクロックで同じトラックをサンプリングします。何もラスタライズされません。 ライブ編集 あなたのアプリはローカルWebSocket経由でエディタに接続し、タグ付けされた階層を報告し、編集中に更新を受け取ります。 仕組み 3つのステップで、あなたのリポジトリに組み込まれます 01ビューにタグを付ける 移動させたいものをidでラップします。その1回の呼び出しが統合のすべてです — 図形とトラックがidにアタッチされます。 02タイムライン上でドラッグする エディタ内でビルドを実行し、タグ付けされたビューを選択して、移動、回転、スケール、またはフェードさせます。プレイヘッドは実行中のアプリと共有されます。 03ファイルをコミットする エディタはanimation.inertiaファイルを書き出します。デザイナーはタイムラインをスクラブし、開発者は結果をgit addします — 1つのファイル、3つのランタイム、同一のid。 エディタ 実際に実行中のビルドに対してスクラブする 中央のパネルはあなたのアプリです — iOSシミュレータ、Androidエミュレータ、またはWebView内の開発サーバーにインストールされ、起動されています。タグ付けされたビューを選択し、ドラッグすると、キーフレームがタイムラインに着地します。 Translate Rotate Scale Opacity Vectors Inertia — Home · translate 実行中のアプリでカードをドラッグしています。緑色の配置ガイドが隣接要素にスナップし、X/Yスライダーはコンテナの割合として-0.857と0を読み取ります。読み出しはX: 11 Y: -16, W: 189 H: 189を確認します。 ランタイム 1つのAPI、3つのプラットフォーム すべてのランタイムには同じ3つの要素があります: アニメーションデータを所有するコンテナ、移動させたい各ビューをラップするアクション可能なもの、および開始のための再生ハンドル。 triggerはトラックを開始します。実行中に到着したものは、進行中の実行に参加します。 restartは巻き戻します — コンテナ内のすべてのアクション可能なものは、1つのクロックから描画されます。 cancelはアニメーションを初期値に戻してそこに留めます。 isRepeatingは実行時にループと一度だけ再生を切り替えます。 SwiftUI Jetpack Compose React ContentView.swift editor port 8060 import SwiftUI import Inertia InertiaContainer(dev: isEditor, id: "animation") { ContentView() } struct ContentView: View { @Environment(\.inertiaDataModel) private var inertia: InertiaDataModel! var body: some View { VStack(spacing: 16) { Card(title: "Welcome") .inertia("card0") // 移動させたいビューにタグを付ける Button("Trigger") { inertia.restart("card0") } } } } RuntimePackage Editor target Shapes SwiftUI Inertia (SPM) iOS Simulator, simctl経由で駆動 Metal Jetpack Compose inertia-compose (JitPack) Androidエミュレータ, adb経由 OpenGL ES 2.0 React inertia-react + inertia-base WebView内の開発サーバー WebGL ハンドオフ 1つの.inertiaファイル エディタは、ソースコードと一緒にバージョン管理されるプロジェクトフォルダにanimation.inertiaファイルを書き出します — タグ付けされたidごとに1つのレコード、それぞれがポーズとそこから離れるトラックです。 translate — コンテナの割合としての[x, y]オフセット。そのため、トラックはリサイズに耐えます。 scale, opacity — 一様な係数、および0から1。 rotate / rotateCenter — 度数、左上隅またはビューの中心を基準。 invokeType — autoはビューが表示されると開始されます。triggerは呼び出しを待ちます。 animation.inertia デコードされたレコード { "id": "card0", "initialValues": { "opacity": 1, "rotate": 0, "scale": 1, "translate": [0, 0] }, "invokeType": "trigger", "keyframes": [ { "duration": 0.001, "values": { "scale": 0, "translate": [-0.008, -0.269] } }, { "duration": 2.011, "values": { "rotate": 90, "scale": 1, "translate": [-0.013, 0.278] } } ], "shapes": [] } ボックス内のその他の詳細 使いやすくするための詳細 アライメントガイド ビューをドラッグすると、SwiftUIとComposeの両方で隣接要素にスナップします。 頂点形状 ビューの後ろにあるジオメトリを記述します — 四角形、楕円、三角形、またはコーナーごとの色を持つ生の頂点。形状APIの呼び出しはありません。 共有プレイヘッド 一時停止、再開、シーク、ループ長は双方向に共有されるため、タイムラインは実行中のアニメーションを追跡します。 エディタモードはオプトイン リリース時には、ソケットコードは実行されません。コンテナはアニメーションをロードし、独自のクロックで再生します。 ビューごとの状態 2つのビューが1つのアニメーションidを共有し、独自の再生状態を維持できます — 他に触れることなく1つをトリガーします。 アプリと一緒にバージョン管理 アプリごとに1つの.inertiaプロジェクトフォルダがあり、アニメーションするコードの隣のリポジトリに配置されます。 始める 数分でビューを動かす パッケージを追加し、ビューにタグを付け、エディタを開きます。クイックスタートは、3つのランタイムすべてをエンドツーエンドで案内します。 クイックスタートを読む ダウンロード macOSエディタを入手する メールアドレスを残していただければ、ビルド（エディタ、3つのランタイム、クイックスタートが使用するサンプルプロジェクト）をお届けします。 このフィールドは空にしないでください メールアドレス ダウンロードを入手 ダウンロードリンクとリリースノートのための1つのメール。リストや共有はありません。