概要

数値の変動にアニメーションを追加してみます。
スピークバディアプリ内では例えばこんなところに使用しています。
※数値が 0 → 7 へと変動する部分のアニメーションです

コード紹介

実装

Binding<Int>に対してエクステンションを定義します。

extension Binding where Value == Int {
  func animate(to target: Int, from current: Int? = nil, duration: TimeInterval) {
    let current = current ?? wrappedValue
    let interval = duration / .init(abs(target - current))
    let numbers = current < target ? [Int](current...target) : [Int](target...current).reversed()
    numbers.enumerated().forEach { index, num in
      DispatchQueue.main.asyncAfter(deadline: .now() + interval * .init(index)) {
        wrappedValue = num
      }
    }
  }
}

使用例

struct SampleView: View {
  @State private var num = 0
  
  var body: some View {
    Text(num.description)
      .onAppear {
        $num.animate(to: 100, duration: 0.5)
      }
  }
}

#Preview {
  SampleView()
}

おわり

お読みいただきありがとうございます！
もしなにかのお役に立つことがございましたら、
♡を頂けますとすごく励みになります😊