/AnimatedGradientView

🎞 Powerful gradient animations made simple for iOS.

Primary LanguageSwiftMIT LicenseMIT

Animated Gradient View Logo
Animated Gradient View

CI Status Version Carthage compatible Maintainability License Platform Swift 5.0 Reviewed by Hound

AnimatedGradientView is a UIView subclass which makes it simple to add animated gradients to your iOS app. It is written purely in Swift. Further documentation available as part of this blog post.

Features

  • Easily create animated or static gradients.
  • Configurable gradient direction.
  • Use hex values, RGB values or names to specify colors (including color names specified in asset catalogs on iOS 11 or higher).
  • Supports animating between gradients with a varying number of colors.
  • Supports axial, radial and on iOS 12, conic gradients.
  • Auto-animate or animate manually using the startAnimating and stopAnimating functions.
  • Loop animations with the autoRepeat property.

Example

To learn more about how to use AnimatedGradientView, check out the blog post, take a look at the example app, the demo over on Appetize.io, or make use of the table of contents below:

Quickstart

Creating and adding a new AnimatedGradientView as a subview is as simple as follows:

let animatedGradient = AnimatedGradientView(frame: view.bounds)
animatedGradient.direction = .up
animatedGradient.animationValues = [(colors: ["#2BC0E4", "#EAECC6"], .up, .axial),
(colors: ["#833ab4", "#fd1d1d", "#fcb045"], .right, .axial),
(colors: ["#003973", "#E5E5BE"], .down, .axial),
(colors: ["#1E9600", "#FFF200", "#FF0000"], .left, .axial)]
view.addSubview(animatedGradient)

You'll also need to remember to import the framework using import AnimatedGradientView.

Requirements

AnimatedGradientView is written in Swift 5.0 and is available on iOS 8.0 or higher.

Installation

Cocoapods

CocoaPods is a dependency manager which integrates dependencies into your Xcode workspace. To install it using RubyGems run:

gem install cocoapods

To install AnimatedGradientView using Cocoapods, simply add the following line to your Podfile:

pod "AnimatedGradientView"

Then run the command:

pod install

For more information see here.

Carthage

Carthage is a dependency manager which produces a binary for manual integration into your project. It can be installed via Homebrew using the commands:

brew update
brew install carthage

In order to integrate AnimatedGradientView into your project via Carthage, add the following line to your project's Cartfile:

github "rwbutler/AnimatedGradientView"

From the macOS Terminal run carthage update --platform iOS to build the framework then drag AnimatedGradientView.framework into your Xcode project.

For more information see here.

Swift Package Manager

Swift Package Manager is a dependency manager built right into Xcode 11 and higher. From the File menu, add a new Swift Package dependency to your project and paste in this project's Git URL.

Usage

Static Gradients

If all you need is a gradient without animation this is easily achieved by setting the colors property to an array of UIColor as follows:

let gradient = AnimatedGradientView(frame: view.bounds)
gradient.colors = [[UIColor.blue, UIColor.red]]
gradient.direction = .up
view.addSubview(gradient)

The colors property is actually an array of UIColor arrays. If further UIColor arrays are specified then animation will occur between them. Using the direction property it also possible to define the direction of the gradient.

If it is more convenient to work with hex color strings rather than UIColor then make use of the colorStrings property instead as follows:

let gradient = AnimatedGradientView(frame: view.bounds)
gradient.colorStrings = [["#3224AE", "#FF66FF"]]
gradient.direction = .up
view.addSubview(gradient)

Gradient Types

AnimatedGradientView supports three types of gradients which can be set using the type property.

let gradient = AnimatedGradientView(frame: view.bounds)
gradient.autoAnimate = false
gradient.colorStrings = [["#3224AE", "#FF66FF"]]
gradient.type = .axial
view.addSubview(gradient)

The three gradient types supported are:

Axial

This is your standard linear gradient blending between color stops from the start point to the end point.

Axial Gradient

Radial

 The gradient appears to radiate outwards from the start point (at the center) towards the end point in a circular fashion blending between the color stops from the start point to end point as with a linear gradient.

Radial Gradient

Conic

 This type of gradient is only available from iOS 12 onwards. It is similar to a radial gradient in that the start point represents the center of the circle and the end point represents a point on the outer edge. However, whilst a radial gradient blends between color stops from the start point to the end point (from the center to the outer edge), a conic gradient places the color stops along the outer edge of the circle blending between the color stops from 0 degrees to 360 degrees.

Conic Gradient

Author

Ross Butler

License

AnimatedGradientView is available under the MIT license. See the LICENSE file for more info.

Additional Software

Controls

AnimatedGradientView
AnimatedGradientView

Frameworks

  • Cheats - Retro cheat codes for modern iOS apps.
  • Connectivity - Improves on Reachability for determining Internet connectivity in your iOS application.
  • FeatureFlags - Allows developers to configure feature flags, run multiple A/B or MVT tests using a bundled / remotely-hosted JSON configuration file.
  • FlexibleRowHeightGridLayout - A UICollectionView grid layout designed to support Dynamic Type by allowing the height of each row to size to fit content.
  • Hash - Lightweight means of generating message digests and HMACs using popular hash functions including MD5, SHA-1, SHA-256.
  • Skylark - Fully Swift BDD testing framework for writing Cucumber scenarios using Gherkin syntax.
  • TailorSwift - A collection of useful Swift Core Library / Foundation framework extensions.
  • TypographyKit - Consistent & accessible visual styling on iOS with Dynamic Type support.
  • Updates - Automatically detects app updates and gently prompts users to update.
Cheats Connectivity FeatureFlags Skylark TypographyKit Updates
Cheats Connectivity FeatureFlags Skylark TypographyKit Updates

Tools

  • Clear DerivedData - Utility to quickly clear your DerivedData directory simply by typing cdd from the Terminal.
  • Config Validator - Config Validator validates & uploads your configuration files and cache clears your CDN as part of your CI process.
  • IPA Uploader - Uploads your apps to TestFlight & App Store.
  • Palette - Makes your TypographyKit color palette available in Xcode Interface Builder.
Config Validator IPA Uploader Palette
Config Validator IPA Uploader Palette