iOS Card with Animation Playground

CardsWithAnimation.swift

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {
    let titleLabel = UILabel(frame: CGRect(x: 16, y: 100, width: 150, height: 38))
    let captionLabel = UILabel(frame: CGRect(x: 16, y: 120, width: 272, height: 40))
    let coverImageView = UIImageView()
    let blurEffect = UIBlurEffect(style: .light)
    let cardView = UIButton()
    let closeButton = UIButton()
    let blurredEffectView = UIVisualEffectView()
    let descriptionLabel = UILabel()

    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white

        titleLabel.text = "Lessons in Stoicism"
        titleLabel.textColor = .white
        titleLabel.font = UIFont.systemFont(ofSize: 18, weight: .semibold)
        
        captionLabel.text = "John Sellars"
        captionLabel.textColor = .white
        captionLabel.font = UIFont.systemFont(ofSize: 14, weight: .light)

        coverImageView.frame = CGRect(x: 0, y: 0, width: 199, height: 155)
        coverImageView.contentMode = .scaleAspectFill
        coverImageView.image = UIImage(named: "content-1.jpeg")
        coverImageView.clipsToBounds = true
        coverImageView.layer.cornerRadius = 14
        
        blurredEffectView.effect = blurEffect
        blurredEffectView.layer.cornerRadius = 14
        blurredEffectView.clipsToBounds = true
        blurredEffectView.frame = coverImageView.bounds
        
        cardView.frame = CGRect(x: 20, y: 10, width: 199, height: 155)
        cardView.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
        cardView.layer.cornerRadius = 14
        cardView.layer.shadowOpacity = 0.25
        cardView.layer.shadowOffset = CGSize(width: 0, height: 10)
        cardView.layer.shadowRadius = 10
        
        let tap = UITapGestureRecognizer(target: self, action: #selector(cardViewTapped))
        cardView.addGestureRecognizer(tap)
        cardView.isUserInteractionEnabled = true
        
        
        closeButton.frame = CGRect(x:328, y: 20, width: 28, height: 28)
        closeButton.backgroundColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.5)
        closeButton.alpha = 0
        closeButton.layer.cornerRadius = 14
        closeButton.setImage(#imageLiteral(resourceName: "[email protected]"), for: .normal)
        closeButton.addTarget(self, action: #selector(closeButtonTapped), for: .touchUpInside)

        descriptionLabel.frame = CGRect(x: 20, y: 448, width: 335, height: 132)
        descriptionLabel.textColor = .black
        descriptionLabel.alpha = 0
        descriptionLabel.numberOfLines = 50
        descriptionLabel.text = "What aspects of your life do you really control? What do you do when you cannot guarantee that things will turn out in your favour? And what can Stoicism teach us about how to live together? \n\n In the past few years, Stoicism has been making a comeback.But what exactly did the Stoics believe? In Lessons in Stoicism, philosopher John Sellars weaves together the key ideas of the three great Roman Stoics -- Seneca, Epictetus and Marcus Aurelius -- with snapshots of their fascinating lives, to show us how their ideas can help us today.\n\nIn vivid prose, Sellars shows how the works of these three Stoics have inspired readers ever since, speaking as they do to some of the perennial issues that face anyone trying to navigate their way through life. Their works, fundamentally, are about how to live -- how to understand one's place in the world, how to cope when things don't go well, how to manage one's emotions and how to behave towards others.\n\nConsoling and inspiring, Lessons in Stoicism is a deeply thoughtful guide to the philosophy of a good life."
        
        view.addSubview(cardView)
        cardView.addSubview(coverImageView)
        cardView.addSubview(blurredEffectView)
        cardView.addSubview(titleLabel)
        cardView.addSubview(captionLabel)
        cardView.addSubview(descriptionLabel)
        cardView.addSubview(closeButton)

        self.view = view
    }
    
    @objc func cardViewTapped(){
        let animator = UIViewPropertyAnimator(duration: 0.7, dampingRatio: 0.7) {
            self.blurredEffectView.frame = CGRect(x:0, y:0, width: 375, height: 420)
            self.blurredEffectView.layer.cornerRadius = 0

            self.coverImageView.frame = CGRect(x:0, y:0, width: 375, height: 420)
            self.cardView.layer.cornerRadius = 0
            self.coverImageView.layer.cornerRadius = 0

            self.cardView.frame = CGRect(x:0, y:0, width: 375, height: 667)

            self.titleLabel.frame =
                CGRect(x: 20, y: 20, width: 374, height: 38)

            self.captionLabel.frame =
                CGRect(x: 20, y: 50, width: 374, height: 38)

            self.descriptionLabel.alpha = 1
            self.closeButton.alpha = 1

        }
        animator.startAnimation(afterDelay: 1)
    }
    
    @objc func closeButtonTapped(){
        let animator = UIViewPropertyAnimator(duration: 0.7, dampingRatio: 0.7) {
            self.cardView.frame = CGRect(x: 20, y: 10, width: 199, height: 155)

            self.coverImageView.frame = CGRect(x: 0, y: 0, width: 199, height: 155)
            self.cardView.layer.cornerRadius = 14
            self.coverImageView.layer.cornerRadius = 14

            self.blurredEffectView.frame = self.coverImageView.bounds
            self.blurredEffectView.layer.cornerRadius = 14
            
            
            self.titleLabel.frame =
                CGRect(x: 16, y: 100, width: 150, height: 38)
            
            self.captionLabel.frame =
                CGRect(x: 16, y: 120, width: 272, height: 40)
            
            self.descriptionLabel.alpha = 0
            self.closeButton.alpha = 0

        }
        animator.startAnimation(afterDelay: 1)
    }
}

let viewController = MyViewController()
PlaygroundPage.current.liveView = viewController