LoginSignup
1
1

More than 5 years have passed since last update.

UIViewPropertyAnimatorのカスタムイージング(模索中)

Last updated at Posted at 2017-12-14

この記事はQuadアドベントカレンダー14日目の記事です。

iOS10からUIViewPropertyAnimatorという機能が追加されたようですが、カスタム方法がよくわかりませんでした。
最終手段は自作すれば良いのですが、簡単に利用できるならそちらを利用したいところです。

達成したかったこと

イージングパターンを簡単に切り替えれるようにしたい。Cubic, Expo, Quadなどのeasingの数式を適用して実装したかった。

結果

力技で対応しました。(詳しい人いたら教えてください。。。)

デフォルトのまま利用

利用方法はQiitaにもたくさんあるのでそちらでご確認ください。だいたい以下のような形になると思います。

let timing = UICubicTimingParameters(animationCurve: .easeOut)
let animation = UIViewPropertyAnimator(duration: 1.0, timingParameters: timing)
animation.addAnimations { [unowned ball] in
    ball.frame.origin.x = 360
}
animation.startAnimation()

timingParamersをカスタムすることで利用できるのでは?

UITimingCurveProviderプロトコルを実装したインスタンスを渡すようですが、プロトコルの定義を確認すると...

@available(iOS 10.0, *)
public var timingCurveType: UITimingCurveType { get }

@available(iOS 10.0, *)
public var cubicTimingParameters: UICubicTimingParameters? { get }

@available(iOS 10.0, *)
public var springTimingParameters: UISpringTimingParameters? { get }

こちら実装する必要がありそう。そしてCubic縛りのようですね。なるほど「UICubicTimingPrameters」を用意するのですね...
controlPoint1、controlPoint2を設定するしか「UIViewPropertyAnimator」を利用する方法はないのか?!

ControlPointの数値を設定したクラスを作る

最終的には以下のようなstructを作りやりくりしています。

struct EasingBuilder {

    var easeOutQuad: UICubicTimingParameters {
        let point1 = CGPoint(x: 0.16, y: 0.39)
        let point2 = CGPoint(x: 0.06, y: 0.97)
        let timing = UICustomTimingPrameters(controlPoint1: point1, controlPoint2: point2)
        return timing
    }
}

イージングは、こちらのページでちまちま作ってます。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1