Tạo Hiệu ứng khởi động giống Twitter với Core Animation

120

Bằng việc sử dụng chú chim ở màn hình LaunchScreen và đi kèm hiệu ứng Animation phóng to nó ra, Twitter đã cho chúng ta 1 trải nghiệm startup App rất tuyệt vời.

Thì để bắt đầu cho bài hướng dẫn hôm nay, bạn cần chuẩn bị một Project càng đơn giản càng tốt, và logo của Twitter, bạn có thể download tại đây

Ok! Tới luôn bạn ơi 🤓

Chúng ta sẽ tạo 1 Project mới, và tạo 1 table view với static cell hoặc 1 tấm hình fullscreen. Ở đây, chúng ta sẽ bắt đầu tạo 1 tấm hình fullscreen bằng cách tạo UIImageView trong AppDelegate.swift

Định hướng của chúng ta sẽ sử dụng logo của Twitter như một màn hình và sẽ gắn nó vào Mask Layer trong CALayer. Mỗi Mask Layer đều có thuộc tính của 1 CALayer và đồng thời nó cho phép chúng ta che đi Layer chính. Đây là nội dung mà Apple định nghĩa:

“Thuộc tính alpha của Mask Layer cho phép bao nhiêu phần nội dung và nền của Layer chính sẽ được hiển thị. Toàn phần hay một phần điểm ảnh sẽ được hiển thị nhưng ở mức toàn phần, nó sẽ che đi nội dung bên dưới”

Điều đó đúng như những gì mà chúng ta cần. Chúng ta sẽ đặt logo Twitter vào 1 layer mới và sử dụng nó như 1 Mask Layer cho ImageView của chúng ta.

Và chúng ta sẽ Run Project và xem kết quả đạt được nhé

image view in mask layer

Tiếp theo chúng ta sẽ tạo diễn hoạt cho Layer. Chúng ta sẽ cho chú chim nhỏ lại 1 chút, rồi sau đó sẽ phóng to nó ra hết màn hình. Ở đây, chúng ta sẽ sử dụng CAKeyframeAnimation.

Vậy là chúng ta đã có được 1 màn hình khởi động giống như Twitter App. Chúc các bạn thành công. Nhưng có 1 vấn đề nhỏ ở đây là Mask Layer sẽ không tự động mất đi, thay vào đó ta sẽ thêm dòng code dưới dòng self.mask!.addAnimation như sau:

Đây là bài hướng dẫn của Rounak Jain

Các bạn có thể download full source code ở đây

Nguồn: IDE Academy via Maniacdev