如何使用 SwiftUI 为包含在视图中的数字设置动画？

Question

Let say i have a simple view, and a number INSIDE another view:

struct ContentView: View {
    @State private var counter = 0
    var body: some View {
        VStack {
            Button(action: { self.counter += 1 }) {
                Text("Add 1")
            }
            NumberView(currentValue: counter)
        }
    }
}

struct NumberView: View {
    var currentValue: Int

    var body: some View {
        VStack {
            Text("I don't want to be animated")
            Text(currentValue.description)
                .font(.largeTitle)
                .foregroundColor(Color.black)
                .padding(.all)
        }
     }
}

For every click I want the number to scale up for a second and go back as normal. (Using scale effect). How can i animate this scaling for a second?

Answer 1

try this:

struct ContentView: View {
    @State private var counter = 0

    @State var scale = false

    var body: some View {
        VStack {
            Button(action: {
                self.counter += 1
                withAnimation(Animation.easeInOut(duration: 0.5))  {
                    self.scale.toggle()
                    Timer.scheduledTimer(withTimeInterval: 0.5, repeats: false) { (timer) in
                        withAnimation(Animation.easeInOut(duration: 0.5))  {
                            self.scale.toggle()
                        }
                    }
                }
            }) {
                Text("Add 1")
            }
            NumberView(currentValue: counter)
                .scaleEffect(scale ? 1.5 : 1)
        }
    }
}

struct NumberView: View {
    var currentValue: Int

    var body: some View {
        Text(currentValue.description)
            .font(.largeTitle)
            .foregroundColor(Color.black)
            .padding(.all)
    }
}

Answer 2

ok, here the new answer for your changed requirement

struct ContentView: View {
    @State private var counter = 0
    @State var scale : CGFloat = 1
    var body: some View {
        VStack {
            Button(action: {
                self.counter += 1
                withAnimation(Animation.easeInOut(duration: 0.5))  {
                    self.scale = 1.5
                    Timer.scheduledTimer(withTimeInterval: 0.5, repeats: false) { (timer) in
                        withAnimation(Animation.easeInOut(duration: 0.5))  {
                            self.scale = 1
                        }
                    }
                }
            }) {
                Text ("add")
            }
            NumberView(currentValue: counter, scale: self.scale)
        }
    }
}

struct NumberView: View {
    var currentValue: Int
    var scale : CGFloat

    var body: some View {
        VStack {
            Text("I don't want to be animated")
            Text(currentValue.description)
                .font(.largeTitle)
                .foregroundColor(Color.black)
                .padding(.all)
                .scaleEffect(self.scale)
        }
     }
}