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

【问题标题】：How to emulate the live lyrics animated gradient in swiftui?如何在swiftui中模拟现场歌词动画渐变？
【发布时间】：2020-02-27 22:18:41
【问题描述】：

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

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

谢谢！

【问题讨论】：

您在这方面有什么进展吗？我正在寻找非常相似的东西。我弄乱了一些自动生成的路径，为渐变创建线条图案，仅此而已。期待您的来信。
@TahmidAzam 检查我的最新答案。希望对您有所帮助！

标签： swift swiftui gradient

【解决方案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)
        }
    }
}}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

这是一项了不起的工作！非常感谢 - 我想我可以使用 SwiftUI 创建一个线性渐变的视图，然后以某种方式将其导出到图像并将其传递给它 - 希望我可以让它工作。
没问题，我很高兴它有帮助。如果你在 swiftui 中找不到方法，你总是可以创建一个助手，在 UIImage 上应用 CAGradientLayer，然后将 UIImage 添加到 SwiftUI 图像中，例如 Image(uiImage: myGradient)