Repolode
elijah-semyonov

elijah-semyonov/DuoLikeAnimation

SwiftUIのMetalシェーダーとCore Motionを使い、画面をすりガラスのように見せながら、折りたたみiPhoneの開閉アニメーションを再現するiOSデモです。

スター
158
フォーク
40
未解決の Issue
0
最終コミット
先月

これは何?

DuoLikeAnimationは、SwiftUIシェーダーとCore MotionだけでiPhone Duoの開閉アニメーションを再現するiOSデモプロジェクトです。MetalのlayerEffectにデバイスの姿勢をリアルタイムで渡すことで、通常の平らなiPhoneが折りたたみデバイスの片側のように曲がって見えます。

画面をすりガラスの板として扱うエフェクトです。デバイスが垂直軸を中心に傾いても、インターフェースはワールド空間上で固定されます。シェーダーは遠近法を使ってビューを再投影し、ガラスとインターフェース面の距離に応じてぼかしと暗さを加えます。また、光線がインターフェースに届かない部分は黒く描画します。デフォルトでは、見る人の目を手持ち時の距離である320 mmの位置にモデル化します。

プロジェクトには、シェーダー、調整可能なパラメーターを備えたSwiftUIモディファイア、傾きゼロの姿勢をキャリブレーションするCore Motionモデル、再キャリブレーションと手動傾斜に対応するデモビューが含まれています。モーションデータを取得できないシミュレーターでは、手動傾斜がデフォルトで有効になります。

主な機能

  • 01MetalのlayerEffectシェーダーで、遠近法による再投影と距離に応じたぼかし・暗さの調整を行います。
  • 02Core Motionからデバイスの姿勢を取得し、最初のサンプルを基に傾きゼロの姿勢をキャリブレーションします。
  • 03調整可能なパラメーターを公開する.foldEffect(angle:parameters:)モディファイアを提供します。
  • 04再キャリブレーションと手動傾斜に対応するフローティングパネルを備えています。
  • 05シミュレーターでは手動傾斜がデフォルトで有効になります。

ユースケース

  • Metalを使ったSwiftUIのlayerEffectシェーダーの書き方を学ぶ。
  • iOSで折りたたみデバイス向けのエフェクトや、3Dの傾斜エフェクトを試作する。
  • Core Motionの姿勢データをビジュアルエフェクトに利用する方法を調べる。

クイックスタート

  1. 1

    XcodeでDuoLikeAnimation.xcodeprojを開きます

  2. 2

    iOSデバイスでアプリを実行します(シミュレータにはモーションデータがないため、傾きは手動で操作します)

使う前に知っておきたいこと

  • iOS専用です。実際の傾き効果を利用するには、モーションセンサーを搭載した実機が必要です。
  • 再利用可能なライブラリではなく、デモプロジェクトです。

トピック

よくある質問

DuoLikeAnimation とは?
SwiftUIのMetalシェーダーとCore Motionを使い、画面をすりガラスのように見せながら、折りたたみiPhoneの開閉アニメーションを再現するiOSデモです。 DuoLikeAnimationは、SwiftUIシェーダーとCore MotionだけでiPhone Duoの開閉アニメーションを再現するiOSデモプロジェクトです。MetalのlayerEffectにデバイスの姿勢をリアルタイムで渡すことで、通常の平らなiPhoneが折りたたみデバイスの片側のように曲がって見えます。
DuoLikeAnimation は無料で使えますか?ライセンスは?
DuoLikeAnimation は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
DuoLikeAnimation は今もメンテナンスされていますか?
半年以内に更新あり。DuoLikeAnimation の最終コミットは 2026年9月11日 です。
DuoLikeAnimation は何に使えますか?
Metalを使ったSwiftUIのlayerEffectシェーダーの書き方を学ぶ。 iOSで折りたたみデバイス向けのエフェクトや、3Dの傾斜エフェクトを試作する。 Core Motionの姿勢データをビジュアルエフェクトに利用する方法を調べる。
DuoLikeAnimation のインストール方法は?
XcodeでDuoLikeAnimation.xcodeprojを開きます iOSデバイスでアプリを実行します(シミュレータにはモーションデータがないため、傾きは手動で操作します)
DuoLikeAnimation はどこで入手できますか?
ソースコードとインストール手順は GitHub にあります:https://github.com/elijah-semyonov/DuoLikeAnimation

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト