如何模仿金丝图中的现场歌词动画梯度？

Question

这可能很复杂，但如果有人能把我引向正确的方向，我会很感激的。我想创造一个流畅的梯度动画，就像在音乐应用程序。我想用它来改变颜色，这取决于智能家居应用程序的灯光。我很熟悉使用LinearGradient和动画的起点和终点，但这显然要复杂得多，但希望有人知道我能做什么。

我找到了一个包含MPUGradientView的CAGradientLayer头，所以我不确定它的组合渐变是否能以某种方式产生效果。

谢谢!

​

​

Answer 1

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

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

下面是要点：https://gist.github.com/Priva28/22fbae9dbe04a08fadf748793dd23d00

Answer 2

不完全复制你想要的截图，但它会让你开始。灵感来自于这里：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)
        }
    }
}}