🌀Gradient.linear()

╱🚧 under construction -> LinearGradient

swift⟩ custom ⟩ extension ⟩ Gradient ⟩ .linear()

custom convenient LinearGradient.

⬇️ 應用

• view.watermark()

💾 程式

// History:
// 2024.01.03
//    - .right() -> .toTrailing()
//    - .left()  -> .toLeading()
//    - .bottomLeft() -> .toBottomLeft()
//    - ... etc.

import SwiftUI

extension Gradient {
    
    // ------------- general linear gradient --------------
    
    /// `Gradient.linear(from: start, to: end, colors: colors)`
    ///
    /// - Parameters:
    ///   - from: 漸層開始的地方
    ///   - end: 漸層結束的地方
    ///   - colors: 漸層顏色 (`[Color]`)
    public static func linear(
        from start: UnitPoint, 
        to     end: UnitPoint, 
        colors    : [Color]       // use array
    ) -> LinearGradient 
    {
        LinearGradient(
            gradient  : Gradient(colors: colors), 
            startPoint: start, 
            endPoint  : end
        )
    }
    
    /// `Gradient.linear(from: start, to: end, colors: c1, c2, c3)`
    ///
    /// - Parameters:
    ///   - from: 漸層開始的地方
    ///   - end: 漸層結束的地方
    ///   - colors: 漸層顏色 (`Color...`)
    public static func linear(
        from start: UnitPoint, 
        to     end: UnitPoint, 
        colors    : Color...     // variadic parameter
    ) -> LinearGradient 
    {
        linear(from: start, to: end, colors: colors)
    }
    
    // -------- specialized linear gradients -------
    
    /// `Gradient.down(colors)`
    /// - Parameters:
    ///   - colors: 漸層顏色 (`[Color]`)
    public static func down(_ colors: [Color]) -> LinearGradient {
        linear(from: .top, to: .bottom, colors: colors)
    }
    
    /// `Gradient.down(color1, color2, color3)`
    public static func down(_ colors: Color...) -> LinearGradient {
        down(colors)
    }
    
    /// `Gradient.up(colors)`
    public static func up(_ colors: [Color]) -> LinearGradient {
        linear(from: .bottom, to: .top, colors: colors)
    }
    
    /// `Gradient.up(color1, color2, color3)`
    public static func up(_ colors: Color...) -> LinearGradient {
        up(colors)
    }
    
    
    /// `Gradient.toTrailing(colors)`
    /// - Parameters:
    ///   - colors: 漸層顏色 (`[Color]`)
    public static func toTrailing(_ colors: [Color]) -> LinearGradient {
        linear(from: .leading, to: .trailing, colors: colors)
    }
    
    /// `Gradient.toTrailing(c1, c2, c3)`
    public static func toTrailing(_ colors: Color...) -> LinearGradient {
        toTrailing(colors)
    }
    
    /// `Gradient.toLeading(colors)`
    public static func toLeading(_ colors: [Color]) -> LinearGradient {
        linear(from: .trailing, to: .leading, colors: colors)
    }
    
    /// `Gradient.toLeading(c1, c2, c3)`
    public static func toLeading(_ colors: Color...) -> LinearGradient {
        toLeading(colors)
    }
    
    
    /// `Gradient.toBottomRight(colors)`
    /// - Parameters:
    ///   - colors: 漸層顏色
    public static func toBottomRight(_ colors: [Color]) -> LinearGradient {
        linear(from: .topLeading, to: .bottomTrailing, colors: colors)
    }
    
    /// Gradient.toBottomRight(color1, color2, color3)
    public static func toBottomRight(_ colors: Color...) -> LinearGradient {
        toBottomRight(colors)
    }
    
    /// `Gradient.toTopLeft(colors)`
    public static func toTopLeft(_ colors: [Color]) -> LinearGradient {
        linear(from: .bottomTrailing, to: .topLeading, colors: colors)
    }
    
    /// `Gradient.toTopLeft(color1, color2, color3)`
    public static func toTopLeft(_ colors: Color...) -> LinearGradient {
        toTopLeft(colors)
    }
    
    
    /// `Gradient.topRight(colors)`
    /// - Parameters:
    ///   - colors: 漸層顏色
    public static func toTopRight(_ colors: [Color]) -> LinearGradient {
        linear(from: .bottomLeading, to: .topTrailing, colors: colors)
    }
    
    /// Gradient.toTopRight(color1, color2, color3)
    public static func toTopRight(_ colors: Color...) -> LinearGradient {
        toTopRight(colors)
    }
    
    /// Gradient.toBottomLeft(colors)
    public static func toBottomLeft(_ colors: [Color]) -> LinearGradient {
        linear(from: .topTrailing, to: .bottomLeading, colors: colors)
    }
    
    /// Gradient.toBottomLeft(color1, color2, color3)
    public static func toBottomLeft(_ colors: Color...) -> LinearGradient {
        toBottomLeft(colors)
    }
    
}

💈範例

// 4 directions
Gradient.toTrailing(.yellow, .red)
Gradient.down(.green, .blue)
Gradient.toLeading(.white, .gray, .black.opacity(0.6))
Gradient.up(.yellow, .red, .purple)

// 4 corners
Gradient.toTopLeft(.yellow, .red)
Gradient.toTopRight(.green, .blue)
Gradient.toBottomRight(.white, .gray, .black.opacity(0.6))
Gradient.toBottomLeft(.yellow, .red, .purple)       

📘 手冊

• SwiftUI ⟩ Drawing and Animation ⟩ LinearGradient

👥 相關

• .watermark()

• ShapeStyle extension ShapeStyle+LinearGradient for LinearGradient.

History

封存時間

1. (unknown)

2. 2024.01.03

2

import SwiftUI

extension Gradient {
    
    // general linear gradient ---------------------------
    
    /// `Gradient.linear(from: start, to: end, colors: colors)`
    ///
    /// - Parameters:
    ///   - from: 漸層開始的地方
    ///   - end: 漸層結束的地方
    ///   - colors: 漸層顏色 (`[Color]`)
    public static func linear(
        from start: UnitPoint, 
        to     end: UnitPoint, 
        colors    : [Color]       // use array
    ) -> LinearGradient 
    {
        LinearGradient(
            gradient  : Gradient(colors: colors), 
            startPoint: start, 
            endPoint  : end
        )
    }
    
    /// `Gradient.linear(from: start, to: end, colors: c1, c2, c3)`
    ///
    /// - Parameters:
    ///   - from: 漸層開始的地方
    ///   - end: 漸層結束的地方
    ///   - colors: 漸層顏色 (`Color...`)
    public static func linear(
        from start: UnitPoint, 
        to     end: UnitPoint, 
        colors    : Color...     // use variadic parameter
    ) -> LinearGradient 
    {
        linear(from: start, to: end, colors: colors)
    }
    
    // specialized linear gradients ------------------------
    
    /// `Gradient.down(colors)`
    /// - Parameters:
    ///   - colors: 漸層顏色 (`[Color]`)
    public static func down(_ colors: [Color]) -> LinearGradient {
        linear(from: .top, to: .bottom, colors: colors)
    }
    
    /// `Gradient.down(color1, color2, color3)`
    public static func down(_ colors: Color...) -> LinearGradient {
        down(colors)
    }
    
    /// `Gradient.up(colors)`
    public static func up(_ colors: [Color]) -> LinearGradient {
        linear(from: .bottom, to: .top, colors: colors)
    }
    
    /// `Gradient.up(color1, color2, color3)`
    public static func up(_ colors: Color...) -> LinearGradient {
        up(colors)
    }
    
    
    /// `Gradient.right(colors)`
    /// - Parameters:
    ///   - colors: 漸層顏色 (`[Color]`)
    public static func right(_ colors: [Color]) -> LinearGradient {
        linear(from: .leading, to: .trailing, colors: colors)
    }
    
    /// `Gradient.right(c1, c2, c3)`
    public static func right(_ colors: Color...) -> LinearGradient {
        right(colors)
    }
    
    /// `Gradient.left(colors)`
    public static func left(_ colors: [Color]) -> LinearGradient {
        linear(from: .trailing, to: .leading, colors: colors)
    }
    
    /// `Gradient.left(c1, c2, c3)`
    public static func left(_ colors: Color...) -> LinearGradient {
        left(colors)
    }
    
    
    /// `Gradient.bottomRight(colors)`
    /// - Parameters:
    ///   - colors: 漸層顏色
    public static func bottomRight(_ colors: [Color]) -> LinearGradient {
        linear(from: .topLeading, to: .bottomTrailing, colors: colors)
    }
    
    /// Gradient.bottomRight(color1, color2, color3)
    public static func bottomRight(_ colors: Color...) -> LinearGradient {
        bottomRight(colors)
    }
    
    /// `Gradient.topLeft(colors)`
    public static func topLeft(_ colors: [Color]) -> LinearGradient {
        linear(from: .bottomTrailing, to: .topLeading, colors: colors)
    }
    
    /// `Gradient.topLeft(color1, color2, color3)`
    public static func topLeft(_ colors: Color...) -> LinearGradient {
        topLeft(colors)
    }
    
    
    /// `Gradient.topRight(colors)`
    /// - Parameters:
    ///   - colors: 漸層顏色
    public static func topRight(_ colors: [Color]) -> LinearGradient {
        linear(from: .bottomLeading, to: .topTrailing, colors: colors)
    }
    
    /// Gradient.topRight(color1, color2, color3)
    public static func topRight(_ colors: Color...) -> LinearGradient {
        topRight(colors)
    }
    
    /// Gradient.bottomLeft(colors)
    public static func bottomLeft(_ colors: [Color]) -> LinearGradient {
        linear(from: .topTrailing, to: .bottomLeading, colors: colors)
    }
    
    /// Gradient.bottomLeft(color1, color2, color3)
    public static func bottomLeft(_ colors: Color...) -> LinearGradient {
        bottomLeft(colors)
    }
    
}

1

import SwiftUI

extension Gradient {
    
    // general linear gradient ---------------------------
    
    public static func linear(
        from start: UnitPoint, 
        to     end: UnitPoint, 
        colors    : [Color]       // use array
    ) -> LinearGradient 
    {
        LinearGradient(
            gradient  : Gradient(colors: colors), 
            startPoint: start, 
            endPoint  : end
        )
    }
    
    public static func linear(
        from start: UnitPoint, 
        to     end: UnitPoint, 
        colors    : Color...     // use variadic parameter
    ) -> LinearGradient 
    {
        linear(from: start, to: end, colors: colors)
    }
    
    // specialized linear gradients ------------------------
    
    // top to bottom
    public static func vertical(_ colors: Color...) -> LinearGradient {
        linear(from: .top, to: .bottom, colors: colors)
    }
    
    // leading to trailing
    public static func horizontal(_ colors: Color...) -> LinearGradient {
        linear(from: .leading, to: .trailing, colors: colors)
    }
    
    // top leading to bottom trailing
    public static func diagonal(_ colors: Color...) -> LinearGradient {
        linear(from: .topLeading, to: .bottomTrailing, colors: colors)
    }
    
    // top leading to bottom trailing
    public static func diagonal2(_ colors: Color...) -> LinearGradient {
        linear(from: .bottomLeading, to: .topTrailing, colors: colors)
    }
}