Ios 在Swift UI中设置文本动画

如何从Swift UI设置

文本

或

文本字段

视图的动画

通过动画，我的意思是，当文本更改时，它将“计数”

例如，给定一些标签，如何创建动画，当我将标签文本设置为“100”时，它将从0上升到100。我知道在UIKit中使用层和动画可以做到这一点，但在Swift UI中使用

.animation（）

函数并更改

文本

或

文本字段

在动画方面似乎没有任何作用

我已经查看了

Animatable

协议及其相关的

animatableData

属性，但它似乎与

Text

或

TextField

不符。我试图创建一个计数的标签，因此给定一些值，比如说一个

双

，将使用

@State

或

@Binding

跟踪对该值的更改，然后

文本或
文本字段将对其内容（实际字符串文本）进行动画处理从值所在的位置到设置的位置

编辑：

为了更清楚，我想重新创建一个标签，当设置动画时，它看起来像这样：

您可以在
BindableObject
中使用
CADisplayLink
创建计时器，在动画期间更新文本


类CADisplayLinkBinding:NSObject，BindableObject{
让didChange=PassthroughSubject（）
私有（设置）变量进度：双精度=0.0
专用（设置）var startTime:CFTimeInterval=0.0
专用（设置）var持续时间：CFTimeInterval=0.0
专用（设置）惰性变量显示链接：CADisplayLink={
let link=CADisplayLink（目标：self，选择器：#选择器（勾号））
link.add（到：.main，forMode:.common）
link.isPaused=true
返回链接
}()
func运行（持续时间：CFTimeInterval）{
let now=CACurrentMediaTime（）
self.progress=0.0
self.startTime=现在
self.duration=持续时间
self.displayLink.isPaused=false
}
@objc专用函数勾选（）{
让已用时间=CACurrentMediaTime（）-self.startTime
self.progress=min（1.0，经过时间/self.duration）
self.displayLink.isPaused=self.progress>=1.0
self.didChange.send（self）
}
脱硝{
self.displayLink.invalidate（）
}
}

然后使用它：

@ObjectBinding var displayLink=CADisplayLinkBinding（）
var body：一些观点{
文本（\（Int（self.displayLink.progress*100）））
奥纳佩尔先生{
self.displayLink.run（for:10.0）
}
}
在SwiftUI中，有一种纯粹的文本动画制作方法。下面是使用SwiftUI中的AnimatableModifier协议实现进度指示器：


我写了一篇内容广泛的文章，记录了AnimatableModifier的使用（及其bug）。它还包括进度指标。您可以在此处阅读：

struct ContentView:View{
@国家私有变量百分比：CGFloat=0
var body：一些观点{
VStack{
垫片（）
颜色.透明.覆盖（指示器（百分比：自身百分比））
垫片（）
HStack（间距：10）{
MyButton（标签：“0%”，字体：。标题）{withAnimation（.easeInOut（持续时间：1.0））{self.percent=0}
MyButton（标签：“27%”，字体：。标题）{withAnimation（.easeInOut（持续时间：1.0））{self.percent=0.27}
MyButton（标签：“100%”，字体：。标题）{withAnimation（.easeInOut（持续时间：1.0））{self.percent=1.0}
}
}.navigationBarTitle（“示例10”）
}
}
结构指示器：视图{
var pct:CGFloat
var body：一些观点{
返回圆（）
.fill（LinearGradient（渐变：渐变（颜色：[.blue、.purple]），起始点：。顶部前导，终点：。底部尾随））
.框架（宽度：150，高度：150）
.修改器（百分比指示器（pct:self.pct））
}
}
结构百分比指示器：AnimatableModifier{
var pct:CGFloat=0
var animatableData:CGFloat{
获取{pct}
集合{pct=newValue}
}
func正文（内容：内容）->某些视图{
内容
.overlay（弧形形状（pct:pct）.foregroundColor（.red））
.叠加（LabelView（pct:pct））
}
结构圆弧形状：形状{
让pct:CGT浮动
func路径（在rect:CGRect中）->path{
var p=Path（）
p、 添加弧（中心：CGPoint（x:rect.width/2.0，y:rect.height/2.0），
半径：垂直高度/2.0+5.0，
星际缠结：。度（0），
端角：。度（360.0*Double（pct）），顺时针：假）
返回p.strokedPath（.init（线宽：10，虚线：[6,3]，虚线相位：10））
}
}
结构LabelView：视图{
让pct:CGT浮动
var body：一些观点{
文本（“\（整数（pct*100））%”）
.font（.largeTitle）
.fontWeight（.粗体）
.foregroundColor（.白色）
}
}
}
AFAIK，animatableData仅用于设置路径动画。还有，当你说“上去”时，你是什么意思？身体向上移动？还是增加它的数量？@kontiki-Ah-gotcha，我想创建一个标签，通过增加数量来制作动画。我已经用一个例子更新了我的问题，谢谢你的澄清，我会考虑的；-）在我看来，你可能需要一个带计数器的@State变量，以及一个增加这个数字的计时器。同时，您将拥有一个将百分比数字作为参数接收的视图。从技术上讲，它不是一个快速的UI动画，但它可以工作。你所描述的不是UIKit意义上的“动画”。您希望创建一个计时器，该计时器可以重复触发并更改标签中的文本。（我不知道是什么推动了完成百分比，但如果你有进度块，你可以更新它