实战需求

SwiftUI 文本组件之滚动动画编号组件 实现充满情感的微交互

适合体育应用程序、游戏、棋牌类app

本文价值与收获

看完本文后，您将能够作出下面的界面

看完本文您将掌握的技能

首先，我们将动画持续时间（1秒）划分为最多100个步骤的步骤（这避免了渲染如此之快，以至于看起来它立即达到了最终的数量）。然后，我们stepDuration从中创建一个animation duration / number of steps。所得商数为我们提供了一个步骤可以持续的时间。然后，我们乘的stepDuration由step拿到timeInterval后.now()，这将是，当我们对于给定的代码step应该运行

---

基础知识

• SwiftUI Form组件基础使用

//定义变量
@State var total = 0
@State var enteredNumber = 10
@State var showAnimation = false

//Form组件
Form {
                // transaction cost stepper
                Stepper(onIncrement: {
                    guard self.isAnimationAllowed else { return }
                    self.enteredNumber += 101
                }, onDecrement: {
                    guard self.isAnimationAllowed else { return }
                    self.enteredNumber -= 101
                }) {
                    Text("$\(enteredNumber)")
                }
                .padding(.horizontal)

                // button to add transaction
                Button(action: { self.addNumberWithRollingAnimation()}) {
                    Text("Submit Transaction")
                }
}

• DispatchQueue.main.asyncAfter延迟运行

DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
    self.showAnimation = false
}

---

---

全文地址

CSDN:

• 原创 SwiftUI 精品项目之倒数计时器应用程序（教程含源码）

小专栏：

• SwiftUI 文本组件之滚动动画数字组件 实现充满情感的微交互

---

加入我们一起学习SwiftUI

QQ:3365059189
SwiftUI技术交流QQ群:518696470
教程网站：www.openswiftui.com