DOFavoriteButton

Cute Animated Button written in Swift. It could be just right for favorite buttons!

Requirements

iOS 7.0+
Swift 1.2

Installation

Carthage

Add the following line to your Cartfile:

github "okmr-d/DOFavoriteButton"

CocoaPods

Add the following line to your Podfile:

pod 'DOFavoriteButton'

Manual

Just drag DOFavoriteButton.swift to your project.

How to use

1. Add a flat icon image

2. Create a button

・By coding

let button = DOFavoriteButton(frame: CGRectMake(0, 0, 44, 44), image: UIImage(named: "star.png"))
self.view.addSubview(button)

・By using Storyboard or XIB

Add Button object and set Custom Class DOFavoriteButton
Connect Outlet

3. Add tapped function

button.addTarget(self, action: Selector("tapped:"), forControlEvents: .TouchUpInside)

func tapped(sender: DOFavoriteButton) {
    if sender.selected {
        // deselect
        sender.deselect()
    } else {
        // select with animation
        sender.select()
    }
}

Customize

You can change button color & animation duration:

button.imageColorOff = UIColor.brownColor()
button.imageColorOn = UIColor.redColor()
button.circleColor = UIColor.greenColor()
button.lineColor = UIColor.blueColor()
button.duration = 3.0 // default: 1.0

Result:

DEMO

There is a demo project added to this repository, so you can see how it works.

Credit/Inspiration

DOFavoriteButton was inspired by Twitter's iOS App.

License

This software is released under the MIT License.

// // DOFavoriteButton.swift // DOFavoriteButton // // Created by Daiki Okumura on 2015/07/09. // Copyright (c) 2015 Daiki Okumura. All rights reserved. // // This software is released under the MIT License. // http://opensource.org/licenses/mit-license.php //

import UIKit

@IBDesignable public class DOFavoriteButton: UIButton {

private var imageShape: CAShapeLayer!
@IBInspectable public var image: UIImage! {
    didSet {
        createLayers(image: image)
    }
}
@IBInspectable public var imageColorOn: UIColor! = UIColor(red: 255/255, green: 172/255, blue: 51/255, alpha: 1.0) {
    didSet {
        if (isSelected) {
            imageShape.fillColor = imageColorOn.cgColor
        }
    }
}
@IBInspectable public var imageColorOff: UIColor! = UIColor(red: 136/255, green: 153/255, blue: 166/255, alpha: 1.0) {
    didSet {
        if (!isSelected) {
            imageShape.fillColor = imageColorOff.cgColor
        }
    }
}

private var circleShape: CAShapeLayer!
private var circleMask: CAShapeLayer!
@IBInspectable public var circleColor: UIColor! = UIColor(red: 255/255, green: 172/255, blue: 51/255, alpha: 1.0) {
    didSet {
        circleShape.fillColor = circleColor.cgColor
    }
}

private var lines: [CAShapeLayer]!
@IBInspectable public var lineColor: UIColor! = UIColor(red: 250/255, green: 120/255, blue: 68/255, alpha: 1.0) {
    didSet {
        for line in lines {
            line.strokeColor = lineColor.cgColor
        }
    }
}

private let circleTransform = CAKeyframeAnimation(keyPath: "transform")
private let circleMaskTransform = CAKeyframeAnimation(keyPath: "transform")
private let lineStrokeStart = CAKeyframeAnimation(keyPath: "strokeStart")
private let lineStrokeEnd = CAKeyframeAnimation(keyPath: "strokeEnd")
private let lineOpacity = CAKeyframeAnimation(keyPath: "opacity")
private let imageTransform = CAKeyframeAnimation(keyPath: "transform")

@IBInspectable public var duration: Double = 1.0 {
    didSet {
        circleTransform.duration = 0.333 * duration // 0.0333 * 10
        circleMaskTransform.duration = 0.333 * duration // 0.0333 * 10
        lineStrokeStart.duration = 0.6 * duration //0.0333 * 18
        lineStrokeEnd.duration = 0.6 * duration //0.0333 * 18
        lineOpacity.duration = 1.0 * duration //0.0333 * 30
        imageTransform.duration = 1.0 * duration //0.0333 * 30
    }
}

override public var isSelected : Bool {
    didSet {
        if (isSelected != oldValue) {
            if isSelected {
                imageShape.fillColor = imageColorOn.cgColor
            } else {
                deselect()
            }
        }
    }
}

public convenience init() {
    self.init(frame: CGRect.zero)
}

public override convenience init(frame: CGRect) {
    self.init(frame: frame, image: UIImage())
}

public init(frame: CGRect, image: UIImage!) {
    super.init(frame: frame)
    self.image = image
    createLayers(image: image)
    addTargets()
}

public required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    createLayers(image: UIImage())
    addTargets()
}

private func createLayers(image: UIImage!) {
    self.layer.sublayers = nil

    let imageFrame = CGRect(x: frame.size.width / 2 - frame.size.width / 4, y: frame.size.height / 2 - frame.size.height / 4, width: frame.size.width / 2, height: frame.size.height / 2)
    let imgCenterPoint = CGPoint(x: imageFrame.midX, y: imageFrame.midY)
    let lineFrame = CGRect(x: imageFrame.origin.x - imageFrame.width / 4, y: imageFrame.origin.y - imageFrame.height / 4, width: imageFrame.width * 1.5, height: imageFrame.height * 1.5)

    //===============
    // circle layer
    //===============
    circleShape = CAShapeLayer()
    circleShape.bounds = imageFrame
    circleShape.position = imgCenterPoint
    circleShape.path = UIBezierPath(ovalIn: imageFrame).cgPath
    circleShape.fillColor = circleColor.cgColor
    circleShape.transform = CATransform3DMakeScale(0.0, 0.0, 1.0)
    self.layer.addSublayer(circleShape)

    circleMask = CAShapeLayer()
    circleMask.bounds = imageFrame
    circleMask.position = imgCenterPoint
    circleMask.fillRule = kCAFillRuleEvenOdd
    circleShape.mask = circleMask

    let maskPath = UIBezierPath(rect: imageFrame)
    maskPath.addArc(withCenter: imgCenterPoint, radius: 0.1, startAngle: CGFloat(0.0), endAngle: CGFloat(M_PI * 2), clockwise: true)
    circleMask.path = maskPath.cgPath

    //===============
    // line layer
    //===============
    lines = []
    for i in 0 ..< 5 {
        let line = CAShapeLayer()
        line.bounds = lineFrame
        line.position = imgCenterPoint
        line.masksToBounds = true
        line.actions = ["strokeStart": NSNull(), "strokeEnd": NSNull()]
        line.strokeColor = lineColor.cgColor
        line.lineWidth = 1.25
        line.miterLimit = 1.25
        line.path = {
            let path = CGMutablePath()
            path.move(to: CGPoint(x: lineFrame.midX, y: lineFrame.midY))
            path.addLine(to: CGPoint(x: lineFrame.origin.x + lineFrame.width / 2, y: lineFrame.origin.y))
            return path
            }()
        line.lineCap = kCALineCapRound
        line.lineJoin = kCALineJoinRound
        line.strokeStart = 0.0
        line.strokeEnd = 0.0
        line.opacity = 0.0
        line.transform = CATransform3DMakeRotation(CGFloat(M_PI) / 5 * (CGFloat(i) * 2 + 1), 0.0, 0.0, 1.0)
        self.layer.addSublayer(line)
        lines.append(line)
    }

    //===============
    // image layer
    //===============
    imageShape = CAShapeLayer()
    imageShape.bounds = imageFrame
    imageShape.position = imgCenterPoint
    imageShape.path = UIBezierPath(rect: imageFrame).cgPath
    imageShape.fillColor = imageColorOff.cgColor
    imageShape.actions = ["fillColor": NSNull()]
    self.layer.addSublayer(imageShape)

    imageShape.mask = CALayer()
    imageShape.mask?.contents = image.cgImage
    imageShape.mask?.bounds = imageFrame
    imageShape.mask?.position = imgCenterPoint

    //==============================
    // circle transform animation
    //==============================
    circleTransform.duration = 0.333 // 0.0333 * 10
    circleTransform.values = [
        NSValue(caTransform3D: CATransform3DMakeScale(0.0,  0.0,  1.0)),    //  0/10
        NSValue(caTransform3D: CATransform3DMakeScale(0.5,  0.5,  1.0)),    //  1/10
        NSValue(caTransform3D: CATransform3DMakeScale(1.0,  1.0,  1.0)),    //  2/10
        NSValue(caTransform3D: CATransform3DMakeScale(1.2,  1.2,  1.0)),    //  3/10
        NSValue(caTransform3D: CATransform3DMakeScale(1.3,  1.3,  1.0)),    //  4/10
        NSValue(caTransform3D: CATransform3DMakeScale(1.37, 1.37, 1.0)),    //  5/10
        NSValue(caTransform3D: CATransform3DMakeScale(1.4,  1.4,  1.0)),    //  6/10
        NSValue(caTransform3D: CATransform3DMakeScale(1.4,  1.4,  1.0))     // 10/10
    ]
    circleTransform.keyTimes = [
        0.0,    //  0/10
        0.1,    //  1/10
        0.2,    //  2/10
        0.3,    //  3/10
        0.4,    //  4/10
        0.5,    //  5/10
        0.6,    //  6/10
        1.0     // 10/10
    ]

    circleMaskTransform.duration = 0.333 // 0.0333 * 10
    circleMaskTransform.values = [
        NSValue(caTransform3D: CATransform3DIdentity),                                                              //  0/10
        NSValue(caTransform3D: CATransform3DIdentity),                                                              //  2/10
        NSValue(caTransform3D: CATransform3DMakeScale(imageFrame.width * 1.25,  imageFrame.height * 1.25,  1.0)),   //  3/10
        NSValue(caTransform3D: CATransform3DMakeScale(imageFrame.width * 2.688, imageFrame.height * 2.688, 1.0)),   //  4/10
        NSValue(caTransform3D: CATransform3DMakeScale(imageFrame.width * 3.923, imageFrame.height * 3.923, 1.0)),   //  5/10
        NSValue(caTransform3D: CATransform3DMakeScale(imageFrame.width * 4.375, imageFrame.height * 4.375, 1.0)),   //  6/10
        NSValue(caTransform3D: CATransform3DMakeScale(imageFrame.width * 4.731, imageFrame.height * 4.731, 1.0)),   //  7/10
        NSValue(caTransform3D: CATransform3DMakeScale(imageFrame.width * 5.0,   imageFrame.height * 5.0,   1.0)),   //  9/10
        NSValue(caTransform3D: CATransform3DMakeScale(imageFrame.width * 5.0,   imageFrame.height * 5.0,   1.0))    // 10/10
    ]
    circleMaskTransform.keyTimes = [
        0.0,    //  0/10
        0.2,    //  2/10
        0.3,    //  3/10
        0.4,    //  4/10
        0.5,    //  5/10
        0.6,    //  6/10
        0.7,    //  7/10
        0.9,    //  9/10
        1.0     // 10/10
    ]

    //==============================
    // line stroke animation
    //==============================
    lineStrokeStart.duration = 0.6 //0.0333 * 18
    lineStrokeStart.values = [
        0.0,    //  0/18
        0.0,    //  1/18
        0.18,   //  2/18
        0.2,    //  3/18
        0.26,   //  4/18
        0.32,   //  5/18
        0.4,    //  6/18
        0.6,    //  7/18
        0.71,   //  8/18
        0.89,   // 17/18
        0.92    // 18/18
    ]
    lineStrokeStart.keyTimes = [
        0.0,    //  0/18
        0.056,  //  1/18
        0.111,  //  2/18
        0.167,  //  3/18
        0.222,  //  4/18
        0.278,  //  5/18
        0.333,  //  6/18
        0.389,  //  7/18
        0.444,  //  8/18
        0.944,  // 17/18
        1.0,    // 18/18
    ]

    lineStrokeEnd.duration = 0.6 //0.0333 * 18
    lineStrokeEnd.values = [
        0.0,    //  0/18
        0.0,    //  1/18
        0.32,   //  2/18
        0.48,   //  3/18
        0.64,   //  4/18
        0.68,   //  5/18
        0.92,   // 17/18
        0.92    // 18/18
    ]
    lineStrokeEnd.keyTimes = [
        0.0,    //  0/18
        0.056,  //  1/18
        0.111,  //  2/18
        0.167,  //  3/18
        0.222,  //  4/18
        0.278,  //  5/18
        0.944,  // 17/18
        1.0,    // 18/18
    ]

    lineOpacity.duration = 1.0 //0.0333 * 30
    lineOpacity.values = [
        1.0,    //  0/30
        1.0,    // 12/30
        0.0     // 17/30
    ]
    lineOpacity.keyTimes = [
        0.0,    //  0/30
        0.4,    // 12/30
        0.567   // 17/30
    ]

    //==============================
    // image transform animation
    //==============================
    imageTransform.duration = 1.0 //0.0333 * 30
    imageTransform.values = [
        NSValue(caTransform3D: CATransform3DMakeScale(0.0,   0.0,   1.0)),  //  0/30
        NSValue(caTransform3D: CATransform3DMakeScale(0.0,   0.0,   1.0)),  //  3/30
        NSValue(caTransform3D: CATransform3DMakeScale(1.2,   1.2,   1.0)),  //  9/30
        NSValue(caTransform3D: CATransform3DMakeScale(1.25,  1.25,  1.0)),  // 10/30
        NSValue(caTransform3D: CATransform3DMakeScale(1.2,   1.2,   1.0)),  // 11/30
        NSValue(caTransform3D: CATransform3DMakeScale(0.9,   0.9,   1.0)),  // 14/30
        NSValue(caTransform3D: CATransform3DMakeScale(0.875, 0.875, 1.0)),  // 15/30
        NSValue(caTransform3D: CATransform3DMakeScale(0.875, 0.875, 1.0)),  // 16/30
        NSValue(caTransform3D: CATransform3DMakeScale(0.9,   0.9,   1.0)),  // 17/30
        NSValue(caTransform3D: CATransform3DMakeScale(1.013, 1.013, 1.0)),  // 20/30
        NSValue(caTransform3D: CATransform3DMakeScale(1.025, 1.025, 1.0)),  // 21/30
        NSValue(caTransform3D: CATransform3DMakeScale(1.013, 1.013, 1.0)),  // 22/30
        NSValue(caTransform3D: CATransform3DMakeScale(0.96,  0.96,  1.0)),  // 25/30
        NSValue(caTransform3D: CATransform3DMakeScale(0.95,  0.95,  1.0)),  // 26/30
        NSValue(caTransform3D: CATransform3DMakeScale(0.96,  0.96,  1.0)),  // 27/30
        NSValue(caTransform3D: CATransform3DMakeScale(0.99,  0.99,  1.0)),  // 29/30
        NSValue(caTransform3D: CATransform3DIdentity)                       // 30/30
    ]
    imageTransform.keyTimes = [
        0.0,    //  0/30
        0.1,    //  3/30
        0.3,    //  9/30
        0.333,  // 10/30
        0.367,  // 11/30
        0.467,  // 14/30
        0.5,    // 15/30
        0.533,  // 16/30
        0.567,  // 17/30
        0.667,  // 20/30
        0.7,    // 21/30
        0.733,  // 22/30
        0.833,  // 25/30
        0.867,  // 26/30
        0.9,    // 27/30
        0.967,  // 29/30
        1.0     // 30/30
    ]
}

private func addTargets() {
    //===============
    // add target
    //===============
    self.addTarget(self, action: #selector(touchDown), for: UIControlEvents.touchDown)
    self.addTarget(self, action: #selector(touchUpInside), for: UIControlEvents.touchUpInside)
    self.addTarget(self, action: #selector(touchDragExit), for: UIControlEvents.touchDragExit)
    self.addTarget(self, action: #selector(touchDragEnter), for: UIControlEvents.touchDragEnter)
    self.addTarget(self, action: #selector(touchCancel), for: UIControlEvents.touchCancel)
}

@objc func touchDown(sender: DOFavoriteButton) {
    self.layer.opacity = 0.4
}
@objc func touchUpInside(sender: DOFavoriteButton) {
    self.layer.opacity = 1.0
}
@objc func touchDragExit(sender: DOFavoriteButton) {
    self.layer.opacity = 1.0
}
@objc func touchDragEnter(sender: DOFavoriteButton) {
    self.layer.opacity = 0.4
}
@objc func touchCancel(sender: DOFavoriteButton) {
    self.layer.opacity = 1.0
}

public func select() {
    isSelected = true
    imageShape.fillColor = imageColorOn.cgColor

    CATransaction.begin()

    circleShape.add(circleTransform, forKey: "transform")
    circleMask.add(circleMaskTransform, forKey: "transform")
    imageShape.add(imageTransform, forKey: "transform")

    for i in 0 ..< 5 {
        lines[i].add(lineStrokeStart, forKey: "strokeStart")
        lines[i].add(lineStrokeEnd, forKey: "strokeEnd")
        lines[i].add(lineOpacity, forKey: "opacity")
    }

    CATransaction.commit()
}

public func deselect() {
    isSelected = false
    imageShape.fillColor = imageColorOff.cgColor

    // remove all animations
    circleShape.removeAllAnimations()
    circleMask.removeAllAnimations()
    imageShape.removeAllAnimations()
    lines[0].removeAllAnimations()
    lines[1].removeAllAnimations()
    lines[2].removeAllAnimations()
    lines[3].removeAllAnimations()
    lines[4].removeAllAnimations()
}

}

Updated project for Swift 3

I have just updated the project to be compatible with Swift 3.0.

Just create a new branch to continue supporting the current version of Swift.

Thanks !

opened by AurelTyson 9
Swift 2.0 Updates

Syntax and storyboard updates for Swift 2 and Xcode 7. Ideally, create a new swift-2.0 branch and merge this into it; that way, those on the Swift 2 beta can specify this branch in cocoapods, but master still serves the Swift 1.2 version.

opened by kylebshr 6
IB Designables errors via storyboard
Hi, thank you for sharing this nice animation button, i really like it!

I manually installed the library and followed the instructions for storyboard setup and it works but it also gives me two red errors that I'm going to report:

IB Designables: Failed to update auto layout status: Interface Builder Cocoa Touch Tool crashed;

IB Designables: Failed to render instance of DOFavoriteButton: Rendering the view took longer than 200 ms. Your drawing code may suffer from slow performance.

Am I making any mistakes?

Kind regards Alessandro
opened by famAlex 4
Add Interface Builder support
Use resource bundle for built-in podspec resources

Add IBDesignable and IBInspectable properties

Allow for layout with Interface Builder / NSCoding

Refactor some common code

Use local podspec in demo project

Cheers!
opened by chrisballinger 4
Button now uses the provided image's frame for layer sizes

This might resolve issues: https://github.com/okmr-d/DOFavoriteButton/issues/16 https://github.com/okmr-d/DOFavoriteButton/issues/20

Please test and merge. Let me know if there are any issues. Thanks!

@okmr-d

opened by JakeSc 3
Weird blue color on selected

Hey. If the button is being tapped and its state is "on" it makes some weird blue color on upper left corner of the button. What could cause this? I am using the Swift 3 file manually version.

Illustration of what is happening is here.

opened by MaeseppTarvo 1
Objective C compatibility

Hi @okmr-d

First of all thank you for this fantastic repository! I downloaded it and implemented it in my project, which is written in Objective C. I've inserted a button via storyboard and assigned it the DOFavoriteButton class. Everything seems to work fine but when i tap on it nothing happen. Is there any objective c issue or extra step i should know?

Thank you again

opened by jamgian 1
Make some Buttons selected by default

Thanks for building this great library. I am using the DoFavourite Button for Bookmarking feature in my App. I want some buttons to be selected by default. By the way i am using tableview to populate my data like this http://i.imgur.com/VoCxkJa.png

opened by AruLNadhaN 1
Is this library still being developed?

Hi @okmr-d ,

First of all I would like to appreciate for creating such a cool animation buttons

I want to know is this library still in active development? I am planning to write a ReactNative wrapper around the same

Thanks Pranav

opened by prscX 0
Weird rectangle on the top left corner of the view

I added DOFavoriteButton to my project. The animations work fine. However if the Button does have isSelected=true it creates this weird rectangle on the top left corner of the view:

It does not appear for isSelected=false.

After a very long time I finally found the problem. The Button Type has to be set to Custom. If it is set to System it does not work and does create these weird effects.

I just want to leave this here if someone else does encounter this problem.

opened by funkenstrahlen 0