nikoloutsos / fancygradient

Powerful animated gradientView in swift 🌈

FancyGradient is a UIView subclass which let's you animate gradients in your iOS app. It is purely written in Swift.

Quickstart

Static gradient

let fancyView = FancyGradientView(colors: [UIColor.black, UIColor.orange],
                                  direction: .down,
                                  type: .axial)
view.addSubview(fancyView)

Animate your fancyView

// Animate the colors
fancyView.animate(newColors: [UIColor.red, UIColor.black], duration: 4)

// Animate the direction
fancyView.animate(newDirection: .left, duration: 4)

Be imaginative and come up with your animations 🌈

let myCustomAnimation = CustomAnimation()
            .then(EmptyAnimation(duration: 1)) // Delay 1 second
            .then(ColorAnimation(newColors: [UIColor.blue, UIColor.cyan], duration: 3)) // Color animation
            .then(ColorAnimation(newColors: [UIColor.cyan, UIColor.blue], duration: 3)) // Another color animation after previous finished
            .then(ColorAnimation(newColors: [UIColor.purple, UIColor.blue, UIColor.black], duration: 3))
            .then(DirectionAnimation(newDirection: .down, duration: 2))
fancyView.animate(animation: myCustomAnimation)

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 FancyGradient using Cocoapods, simply add the following line to your Podfile:

pod "FancyGradient"

Then run the command:

pod install

For more information see here.

Swift Package Manager

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

CustomAnimation

Custom animation supports almost every complex animations.

let myCustomAnimation = CustomAnimation(animID: "myAnimationID")
        .then(EmptyAnimation(duration: 1)) // Delay 1 second
        .then(
            CombineAnimation( // Run Direction and Color animation at the same time.(combine them)
                DirectionAnimation(newDirection: .right, duration: 1),
                ColorAnimation(newColors: [UIColor.black, UIColor.green], duration: 3)
            )
        )
        .then(DirectionAnimation(newDirection: .right, duration: 2))
        .then(DirectionAnimation(newDirection: .diagonalBottomLeftTopRight, duration: 2))
    fancyView.animate(animation: myCustomAnimation)

Types	Explanation
DirectionAnimation	Animate gradient Direction
ColorAnimation	Animate gradient colors
ColorStopsAnimation	Animate the location of each gradient color stop
EmptyAnimation	Does nothing. Useful for adding delay
CombineAnimation	Combine 2 or more animations to start simultaneously

FancyGradientViewDelegate

Provide an implementation of FancyGradientViewDelegate to inform you when animation finished.

fancyView.delegate = self

extension ViewController: FancyGradientViewDelegate {
    func animationDidFinished(animId: String) {
        print("Finished animation \(animId)")
        // Tip: here you can show other UI elements after fisnished animation.
    }
}

and then

let myCustomAnimation = CustomAnimation(animID: "myAnimationID")
            .then(EmptyAnimation(duration: 1)) // Delay 1 second
            .then(ColorAnimation(newColors: [UIColor.blue, UIColor.cyan], duration: 3)) // Color animation after the delay
            .then(ColorAnimation(newColors: [UIColor.cyan, UIColor.blue], duration: 3)) // Another color animation after previous finished
            
fancyView.animate(animation: myCustomAnimation)