➰

easeInのようなカーブを自作できるUnitCurve in SwiftUI

2024/02/03に公開

iOS

SwiftUI

tech

あなたは easeIn や easeOut のようなカーブを自作したいと思ったことがありますか？
今思った答を反対にしてください。
答がYesならここから先の話を読みましょう。

UnitCurve

カーブを作るには UnitCurve を使います。

iOS17以降、macOS14以降

インスタンス作成

メインとなるstatic自作メソッド（実質イニシャライザ）

bezier(startControlPoint:endControlPoint:)

この四角は左下が(0,0)で、右上が(1,1)です。四角の左下から右上に好きな線を引くことが目的です。AやBの点を与えることでカーブを作ることが出来ます。上のメイン自作メソッドでA点とB点を与えます。
startControlPoint にA点
endControlPoint にB点
を与えます。

注意点は

x座標は 0...1 に収められる（演算のどのタイミングかは未調査）
y座標は制限がない模様

値の取得

カーブが出来たら値の取得です。
x座標を与えるとカーブのその位置のy座標を返します。

func value(at progress: Double) -> Double

流れまとめ

このように

イニシャライザでカーブ描き
xを与えるとカーブからyを拾って返す。

の2段階あります。

確認用コード

確認用のコードを載せます。

import SwiftUI

var uc = UnitCurve.bezier(
    startControlPoint: UnitPoint(x: 0.0, y: 1.0), 
    endControlPoint: UnitPoint(x: 1.0, y: 0.0))
for i in stride(from: 0.0, through: 1.0, by: 0.01) {
    print(String(format: "%.3f", i), terminator: "")
    print(String(format: "  %.3f", uc.value(at: i)))
}

製図の仕組み

カーブの生成にはベジエ曲線の方法を使います。説明は世の中にたくさんあります。3点の方法と4点の方法がありますが、UnitCurve では4点の方法です。