Created
May 2, 2019 18:49
-
-
Save Coder-ACJHP/7810e26e84c3e44295a825e291b310a2 to your computer and use it in GitHub Desktop.
Build Tinder app like card animation with swift 4+
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
// | |
// TinderLikeAnimation.swift | |
// | |
// Created by Coder ACJHP on 2.05.2019. | |
// Copyright © 2019 Onur Işık All rights reserved. | |
// | |
import UIKit | |
class TinderLikeAnimation: UIViewController { | |
private let cardView: UIView = { | |
let cardView = UIView() | |
cardView.backgroundColor = .cyan | |
return cardView | |
}() | |
private let label: UILabel = { | |
let label = UILabel(frame: .zero) | |
label.textColor = .white | |
label.text = "Swipe \n⇜ left or right ⇝" | |
label.font = .boldSystemFont(ofSize: 22) | |
label.textAlignment = .center | |
label.numberOfLines = 0 | |
return label | |
}() | |
private var initialCardCenter: CGPoint! | |
private lazy var divisor: CGFloat = { | |
return (view.frame.width / 2) / 0.70 | |
}() | |
override func viewDidLoad() { | |
super.viewDidLoad() | |
view.backgroundColor = .purple | |
addLabel() | |
addCardView() | |
} | |
private func addLabel() { | |
view.addSubview(label) | |
label.anchor(top: view.topAnchor, | |
leading: view.leadingAnchor, | |
bottom: nil, | |
trailing: view.trailingAnchor, | |
padding: .init(top: 30, left: 70, bottom: 0, right: 70)) | |
} | |
private func addCardView() { | |
view.addSubview(cardView) | |
cardView.centerAnchor(to: view, | |
withSize: .init(width: view.bounds.width - 120, | |
height: view.bounds.height - 200)) | |
let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePan(_:))) | |
cardView.addGestureRecognizer(panGesture) | |
} | |
@objc private func handlePan(_ gestureRecognizer: UIPanGestureRecognizer) { | |
guard let cardView = gestureRecognizer.view else { return } | |
let translation = gestureRecognizer.translation(in: view) | |
switch gestureRecognizer.state { | |
case .began: | |
initialCardCenter = cardView.center | |
case .changed: | |
cardView.center = CGPoint(x: initialCardCenter.x + translation.x, y: initialCardCenter.y) | |
let xFactor = cardView.center.x - view.center.x | |
let radius: CGFloat = xFactor / divisor | |
cardView.transform = CGAffineTransform(rotationAngle: radius) | |
let cardSwipeDirection = abs(xFactor) / view.center.x | |
let opacity: CGFloat = 1.0 - cardSwipeDirection | |
cardView.alpha = opacity | |
case .ended: | |
UIView.animate(withDuration: 0.75, | |
delay: 0, | |
usingSpringWithDamping: 0.6, | |
initialSpringVelocity: 4.0, | |
options: [], | |
animations: { | |
cardView.center = self.view.center | |
cardView.alpha = 1.0 | |
cardView.transform = .identity | |
}, completion: nil) | |
default: break | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment