ios - 使渐变视图动画颜色在 SwiftUI 中向一个方向旋转

Question

所以我有一个线性渐变视图，并且我有使用.animation()修改器动画的颜色。现在，当我调整渐变的start和end点并使用.easeInAndOut()修改器进行动画处理时，颜色来回旋转。我希望颜色在一个方向上旋转，顺时针，重复，但是它来回旋转。

struct AnimatedBackground: View {
   @State var start = UnitPoint.leading
   @State var end = UnitPoint.trailing
   
 
   
   let timer = Timer.publish(every: 1, on: .main, in: .default).autoconnect()
   let colors: [Color] = [ .blue, .red ]
   
   
   var body: some View {
       
       
       LinearGradient(gradient: Gradient(colors: colors), startPoint: start, endPoint: end)
           .animation(Animation.easeInOut(duration: 3).repeatForever())
           .onReceive(timer, perform: { _ in
               
              
   
                self.start = .topLeading
               self.end = .bottomTrailing
               
           
               self.start = .bottom
               self.end = .top
           
            
               self.start = .bottomLeading
               self.end = .topTrailing
               
               
               self.start = .leading
               self.end = .trailing
               
        
               self.start = .topLeading
               self.end =  .bottomTrailing
               
               
               self.start = .top
               self.end = .bottom
               
               
               self.start = .bottomLeading
               self.end = .topTrailing
               
            
               self.start = .leading
               self.end = .trailing
               
            
               
           }).edgesIgnoringSafeArea(.all)
   }
}

渐变色来回旋转。我希望颜色以顺时针方向旋转，平滑而重复。

标签： iosxcodeuser-interfaceswiftuilinear-gradients

Answer 1

让我们调试！首先，在您的大量 . 序列之前和之后self.start = ...，尝试添加print语句。

print("Before: \(start), \(end)")
self.start = .topLeading
self.end = .bottomTrailing
self.start = .bottom
self.end = .top
self.start = .bottomLeading
self.end = .topTrailing
self.start = .leading
self.end = .trailing
self.start = .topLeading
self.end =  .bottomTrailing
self.start = .top
self.end = .bottom
self.start = .bottomLeading
self.end = .topTrailing
self.start = .leading
self.end = .trailing
print("After: \(start), \(end)")

你会注意到两者print几乎同时发生。

之前：UnitPoint(x: 0.0, y: 0.5), UnitPoint(x: 1.0, y: 0.5)
之后: UnitPoint(x: 0.0, y: 0.5), UnitPoint(x: 1.0, y: 0.5)

这是因为 Swift 代码会立即执行，在极短的时间内一行接一行地执行。结果，start总是变成(x: 0.0, y: 0.5)( .leading)，并且end总是变成(x: 1.0, y: 0.5)( .trailing)。您的渐变可能甚至根本没有动画！

要修复，您应该简单地获取 和 的当前值start，end然后手动计算下一个值。

struct AnimatedBackground: View {
    @State var start = UnitPoint.leading
    @State var end = UnitPoint.trailing

    let timer = Timer.publish(every: 1, on: .main, in: .default).autoconnect()
    let colors: [Color] = [.blue, .red]

    var body: some View {
        LinearGradient(gradient: Gradient(colors: colors), startPoint: start, endPoint: end)
            .animation(Animation.easeInOut(duration: 3).repeatForever(), value: start) /// don't forget the `value`!
            .onReceive(timer) { _ in
                
                self.start = nextPointFrom(self.start)
                self.end = nextPointFrom(self.end)

            }
            .edgesIgnoringSafeArea(.all)
    }
    
    /// cycle to the next point
    func nextPointFrom(_ currentPoint: UnitPoint) -> UnitPoint {
        switch currentPoint {
        case .top:
            return .topLeading
        case .topLeading:
            return .leading
        case .leading:
            return .bottomLeading
        case .bottomLeading:
            return .bottom
        case .bottom:
            return .bottomTrailing
        case .bottomTrailing:
            return .trailing
        case .trailing:
            return .topTrailing
        case .topTrailing:
            return .top
        default:
            print("Unknown point")
            return .top
        }
    }
}

结果：

注意：要获得更流畅的动画，请查看rotationEffect.