Last active
August 3, 2020 17:45
-
-
Save juliensagot/854a894c4179d01fac42076e5174fd58 to your computer and use it in GitHub Desktop.
The code for this particular animation → https://twitter.com/Barbapapapps/status/1289949742118576128?s=20
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import UIKit | |
import PlaygroundSupport | |
final class CardView: UIControl { | |
private let imageView = UIImageView(image: UIImage(named: "Sample")) | |
override init(frame: CGRect) { | |
super.init(frame: frame) | |
layer.cornerRadius = 9 | |
layer.cornerCurve = .continuous | |
layer.shadowColor = UIColor.black.cgColor | |
layer.shadowOpacity = 0.2 | |
layer.shadowOffset = CGSize(width: 0, height: 4) | |
layer.shadowRadius = 12 | |
imageView.translatesAutoresizingMaskIntoConstraints = false | |
imageView.contentMode = .scaleAspectFill | |
imageView.clipsToBounds = true | |
imageView.layer.cornerRadius = 9 | |
imageView.layer.cornerCurve = .continuous | |
addSubview(imageView) | |
NSLayoutConstraint.activate([ | |
imageView.topAnchor.constraint(equalTo: topAnchor), | |
imageView.leadingAnchor.constraint(equalTo: leadingAnchor), | |
imageView.trailingAnchor.constraint(equalTo: trailingAnchor), | |
imageView.bottomAnchor.constraint(equalTo: bottomAnchor) | |
]) | |
} | |
override var isHighlighted: Bool { | |
didSet { | |
guard oldValue != isHighlighted else { return } | |
UIView.animate(withDuration: 0.4, delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0, options: [.beginFromCurrentState, .allowUserInteraction], animations: { | |
let highlightedTransform = CGAffineTransform(scaleX: 0.94, y: 0.94).rotated(by: 5 * (CGFloat.pi) / 180) // Rotate by 5ºC clockwise | |
self.transform = self.isHighlighted ? highlightedTransform : .identity | |
}) | |
} | |
} | |
required init?(coder: NSCoder) { | |
fatalError("\(#function) has not been implemented.") | |
} | |
} | |
final class ViewController: UIViewController { | |
private var isExpanded = false | |
private let cardViewSizes = (original: CGSize(width: 140, height: 200), expanded: CGSize(width: 400, height: 280)) | |
private var cardViewWidthConstraint: NSLayoutConstraint! | |
private var cardViewHeightConstraint: NSLayoutConstraint! | |
private let cardView = CardView() | |
override func viewDidLoad() { | |
super.viewDidLoad() | |
view.backgroundColor = UIColor.systemGray3 | |
cardView.translatesAutoresizingMaskIntoConstraints = false | |
view.addSubview(cardView) | |
cardViewWidthConstraint = cardView.widthAnchor.constraint(equalToConstant: cardViewSizes.original.width) | |
cardViewHeightConstraint = cardView.heightAnchor.constraint(equalToConstant: cardViewSizes.original.height) | |
NSLayoutConstraint.activate([ | |
cardView.centerXAnchor.constraint(equalTo: view.centerXAnchor), | |
cardView.centerYAnchor.constraint(equalTo: view.centerYAnchor), | |
cardViewWidthConstraint, | |
cardViewHeightConstraint | |
]) | |
cardView.addTarget(self, action: #selector(tapHandler), for: .touchUpInside) | |
} | |
@objc private func tapHandler() { | |
UIView.animate(withDuration: 0.6, delay: 0, usingSpringWithDamping: 0.6, initialSpringVelocity: 1, options: [.beginFromCurrentState, .allowUserInteraction], animations: { | |
let newCardSize = self.isExpanded ? self.cardViewSizes.original : self.cardViewSizes.expanded | |
self.cardViewWidthConstraint.constant = newCardSize.width | |
self.cardViewHeightConstraint.constant = newCardSize.height | |
self.view.layoutIfNeeded() | |
}) | |
self.isExpanded.toggle() | |
} | |
} | |
PlaygroundPage.current.liveView = ViewController() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment