SwiftUIでローディング画面を自作してみたけど何か違う？

動機

WWDC24で紹介されていた「Create custom visual effects with SwiftUI」¹のRipple（波紋）エフェクトが頭に残っていてどこかに使いたいなと思ってました。
個人開発しているアプリ²のローディング画面にちょうどよいのでは？と思ってSwift Packageとして作ってみたのですが、なんかちょっと思ったのと違う気がしています…

製作物

製作過程

WWDCのコードを参考にまずはざっくり作る

※以降の動画はQuizionary³という個人開発アプリに導入したときのGIFです

なんか違う、、、大きい？

サイズ調整可能にして、小さくしてみる

速度が微妙？

速度や振幅、振動数などのパラメータを調整

さらに調整

これ以上、無理そうなので完成！

苦労したところ

Metalシェーダを画像のようにリソース管理する必要があった点

• Package.swiftに以下のようにしてリソースとして指定する必要がある

import PackageDescription

let package = Package(
    name: "LoadingImageView",
    platforms: [
        .iOS(.v17)
    ],
    products: [
        // Products define the executables and libraries a package produces, making them visible to other packages.
        .library(
            name: "LoadingImageView",
            targets: ["LoadingImageView"]
        ),
    ],
    targets: [
        // Targets are the basic building blocks of a package, defining a module or a test suite.
        // Targets can depend on other targets in this package and products from dependencies.
        .target(
            name: "LoadingImageView",
            dependencies: [],
            resources: [.process("Shaders/Ripple.metal")]
        ),
        .testTarget(
            name: "LoadingImageViewTests",
            dependencies: ["LoadingImageView"]),
    ]
)

• 使うときは(bundle :.module)を以下のようにつける必要がある

        let shader = ShaderLibrary.bundle(.module).Ripple(
            .float2(origin),
            .float(elapsedTime),

            // Parameters
            .float(amplitude),
            .float(frequency),
            .float(decay),
            .float(speed)
        )

パラメータ調整が意外と難しい

• 実際に組み込んでみないとわからないので、Swift Package側でコミット、Githubでリリースバージョン指定、利用するアプリ側で確認という手順を踏む必要があり、効率が悪かった
• 実際のアプリで作ってから、Swift Package化という流れの方が絶対に良い!

参考

1. https://developer.apple.com/videos/play/wwdc2024/10151/ ↩

2. 紹介記事はこちら ↩

3. https://apps.apple.com/app/quizionary/id6630366339 ↩