Skip to content

Instantly share code, notes, and snippets.

@Coder-ACJHP
Created May 2, 2019 18:49
Show Gist options
  • Save Coder-ACJHP/7810e26e84c3e44295a825e291b310a2 to your computer and use it in GitHub Desktop.
Save Coder-ACJHP/7810e26e84c3e44295a825e291b310a2 to your computer and use it in GitHub Desktop.
Build Tinder app like card animation with swift 4+
//
// 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