Lottie Animation: Biến hình màn hình Login của bạn

173

Hi mọi người, ở bài viết trước mình đã hướng dẫn các bạn cách làm sao để thêm và ứng dụng Lottie vào ứng dụng của bạn. Có thể khi đọc bài viết trước các bạn sẽ chưa hình dung được sức mạnh của Lottie Animation. Để chứng minh sức mạnh của Lottie Animation hôm nay mình sẽ hướng dẫn các bạn ứng dụng nó vào màn hình Login và biến nó trở thành 1 màn hình thú vị hơn. Để hiểu rõ hơn về cách cài đặt Lottie animation bạn có thể xem lại bài viết Hướng dẫn cách sử dụng Lottie Animation trong Swift

Chuẩn bị

Để có thể bắt đầu dễ dàng và nhanh chóng hơn thì chúng ta cần chuẩn bị sẵn những thứ sau:

1. Kiến thức về Lottie, tham khảo tại đây
2. Project demo các bạn tải tại đây

Bắt đầu

Đầu tiên chúng ta sẽ kéo UI vào để thực hiện thay đổi màn hình Login như sau:

Trong màn hình Login của chúng ta sẽ có các thành phần sau:

1. ImageView làm background cho ứng dụng
2. 2 Lottie Animation View, 1 cái làm thành phần chính nằm trên nửa màn hình và một cái nằm ở góc nhằm trang trí thêm cho màn hình
3. 2 UITextField để cho người dùng nhập user name và password
4. 1 button Login

Sau khi sử dụng interface builder thực hiện kéo các view vào màn hình thì các bạn kéo reference cho các item vào view controller để thực hiện code.

Mở ViewController lên và import Lottie

import UIKit
import Lottie

Viết thêm một số func để cài đặt lottie và cài đặt view như sau

extension ViewController {
    func setupUI() {
        tfAccount.layer.borderWidth = 1
        tfAccount.layer.borderColor = UIColor.orange.cgColor
        tfAccount.backgroundColor = UIColor.orange.withAlphaComponent(0.2)
        tfAccount.layer.cornerRadius = 5
        tfAccount.attributedPlaceholder = NSAttributedString(string: "  Account",
                                                             attributes: [NSAttributedString.Key.foregroundColor: UIColor.white])
        tfAccount.placeholderRect(forBounds: CGRect(x: 5, y: 5, width: 100, height: 44))
        tfPassword.layer.borderWidth = 1
        tfPassword.layer.borderColor = UIColor.orange.cgColor
        tfPassword.backgroundColor = UIColor.orange.withAlphaComponent(0.2)
        tfPassword.layer.cornerRadius = 5
        tfPassword.attributedPlaceholder = NSAttributedString(string: "  Password",
                                                             attributes: [NSAttributedString.Key.foregroundColor: UIColor.white])
        btnLogin.layer.cornerRadius = 5
        loadingView.backgroundColor = UIColor.black.withAlphaComponent(0.4)
    }
    
    func setupLottie() {
        // 1. Set animation content mode
        animationLottieView.contentMode = .scaleAspectFit
        animationLottieView2.contentMode = .scaleAspectFit

        // 2. Set animation loop mode

        animationLottieView.loopMode = .loop
        animationLottieView2.loopMode = .loop

        // 3. Adjust animation speed

        animationLottieView.animationSpeed = 0.5
        animationLottieView2.animationSpeed = 0.5

        // 4. Play animation
        animationLottieView.play()
        animationLottieView2.play()
    }
    
    private func showLoading() {
        // 1. Create lottie animation view
        let lottieView: LottieAnimationView = LottieAnimationView(name: "loading_crypto")
        lottieView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
        
        // 2. Set animation content mode
        lottieView.contentMode = .scaleAspectFit
        
        // 3. Set animation loop mode
        lottieView.loopMode = .loop
        
        // 4. Adjust animation speed
        lottieView.animationSpeed = 0.5
        
        loadingView.addSubview(lottieView)
        lottieView.center = CGPoint(x: UIScreen.main.bounds.width / 2, y:  UIScreen.main.bounds.height / 2)
        view.addSubview(loadingView)
        // 5. Play animation
        lottieView.play()
        
    }
    
    @objc private func hideLoading() {
        loadingView.subviews.forEach { $0.removeFromSuperview() }
        loadingView.removeFromSuperview()
    }
}

Thêm loading view để thực hiện màn hình loading như sau

class ViewController: UIViewController {
    @IBOutlet weak var tfAccount: UITextField!
    @IBOutlet weak var tfPassword: UITextField!
    @IBOutlet weak var animationLottieView: LottieAnimationView!
    @IBOutlet weak var btnLogin: UIButton!
    @IBOutlet weak var animationLottieView2: LottieAnimationView!
    
    private var loadingView: UIView = UIView.init(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        setupUI()
        setupLottie()
    }
    
    @IBAction func login(_ sender: Any) {
        showLoading()
        perform(#selector(hideLoading), with: nil, afterDelay: 5)
    }
}

ở viewDidLoad chúng ta sẽ thực hiện setUpUI và setup lottie, tại func login chúng ta sẽ thực hiện showLoading và để nó ẩn đi sau 5 giây.

Bây giờ chúng ta thực hiện cmd + R để chạy ứng dụng, kết quả thu được sẽ như sau:

Kết quả thật tuyệt vời đúng không? Đối với các màn hình có animation phức tạp như vậy để code sử dụng animation gần như ta quá phức tạp và tốn quá nhiều effort để thực hiện, tuy nhiên nếu dùng lottie các bạn chỉ mất một chút thời gian để căn chỉnh layout.

Vậy là chúng ta đã hoàn thành việc ứng dụng Lottie vào màn hình Login để tăng trải nghiệm của người dùng. Ngoài ra chúng ta còn có thể ứng dụng Lottie vào rất nhiều các tính năng khác để ứng dụng trở nên thú vị hơn. Ví dụ như: Màn hình launch screen với animation logo, animation trên notification, animation Tabbar icon, v.v.

Cách sử dụng Lottie phụ thuộc rất lớn vào trí tưởng tượng và óc sáng tạo của người dùng, nếu bạn chỉ nắm vai trò là front end developer nhiều khi bạn sẽ không có quyền quyết định ứng dụng sẽ như nào, nhưng nếu bạn có ý tưởng hay ho bạn có thể đưa ý kiến lên Team leader, designer, BA, và PM của dự án để cải thiện trải nghiệm của người dùng.

Chúc các bạn thành công với các dự án sắp tới.