트위터 커버 효과 만들기 in Swift

Twitter의 프로필을 화면에서 위로 스크롤을 하면 커버 이미지가 점점 확대되면서 블러처리가 됩니다.

이미지가 확대되는 효과를 구현해봅시다.

1.ViewController를 만들고 ScrollView를 만듭니다.

import UIKit

class ViewController: UIViewController, UIScrollViewDelegate {

    var scrollView: UIScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()

        scrollView = UIScrollView(frame: view.bounds)
        scrollView.delegate = self
        scrollView.bounces = true
        scrollView.contentSize = CGSize(width: CGRectGetWidth(view.bounds),
            height: CGRectGetHeight(view.bounds) * 2)
        view.addSubview(scrollView)
    }

    func scrollViewDidScroll(scrollView: UIScrollView) {}
}

2.커버 이미지를 만들고 ScrollView에 붙입니다.

var scrollView: UIScrollView!
var imageView: UIImageView!

override func viewDidLoad() {
    super.viewDidLoad()
    imageView = UIImageView(image: UIImage(named: "younha"))
    imageView.frame = CGRect(origin: imageView.frame.origin, size: CGSize(width: view.frame.width, height: imageView.frame.height))
    imageView.contentMode = .Center

    scrollView = UIScrollView(frame: view.bounds)
    scrollView.delegate = self
    scrollView.bounces = true
    scrollView.contentSize = CGSize(width: CGRectGetWidth(view.bounds),
        height: CGRectGetHeight(view.bounds) * 2)
    scrollView.addSubview(imageView)
    view.addSubview(scrollView)
}

3.scrollViewDidScroll 함수에서 ScrollView의 offset 값을 가지고 커버 이미지를 확대합니다.

func scrollViewDidScroll(scrollView: UIScrollView) {
    let yPosition = scrollView.contentOffset.y

    // 위로 스크롤링을 하는 경우
    if yPosition < 0 {
    	// 이미지를 확대한다.
        let scale = 1 + ((-yPosition) * 2 / imageView.frame.height)
        imageView.transform = CGAffineTransformIdentity
        imageView.transform = CGAffineTransformMakeScale(scale, scale)

        // 이미지를 가장 위로 이동시킨다.
        var imageViewFrame = imageView.frame
        imageViewFrame.origin.y = yPosition
        imageView.frame = imageViewFrame
    }
}

위로 스크롤링하여 스크롤 위치가 -1px씩 늘어나면 2px씩 확대되어야 합니다. 그리고 이미지를 이동한 스크롤 위치로 계속 이동시켜서 확대되더라도 빈 공간이 보이지 않도록 합니다.

다음은 위의 코드를 적용한 결과 화면입니다.