SwiftUIで数値変動のアニメーション
概要
数値の変動にアニメーションを追加してみます。
スピークバディアプリ内では例えばこんなところに使用しています。
※数値が 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()
}
おわり
お読みいただきありがとうございます!
もしなにかのお役に立つことがございましたら、
♡を頂けますとすごく励みになります😊
この記事が気に入ったらサポートをしてみませんか?