如何在swiftui中模拟现场歌词动画渐变？

Question

它可能非常复杂，但如果有人能引导我朝着正确的方向前进，我将不胜感激。我想创建一个流动的渐变动画，就像音乐应用程序中的那样。我想用它来根据智能家居应用程序的灯光改变颜色。我熟悉使用 LinearGradient 并为起点和终点设置动画，但这显然要复杂得多，但希望有人知道我能做什么。

我找到了一个 MPUGradientView header，其中包含 CAGradientLayer，所以我不确定它是否结合了渐变以某种方式产生效果。

谢谢！

Answer 1

没有完全重现您要求的屏幕截图，但它应该可以帮助您入门。灵感来自这里：https://nerdyak.tech/development/2019/09/30/animating-gradients-swiftui.html

struct MainView: View {

@State var gradient = [Color.red, Color.purple, Color.orange]

@State var startPoint = UnitPoint(x: 0, y: 0)
@State var endPoint = UnitPoint(x: 0, y: 2)

var body: some View {
    ZStack {
        LinearGradient(gradient: Gradient(colors: self.gradient), startPoint: self.startPoint, endPoint: self.endPoint)
            .overlay(
                Text("Hello world")
        )
    }
    .edgesIgnoringSafeArea(.all)
    .onAppear {
        withAnimation(Animation.easeInOut(duration: 6).repeatForever(autoreverses: true)) {
            self.startPoint = UnitPoint(x: 1, y: -1)
            self.endPoint = UnitPoint(x: 0, y: 1)
        }
    }
}}

Answer 2

我最终在大多数 SwiftUI 中得到了一些非常接近的东西，但它需要一个图像。

这是它的外观预览： https://twitter.com/priva2804/status/1284439692352434178?s=21

这里是要点： https://gist.github.com/Priva28/22fbae9dbe04a08fadf748793dd23d00

如何在swiftui中模拟现场歌词动画渐变？

How to emulate the live lyrics animated gradient in swiftui?

gradient

swift

swiftui