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>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
colors
- An array of colors between which the gradient will transition
Available customizations - modifiers
numberOfSimultaneousColors(Int)
- Number of colors on screen at any given time, can be more, equal or less than colors in the arraysetAnimation(Animation)
- Animation of the transition of one color to anothergradientPoints(start:end:)
- Standard linear gradient control points
Presets
You can use preselected colors from GradientPreset for a quick start
Examples
To try AnimatedGradient examples:
- Clone the repo
https://github.com/exyte/AnimatedGradient.git
- Open
Example.xcodeproj
- Try it!
Installation
Swift Package Manager
dependencies: [
.package(url: "https://github.com/exyte/AnimatedGradient.git")
]
Requirements
- iOS 14.0+
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