我一直在尝试对 UI 的各个部分进行动画处理,但似乎无法对 SwiftUI 文本的前景色进行动画处理?我想在状态改变时平滑地切换某些文本的颜色。如果我对文本周围视图的背景颜色进行动画处理,则效果很好,但前景色不起作用。有没有人有幸实现这样的改变?不确定这是否是 Xcode beta 错误或其预期功能...
Text(highlightedText)
.foregroundColor(color.wrappedValue)
.animation(.easeInOut)
// Error: Cannot convert value of type 'Text' to closure result type '_'
有一种更简单的方法,借鉴苹果的“动画视图和过渡”教程代码。 HikeGraph 中 GraphCapsule 的实例化证明了这一点。
虽然
foregroundColor
无法设置动画,但 colorMultiply
可以。将前景色设置为白色并使用 colorMultiply 设置您想要的实际颜色。从红色到蓝色的动画:
struct AnimateDemo: View {
@State private var color = Color.red
var body: some View {
Text("Animate Me!")
.foregroundColor(Color.white)
.colorMultiply(self.color)
.onTapGesture {
withAnimation(.easeInOut(duration: 1)) {
self.color = Color.blue
}
}
}
}
struct AnimateDemo_Previews: PreviewProvider {
static var previews: some View {
AnimateDemo()
}
}
您可以通过依赖于
@State
属性轻松地对颜色(或样式)进行动画处理,例如:
struct ContentView: View {
@State var highlighted = false // 👈 Animation Trigger
var body: some View {
VStack {
Text("Text To Change Color")
.foregroundColor(highlighted ? .red : .blue)
Button("Change") {
withAnimation { // 👈 touch the trigger inside an animation block
self.highlighted.toggle() // 👈 Toggle to apply the change
}
}
}
}
}
SwiftUI 中有一个很好的协议,可以让你为任何东西设置动画。即使是不可动画的东西! (例如文字颜色)。该协议称为 AnimatableModifier。
如果您想了解更多信息,我写了一篇完整的文章解释其工作原理:https://swiftui-lab.com/swiftui-animations-part3/
以下是如何实现此类视图的示例:
AnimatableColorText(from: UIColor.systemRed, to: UIColor.systemGreen, pct: flag ? 1 : 0) {
Text("Hello World").font(.largeTitle)
}.onTapGesture {
withAnimation(.easeInOut(duration: 2.0)) {
self.flag.toggle()
}
}
以及实施:
struct AnimatableColorText: View {
let from: UIColor
let to: UIColor
let pct: CGFloat
let text: () -> Text
var body: some View {
let textView = text()
// This should be enough, but there is a bug, so we implement a workaround
// AnimatableColorTextModifier(from: from, to: to, pct: pct, text: textView)
// This is the workaround
return textView.foregroundColor(Color.clear)
.overlay(Color.clear.modifier(AnimatableColorTextModifier(from: from, to: to, pct: pct, text: textView)))
}
struct AnimatableColorTextModifier: AnimatableModifier {
let from: UIColor
let to: UIColor
var pct: CGFloat
let text: Text
var animatableData: CGFloat {
get { pct }
set { pct = newValue }
}
func body(content: Content) -> some View {
return text.foregroundColor(colorMixer(c1: from, c2: to, pct: pct))
}
// This is a very basic implementation of a color interpolation
// between two values.
func colorMixer(c1: UIColor, c2: UIColor, pct: CGFloat) -> Color {
guard let cc1 = c1.cgColor.components else { return Color(c1) }
guard let cc2 = c2.cgColor.components else { return Color(c1) }
let r = (cc1[0] + (cc2[0] - cc1[0]) * pct)
let g = (cc1[1] + (cc2[1] - cc1[1]) * pct)
let b = (cc1[2] + (cc2[2] - cc1[2]) * pct)
return Color(red: Double(r), green: Double(g), blue: Double(b))
}
}
}