Home

Awesome

<a href="https://exyte.com/"><picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/exyte/media/master/common/header-dark.png"><img src="https://raw.githubusercontent.com/exyte/media/master/common/header-light.png"></picture></a>

<a href="https://exyte.com/"><picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/exyte/media/master/common/our-site-dark.png" width="80" height="16"><img src="https://raw.githubusercontent.com/exyte/media/master/common/our-site-light.png" width="80" height="16"></picture></a>     <a href="https://twitter.com/exyteHQ"><picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/exyte/media/master/common/twitter-dark.png" width="74" height="16"><img src="https://raw.githubusercontent.com/exyte/media/master/common/twitter-light.png" width="74" height="16"> </picture></a> <a href="https://exyte.com/contacts"><picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/exyte/media/master/common/get-in-touch-dark.png" width="128" height="24" align="right"><img src="https://raw.githubusercontent.com/exyte/media/master/common/get-in-touch-light.png" width="128" height="24" align="right"></picture></a>

<table> <tbody> <tr> <td> <img src="https://github.com/exyte/AnimatedGradient/assets/9447630/b205fa00-b0a0-4b07-90b6-08b3776932c6" /> </td> <td> <img src="https://github.com/exyte/AnimatedGradient/assets/9447630/161eee68-f8df-4066-ab45-8b6342d5c343" /> </td> <td> <img src="https://github.com/exyte/AnimatedGradient/assets/9447630/345814e0-ea6a-4df0-982d-161dcc510df1" /> </td> </tr> </tbody> </table> <p><h1 align="left">Animated Gradient</h1></p> <p><h4>Animated linear gradient library written with SwiftUI</h4></p>

License: MIT

Usage

Minimal example

import AnimatedGradient

struct ContentView: View {
    var body: some View {
        AnimatedLinearGradient(colors: [.red, .green, .blue])
    }
}

With modifiers

import AnimatedGradient

struct ContentView: View {
    var body: some View {
        AnimatedLinearGradient(colors: [.red, .green, .blue])
            .numberOfSimultaneousColors(2)
            .setAnimation(.linear(duration: 5))
            .gradientPoints(start: .bottomLeading, end: .topTrailing)
    }
}

Required parameters - init

Available customizations - modifiers

Presets

You can use preselected colors from GradientPreset for a quick start

Examples

To try AnimatedGradient examples:

Installation

Swift Package Manager

dependencies: [
    .package(url: "https://github.com/exyte/AnimatedGradient.git")
]

Requirements

Our other open source SwiftUI libraries

PopupView - Toasts and popups library
Grid - The most powerful Grid container
ScalingHeaderScrollView - A scroll view with a sticky header which shrinks as you scroll
AnimatedTabBar - A tabbar with a number of preset animations
MediaPicker - Customizable media picker
Chat - Chat UI framework with fully customizable message cells, input view, and a built-in media picker
OpenAI Wrapper lib for OpenAI REST API
ConcentricOnboarding - Animated onboarding flow
FloatingButton - Floating button menu
ActivityIndicatorView - A number of animated loading indicators
ProgressIndicatorView - A number of animated progress indicators
FlagAndCountryCode - Phone codes and flags for every country
SVGView - SVG parser
LiquidSwipe - Liquid navigation animation