SwiftUI에서 숫자의 증감을 애니메이션으로 만들기



숫자가 점점 늘어나는 연출을 하고 싶을 때,
보통 쓸 뿐이라고 생각한 대로의 애니메이션을 해주지 않습니다.
그래서 서서히 변화시키면서 표시하기 위한 코드를 준비해 보았습니다.

코드 예



ContentView.swift
import SwiftUI
struct ContentView: View {

    // 変化する値 count
    @State var count: Int = 0
    var body: some View {

        // 変化する値 count を読み取る
        AnimationReader(count) { value in
            // count ではなく value の方を使って表示する
            Text("total: \(value)")
        }

        // 画面が表示された後に数字を増やしてみるテスト
        .onAppear {
            withAnimation(.easeInOut(duration: 10)) {
                count += 99
            }
        }
    }
}

AnimationReader.swift


  • copipe, 어딘가에.

  • AnimationReader.swift
    fileprivate struct AnimationReaderModifier<Body: View>: AnimatableModifier {
        let content: (CGFloat) -> Body
        var animatableData: CGFloat
    
        init(value: CGFloat, @ViewBuilder content: @escaping (CGFloat) -> Body) {
            self.animatableData = value
            self.content = content
        }
    
        func body(content: Content) -> Body {
            self.content(animatableData)
        }
    }
    
    struct AnimationReader<Content: View>: View {
    
        let value: CGFloat
        let content: (_ animatingValue: CGFloat) -> Content
    
        init(_ observedValue: Int, @ViewBuilder content: @escaping (_ animatingValue: Int) -> Content) {
            self.value = CGFloat(observedValue)
            self.content = { value in content(Int(value)) }
        }
    
        init(_ observedValue: CGFloat, @ViewBuilder content: @escaping (_ animatingValue: CGFloat) -> Content) {
            self.value = observedValue
            self.content = content
        }
    
        var body: some View {
            EmptyView()
                .modifier(AnimationReaderModifier(value: value, content: content))
        }
    }
    

    도움이되면 LGTM을 꼭!

    좋은 웹페이지 즐겨찾기