cruisediary / pastel

🎨 Gradient animation effect like Instagram

Pastel

🎨 Gradient animation effect like Instagram

Example

override func viewDidLoad() {
    super.viewDidLoad()

    let pastelView = PastelView(frame: view.bounds)

    // Custom Direction
    pastelView.startPastelPoint = .bottomLeft
    pastelView.endPastelPoint = .topRight

    // Custom Duration
    pastelView.animationDuration = 3.0

    // Custom Color
    pastelView.setColors([UIColor(red: 156/255, green: 39/255, blue: 176/255, alpha: 1.0),
                          UIColor(red: 255/255, green: 64/255, blue: 129/255, alpha: 1.0),
                          UIColor(red: 123/255, green: 31/255, blue: 162/255, alpha: 1.0),
                          UIColor(red: 32/255, green: 76/255, blue: 255/255, alpha: 1.0),
                          UIColor(red: 32/255, green: 158/255, blue: 255/255, alpha: 1.0),
                          UIColor(red: 90/255, green: 120/255, blue: 127/255, alpha: 1.0),
                          UIColor(red: 58/255, green: 255/255, blue: 217/255, alpha: 1.0)])

    pastelView.startAnimation()
    view.insertSubview(pastelView, at: 0)
}

🎨 Customize Gradient Colors

Designed by Alexander Zaytsev, https://dribbble.com/anwaltzzz

To run the example project, clone the repo, and run pod install from the Example directory first.

Requirements

Pastel is written in Swift 3+. iOS 8.0+ Required

Installation

Pastel is available through CocoaPods or Carthage.

Cocoapods

pod "Pastel"

Carthage

github "cruisediary/Pastel" ~> 0.6.0

Example

• Passcode: A simple Passcode application using RxSwift, ReactorKit, IGListKit with Pastel

Awesome

• awesome-swift - A collaborative list of awesome Swift libraries and resources. Feel free to contribute!
• awesome-gradient - 🌈 A curated list of awesome Gradient frameworks, libraries and software and resources

Author

cruz, [email protected]

Thanks

Many thanks to the contributors of this project.

License

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

pastel's Issues

Implement PastelLayer

I wanted to use PastelView with AVFoundation because I wanted to add some nice gradient effects into my video-editing application. A small issue with AVFoundation is that it works only with CALayer instances and it doesn't allow UIKit controls, so I'm basically stuck with CALayer and can't use PastelView.

So I took PastelView and created a PastelLayer, a CAGradientLayer's subclass, which does almost everything that PastelView can.

class PastelLayer: CAGradientLayer, CAAnimationDelegate {
    private struct Animation {
        static let keyPath = "colors"
        static let key = "ColorChange"
    }
    
    var animationDuration: TimeInterval = 5.0
    var animationBeginTime: TimeInterval?
    var gradientColors: [UIColor] = [#colorLiteral(red: 0.6117647059, green: 0.1529411765, blue: 0.6901960784, alpha: 1), #colorLiteral(red: 1, green: 0.2509803922, blue: 0.5058823529, alpha: 1), #colorLiteral(red: 0.4823529412, green: 0.1215686275, blue: 0.6352941176, alpha: 1), #colorLiteral(red: 0.1254901961, green: 0.2980392157, blue: 1, alpha: 1), #colorLiteral(red: 0.1254901961, green: 0.6196078431, blue: 1, alpha: 1), #colorLiteral(red: 0.3529411765, green: 0.4705882353, blue: 0.4980392157, alpha: 1), #colorLiteral(red: 0.2274509804, green: 1, blue: 0.8509803922, alpha: 1)]
    
    private var currentGradient: Int = 0
    
    override init() {
        super.init()
        startPoint = CGPoint(x: 0.0, y: 1.0)
        endPoint = CGPoint(x: 1.0, y: 0.0)
    }
    
    override init(layer: Any) {
        super.init(layer: layer)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func startAnimation() {
        removeAllAnimations()
        setup()
        animateGradient()
    }
    
    private func currentGradientSet() -> [CGColor] {
        guard gradientColors.count > 0 else { return [] }
        return [gradientColors[currentGradient % gradientColors.count].cgColor,
                gradientColors[(currentGradient + 1) % gradientColors.count].cgColor]
    }
    
    private func setup() {
        colors = currentGradientSet()
        drawsAsynchronously = true
    }
    
    func animateGradient() {
        currentGradient += 1
        let animation = CABasicAnimation(keyPath: Animation.keyPath)
        animation.duration = animationDuration
        if let time = animationBeginTime {
            animation.beginTime = time
        }
        animation.toValue = currentGradientSet()
        animation.fillMode = .forwards
        animation.isRemovedOnCompletion = false
        animation.delegate = self
        add(animation, forKey: Animation.key)
    }
    
    override func removeFromSuperlayer() {
        removeAllAnimations()
        super.removeFromSuperlayer()
    }
    
    func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
        if flag {
            colors = currentGradientSet()
            animateGradient()
        }
    }
}

I find this subclass to be incredibly useful for my purposes, I suggest that we add this subclass to the project, and then PastelView will be a simple wrapper around this subclass.
In fact, PastelView can use PastelLayer as its layerClass which would allow PastelView to interact with auto layout (although, I never tested it, but it should work just fine).

class PastelView: UIView {
    override static var layerClass: AnyClass {
        return PastelLayer.self
    }
}

Downside of this approach is that PastelView would become a simple wrapper around PastelLayer and will have a lot of computed variables and functions that will just call similar function on PastelLayer, e.g.

class PastelView: UIView {
    var endPoint: CGPoint {
        set {
            gradientLayer.endPoint = endPoint
        } get {
            return gradientLayer.endPoint
        }
    }
    
    private var gradientLayer: PastelLayer {
        return layer as! PastelLayer
    }
}

Anyway, I find this addition to be useful when working with CoreAnimation directly, and if you find this idea useful, I will be more than happy to make a PR.

Swift 4 Version

Hi,

great lib, is there a Swift 4 version planned?

Cheers!

Animation just work once on other view controllers.

It was working on first view controller. But when i use this on other view controllers on same story board and on other story board, just animated once and than stopped.
Do I have to set up the specific view controllers?

Animation stops when returns to view using Navigation Bar

If you press back to go back to the view with the animation (in the navigation controller stack) the animation doesn’t work.

Can't reset gradient view?

I have a button in my app which has a "random gradient" functionality.

How can I remove any existing gradient on the screen and replace it with a new one?

I don't see any functionality in the api code which will allow us to set new gradients without removing the entire view and re-adding it to the screen.

Add PastelColor

Pre-set of colors considering support itmeo gradient color set from https://webgradients.com/

Has anyone managed to add this on a navigation bar?

Has anyone managed to add this on a navigation bar?

I am trying to add this to my navigation bar, so far I have tried this:

let pastelView = PastelView(frame: (navigationController?.navigationBar.bounds)!)
        pastelView.startPoint = .bottomLeft
        pastelView.endPoint = .topRight
        pastelView.animationDuration = 3.0
        pastelView.setColors(colors: [UIColor(red: 156/255, green: 39/255, blue: 176/255, alpha: 1.0),
                              UIColor(red: 255/255, green: 64/255, blue: 129/255, alpha: 1.0),
                              UIColor(red: 123/255, green: 31/255, blue: 162/255, alpha: 1.0),
                              UIColor(red: 32/255, green: 76/255, blue: 255/255, alpha: 1.0),
                              UIColor(red: 32/255, green: 158/255, blue: 255/255, alpha: 1.0),
                              UIColor(red: 90/255, green: 120/255, blue: 127/255, alpha: 1.0),
                              UIColor(red: 58/255, green: 255/255, blue: 217/255, alpha: 1.0)])
        
        pastelView.startAnimation()
        
        self.navigationController?.view.addSubview(pastelView)

This will add the gradietn view to my navigation bar, but there is two problems.

1. it will place it self at the very top over my status bar, and since the status bar is 20 - 25px in height it will be 20 - 25px too short at the bottom.

2. If I hide the navigation bar on scroll, the navigation bar will get hidden but not the gradient view

Question: memory seems to be leaked

Dear Community,

Hello, I'm Masa. Pardon my stupid question.
I was trying Pastel with Memory Graph Debug, and it seemed to cause memory leak.
I also confirmed Passcode which used Pastel, and I confirmed same phenomenon.
(It seems to cause when initializing colors property and inside PastelView#currentGradientSet() method.)

I've been searching and thinking the reason and solution, but I've not found a solution yet...
(I found some articles which say objects included "core" framework originally aren't be located under ARC, so I suspect this relates to memory leak but I've not found a perfect solution.)

So, Can I use Pastel ignoring this phenomenon? Is that not a big problem?

I'm sorry to bother you.

Thanks,
Masa

Can't remove "Using low GPU priority for background rendering."

Can't seem to find where it prints the above message.

Question: How did you do to manage the updating bacground without concurrency issues...

Hey pal, I'm working on something that uses this kind of background, yours works like a champ.. But I don't get how you update the background without having issues with the other tasks, like writing on the keyboard without getting stuck while the animation occurs ...

I tried to use dispatchQue but seems like I'm missing something out...

Would you mind giving me a little hint on how did you achieved such thing?

Thanks!

Memory leaked CG colors

I tested application with xcode profiler.

Result is this

I think the problem is when CGColor objects are creating every animationGradient call.

Maybe caching the objects will solve it ?!

Support different orientations

How can I support differents orientations? Vertical and horizontal.

Unable to find a specification for `Pastel`

I have been trying to integrate Pastel into my project using cocoapods and getting this error when i do a "Pod Install"

it's awesome，how can i use it in flutter/dart

pastel view remain below the status bar

im using ios 11 for some reason pastel view remain bellow the status bar it will not go full screen. Is it
to just use the gradient without the animation

Restore state after application enters background.

Wherever someone leaves my app and lets it go into the background, when they then later open the app, the gradient is no longer cycling.

Is there away to restore the state the gradient was in before being sent to background?

thank you.

I think I should be able to do it with func applicationDidBecomeActive(_ application: UIApplication) { but I don't know how

Carthage build failed

Environment

Xcode 10 + Swift 4.2

Carthage command:

carthage update Pastel --platform ios --no-use-binaries

Build output

Build Failed
Task failed with exit code 65:
/usr/bin/xcrun xcodebuild -project /Users/lvjun/Desktop/StarOrder3-iOS/Carthage/Checkouts/Pastel/Pastel.xcodeproj -scheme Pastel -configuration Release -derivedDataPath /Users/lvjun/Library/Caches/org.carthage.CarthageKit/DerivedData/10.1_10B61/Pastel/0.5.1 -sdk iphoneos ONLY_ACTIVE_ARCH=NO CODE_SIGNING_REQUIRED=NO CODE_SIGN_IDENTITY= CARTHAGE=YES archive -archivePath /var/folders/hl/__r3qrxd5_168lfx7v85xf3c0000gn/T/Pastel SKIP_INSTALL=YES GCC_INSTRUMENT_PROGRAM_FLOW_ARCS=NO CLANG_ENABLE_CODE_COVERAGE=NO STRIP_INSTALLED_PRODUCT=NO (launched in /Users/lvjun/Desktop/StarOrder3-iOS/Carthage/Checkouts/Pastel)

This usually indicates that project itself failed to compile. Please check the xcodebuild log for more details: /var/folders/hl/__r3qrxd5_168lfx7v85xf3c0000gn/T/carthage-xcodebuild.c9ufBT.log

Support Carthage

• Support carthage

Lag in collection views

When launching my app with PastelView, the tableviews and collectionviews scroll with a slight lag. Moving the app to background and back to foreground fixes it, also presenting another view controller and dismissing it fixes the issue but I don't understand why.
Does anyone have any clue or a suggestion of how to fix it?

Pastelview does not cover 100% of screen width on iphone 6 plus

I added a uiview using storyboard and gave it a class of PastelView

Autolayout contraints:
Top space to superview: 0
Trailing/leading space to superview: 0
Height: 45

More or less a uiview that is 45px high and hugs the top/left/right sides of my view.

ViewdidLoad:

self.testview.startPoint = .topRight
self.testview.endPoint = .bottomLeft
self.testview.animationDuration = 3.0
self.testview.setColors(colors: [UIColor(red:0.99, green:0.19, blue:0.35, alpha:1.0),
                                                      UIColor(red:1.00, green:0.37, blue:0.57, alpha:1.0)])
self.testview.startAnimation()

When I run the simulator or test it on a real iphone 5 device everything looks fine, but when I run a iphone 6 plus or test it on a real iphone 6 plus device I can see that the gradient view doesnt cover the whole width, it gets to short on the right side:

The gradient animation still works but it doesnt cover 100% of the width.

Is there a way to continue the gradient animation on a different ViewController?

When running a gradient animation on one ViewController, is it possible to continue the same animation from its current state on a different ViewController upon transitioning?

QUESTION: How to put the animation on a continuous loop.

Hi all,

How would I have the animation on a smooth, continuous loop? Might be something small I'm missing. Thank you.

WORKAROUND: Animation stops when another view controller is presented

For those who are still having these issues, and looking for an approach to it, I highly recommend using Hero for the transition between view controllers instead of the default one.

From the Hero documentation

"It won't modify any of your views' states other than hiding them during the animation,"

which really suitable for our case here since the previous view's just hiding, thus the transition doesn't interrupt the animation of the gradients at all.

You can find HERO library through this link: https://github.com/HeroTransitions/Hero

Happy coding everyone : )

Animation does not cycle through all colors

(Sorry if I'm doing this incorrectly, somewhat new to issues)

In my app I've set a PastelView as a background view of a UITableView in a UITableViewController. The PastelView will only animate through the first 3 colors provided. The default configuration (when no custom colors, start/end points, or duration are set) has the same issue.

Add PastelLabel

PastelLabel

desc

• gradient animation label
• UILabel + PastelView WrapperView using layer mask

Swift 4.2 Support

Great component however it does not seem to compile with Swift 4.2. Are there any plans to update this?

Animation stops if another view controller is presented

My controller includes a ImagePickerController, as soon as that displays, the background stops animating. Any ideas why? and how can i make it move again when the imagePicker dismisses

Support animation direction

AS IS

• ONLY TOP-RIGHT to BOTTOM-LEFT

TO BE

• Add Direction Enum

enum Point {
  case left
  case top
  case right
  case bottom
  case topLeft
  case topRight
  case bottomLeft
  case bottomRight
  case custom(position: CGPoint)
}

EXAMPLE

  pastelView.startPoint = .left
  pastelView.endPoint = .custom(CGPoint(x: 0.8, y: 1.0))