🎞 Powerful gradient animations made simple for iOS.

Overview
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:

What's new in AnimatedGradientView 3.0.0?

AnimatedGradientView 3.0.0 provides support for Xcode 12 and raises the minimum deployment target to iOS 9 (dropping support for iOS 8).

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
Comments
  • Working with SKSpriteNodes

    Working with SKSpriteNodes

    Hi again. Not an issue, more a query, so I hope it's OK to post here?

    I'm working with a gamescene (SKscene) using lots of nodes with moving sprites etc. I'm trying to insert the AnimatedGradientView between sprite nodes and Background image nodes. When I add it as a new view, it defaults to a layer above all the SKScene nodes.

    Is there a way to add AnimatedGradientView to a SKSpriteNode? Been scratching my head on this...

    🤔

    opened by Proudspark 7
  • Error with Quickstart demo

    Error with Quickstart demo

    Successfully installed via cocoapods. Added import AnimatedGradientView (might be worth putting this step to your Quickstart instructions?).

    Not able to test your Quickstart code, as I'm receiving the following error:

    Value of type 'AnimatedGradientView' has no member 'animationValues'

    Am I missing something obvious? Thanks.

    opened by Proudspark 7
  • [Feature request] Pause animation

    [Feature request] Pause animation

    Stopping the animation seems to reset the color gradient, but I'm wondering if there is a way to 'pause' the animation such that when paused the gradient colors don't reset, and when startAnimation() is called, the animation picks up from the paused state. Thanks

    enhancement 
    opened by aritroper 2
  • [Question] update colours array

    [Question] update colours array

    HI I was just wondering if it was at all possible to update the UIColors while the animation is playing? All my experiments so far have been unsuccessful.

    help wanted 
    opened by esmondmissen 2
  • Swift 5.0

    Swift 5.0

    Hi Ross... Can't compile currently in Xcode 10.2.

    Updated all pods, changed Build Settings/Swift Language Version in main project and pod project to 5.0 (necessary?)

    Getting error: Use of unresolved identifier '_debugPrecondition' referring to line 14 of Collection+UniqueMap.swift

    opened by Proudspark 2
  • Resume gradient

    Resume gradient

    Hi, how do I resume the gradient on viewWillAppear after the app has been in the background? Right now I just recall the gradient function which restarts it from the start. Is there a way to pick up where it was left off?

    Also, when iPads rotate they leave a massive gap on the side, I have tried calling a .setNeedsDisplay() and self.view.setNeedsLayout() but neither fix the issue

    Using the latest version, installed with swift package manager.

    enhancement 
    opened by iambenmitchell 1
  • Update Package.swift

    Update Package.swift

    Bumped minimum iOS deployment version from 8 to 9 in order to comply with Xcode 12's minimum deployment range. Fixes compiler warning when installing via SPM.

    opened by Sam-Spencer 1
  • Fixes build issues when using as a Swift Package

    Fixes build issues when using as a Swift Package

    It seems Xcode 11 needs frameworks like CoreGraphics to be explicitly imported for Swift Packages to build properly.

    I've gone ahead and imported all the necessary system frameworks in the files where they are used in order to fix the Swift PM experience.

    Also added a small blurb in the README about Swift PM... nothing fancy.

    opened by Sam-Spencer 1
  • Animation does not loop

    Animation does not loop

    The animated gradient view does not loop seamlessly, even if the first and the last gradient in the array are the same. To me, this does not seem like expected behavior.

    The error looks a bit like when you do a CA animation and you do not set the value to the final value of the animation or do not set .isRemovedOnCompletion = false and it "snaps" back.

    I used the code from the Quickstart with just three gradients with the first and the third gradient being the same. Do you have that issue too?

    Thanks!

    opened by juliusbrendle 0
Releases(3.1.0)
  • 3.1.0(Jan 2, 2021)

    [3.1.0] - 2021-01-02

    Added

    • Support for pausing and resuming animation.
    • Support for auto-resuming animation on application becoming active.
    Source code(tar.gz)
    Source code(zip)
🌈 Highly customizable Core Graphics based gradient view for iOS

MKGradientView Highly customizable Core Graphics based gradient view Features Available gradient types: Linear (Axial) Radial (Circular) Conical (Angu

Max Konovalov 167 Dec 27, 2022
Powerful and easy-to-use vector graphics Swift library with SVG support

Macaw Powerful and easy-to-use vector graphics Swift library with SVG support We are a development agency building phenomenal apps. What is Macaw? Mac

Exyte 5.9k Jan 2, 2023
Drawing and Geometry made easy on iOS - now in Swift 3.0

InkKit Swift Support Swift 4.0 InkKit is Swift 4.0 by default, so to use that just include InkKit in your podfile: pod 'InkKit' Swift 3.2 In order to

Shaps 373 Dec 27, 2022
Crafter - Xcode project configuration CLI made easy.

How do you setup your Cocoa projects? Do you always set same warnings, clone configurations and do bunch of other stuff? Or maybe you work in a big co

Krzysztof Zabłocki 548 Nov 28, 2022
A simple, declarative, functional drawing framework, in Swift!

DePict - A simple, declarative, functional drawing framework. To produce a drawing, call the Draw function (just type Draw and let autocomplete do the

David Cairns 35 Sep 16, 2021
A simple, performant, and lightweight SVG parser

Key Features Parsing performance that meets or beats other popular SVG Frameworks A simple architecture, optimized for extension, flexibility and deve

Michael Choe 1.8k Dec 29, 2022
NXDrawKit is a simple and easy but useful drawing kit for iPhone

⚠️ To use with Swift 5.0 please ensure you are using >= 0.8.0 ⚠️ ⚠️ To use with Swift 4.2 please ensure you are using >= 0.7.1 ⚠️ ⚠️ To use with Swift

Nicejinux 1.3k Dec 31, 2022
it's simple drawing app.

IOSObjC_KidsBoard The application is develop in Objective IOS. kids can draw whatever they want and also kids can save the drawing as well as undo era

Vnnovate Solutions Pvt Ltd 0 Oct 28, 2021
it's simple drawing app

IOSObjC_KidsBoard The application is develop in Objective IOS. kids can draw whatever they want and also kids can save the drawing as well as undo era

Jiten Engineer 0 Oct 28, 2021
A simple game application for iPad using SpriteKit, SKCropNode

Whack-a-Penguin A simple game application for iPad using SpriteKit, SKCropNode,

NIKOLAY NIKITIN 1 Sep 12, 2022
The code for my CoreGraphics+CoreAnimation talk, held during the 2012 iOS Game Design Seminar at the Technical University Munich.

PKCoreTechniques ======= Core Techniques is the result of a presentation I held at the Technical University of Munich during the 'iOS Game Design Semi

Philip Kluz 143 Sep 21, 2022
iOS utility classes for asynchronous rendering and display.

YYAsyncLayer iOS utility classes for asynchronous rendering and display. (It was used by YYText) Simple Usage @interface YYLabel : UIView @property NS

null 672 Dec 27, 2022
An iOS framework for easily adding drawings and text to images.

jot is an easy way to add touch-controlled drawings and text to images in your iOS app. What's jot for? Annotating Images jot is the easiest way to ad

IFTTT 1.8k Oct 28, 2022
Display and interact with SVG Images on iOS / OS X, using native rendering (CoreAnimation)

SVGKit SVGKit is a Cocoa framework for rendering SVG files natively: it's fast and powerful. Some additional info and links are on the wiki Versions:

null 4.3k Jan 3, 2023
Visual designing library for iOS & OSX

ProcessingKit ProcessingKit is a Visual designing library for iOS & OSX. ProcessingKit written in Swift ?? and you can write like processing. Demo Dem

Atsuya Sato 333 Nov 12, 2022
GraphLayout - iOS UI controls to visualize graphs. Powered by Graphviz

GraphLayout GraphLayout - UI controls for graph visualization. It is powered by Graphviz. Graph visualization is a way of representing structural info

null 97 Sep 26, 2022
The application is develop in Objective IOS. kids can draw whatever they want and also kids can save the drawing as well as undo erase the drawing.

IOSObjC_KidsBoard The application is develop in Objective IOS. kids can draw whatever they want and also kids can save the drawing as well as undo era

Haresh 0 Oct 28, 2021
Create Live Graphics in SwiftUI (iOS, tvOS & macOS)

PixelUI import SwiftUI import PixelUI struct ContentView: View { var body: some View { GeometryReader { geo in

Anton Heestand 21 Dec 17, 2022
A lightweight XMLParser for assembling and parsing XML values written for iOS 8+ in Swift 2.

Overview Description Requirements Installation Usage Author License Description XMLParser lets you convert a pure Swift dictionary into XML string and

Eugene Mozharovsky 75 Feb 2, 2022