operation.cancel()

operationQueue.cancelAllOperations()

class AsyncOperation: Operation {
    // State enumaration
    enum State: String {
        case ready, excuting, finished

        // 1
        fileprivate var keyPath: String {
            return "is" + rawValue.capitalized
        }
    }
    // State property
    // 2
    var state: State = .ready {
        // 3
        willSet {
            debugPrint("New value \(newValue)")
            willChangeValue(forKey: newValue.keyPath)
            debugPrint("Will change value 1 for key \(newValue.keyPath)")
            willChangeValue(forKey: state.keyPath)
            debugPrint("Will change value 2 for key \(state.keyPath)")
        }
        didSet {
            debugPrint("old value \(oldValue)")
            didChangeValue(forKey: oldValue.keyPath)
            debugPrint("Did change value 1 for key \(oldValue.keyPath)")
            didChangeValue(forKey: state.keyPath)
            debugPrint("Did change value 2 for key \(state.keyPath)")
        }
    }
}

extension AsyncOperation {
    // 1
    open override var isReady: Bool {
        return super.isReady && state == .ready
    }

    open override var isExecuting: Bool {
        return state == .excuting
    }


    open override var isFinished: Bool {
        return state == .finished
    }
    // 2
    open override var isAsynchronous: Bool {
        return true
    }
    // 3
    open override func start() {
        // 4
        if isCancelled {
            state = .finished
            return
        }

        main()
    }

    open override func cancel() {
        super.cancel()
        state = .finished
    }
}

Lời mở đầu

Chào mọi người, thông thường mành hình Launch screen là nơi để hiển thị logo của ứng dụng khi mà nó được khởi động, và mọi người thường để nó là một ảnh tĩnh để đảm bảo ứng dụng khởi động nhanh nhất có thể. Nhưng gần đây, mình có nhận được một yêu cầu của khách hàng về việc làm cho màn hình này trở nên sinh động hơn. Mình thấy nó cũng khá hay nên mình muốn chia sẻ với mọi người.

Chia sẻ cách tạo Launch screen một cách sinh động

Cách làm của chúng ta sẽ là tạo một LaunchScreen mới thay thế cho cái cũ. Trên màn hình LaunchScreen mới chúng ta sẽ thêm vào một số đối tượng và chúng ta sẽ làm cho nó chuyển động để tạo hiệu ứng. Ở phần hướng dẫn này mình sẽ dùng 2 UIImageView và 1 UILabel.
Cụ thể mục đích của chúng ta sẽ làm chuyển động như hình này:

Mình sẽ phải tách logo GST ra làm 2 phần và cho nó chuyển động từ 2 bên vào chính giữa và ghép thành một logo hoàn chỉnh.

Đây là assets mình dùng trong project này:

Bắt đầu

Bước 1: Mở XCode và tạo mới Project (Single View App)

Bước 2: Chúng ta cần file LaunchScreen.storyboard và tạo mới file LaunchScreen bằng cách:
New File -> View -> đặt tên là LaunchScreen.xib.

Bước 3: Mở tab General của Target Chọn lại Launch Screen File là LaunchScreen như hình dưới:

Bước 4: Chỉnh sửa lại file LaunchSceen.xib để chuẩn bị cho việc sử dụng animtion

Mở file LaunchScreen.xib chúng ta kéo vào 2 UIImageView và set image và tag cho từng lần lượt cho các view theo thứ tự từ trên xuống là 1, 2, 3 sao cho nó như hình dưới:

Tiếp đến để đảm bảo nó chạy đúng với các kích thước màn hình khác nhau chúng ta cần set constraint cho các item trên màn hình.

Ta cho imgeview với tag = 1 ẩn khỏi màn hình để sau chúng ta sẽ animate nó ra giữa màn hình vậy ta sẽ set constraint như hình dưới đây.

Tương tự ta cũng set constraint imageview còn lại như hình dưới:

Vậy là chúng ta đã chuẩn bị xong UI, giờ chúng ta cần đi vào code để thưc hiện animation.

Bước 5. Tạo file LaunchScreenManager.swift để thực hiện animation bằng cách:
Chọn new file -> Swift file -> đặt tên là LaunchScreenManager.swift

Thêm code vào như dưới đây:

import Foundation
import UIKit

class LaunchScreenManager {
    // dòng này dùng để tạo singleton: Nó đảm bảo sẽ chỉ tạo ra 1 instance duy nhất.
    static let instance = LaunchScreenManager()

    var view: UIView?// Đây sẽ là LaunchScreen của chúng ta
    var parentView: UIView?

    init() {}

    func loadView() -> UIView {
        let launchScreen = UINib(nibName: "LaunchScreen", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! UIView
        return launchScreen
    }

    // Phương thức này thực hiện việc thêm view(launch screen) vào màn hình
    // Và set lại frame và vị trí cho LaunchScreen view
    func fillParentViewWithView() {
        guard let view = view, let parentView = parentView else { return }
        parentView.addSubview(view)
        view.frame = parentView.bounds
        view.center = parentView.center
    }
    
    // MARK: - Animation

    // Phương thức này để setup launch screen view và gọi hàm thực hiện animation
    func animateAfterLaunch(_ parentViewPassedIn: UIView) {
        parentView = parentViewPassedIn
        view = loadView()
        fillParentViewWithView()
        // start animation
        startAnimation()
    }

    func startAnimation() {

        // Lúc này chúng ta cần lấy các view đã add vào file LaunchScreen.xib để thực hiện animation
        // Để tránh sai sót trong việc đánh tag cho các view -> crash app
        //Chúng ta cần kiểm tra các item này có bị nil hay không
        guard let logo1 = view?.viewWithTag(1),
            let logo2 = view?.viewWithTag(2),
            let label = view?.viewWithTag(3) else { return }

        let screen = UIScreen.main.bounds.size

        UIView.animateKeyframes(withDuration: 2, delay: 0, options: [], animations: {
            //0
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.1) {
                logo1.transform = CGAffineTransform.identity.translatedBy(x: screen.width / 2 + logo1.frame.size.width / 2, y: 0)
                logo2.transform = CGAffineTransform.identity.translatedBy(x: -(screen.width / 2 + logo2.frame.size.width / 2), y: 0)
            }
            UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.1) {
                label.center.x = screen.width / 2
            }
            UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25) {
                self.view?.alpha = 0
            }
        }) { (_) in
            self.view?.removeFromSuperview()
        }
    }
}

Bước cuối cùng:
Mở file SceneDelegate.swift thêm đoạn code thực thi animation để khi app được khởi động sẽ chạy animation 😀

Done, giờ chúng ta sẽ build app lên và tận hưởng 😀

Kết quả

Đối với việc tạo animation nếu mọi người quan tâm có thể tham khảo các bài viết của
Vũ Đức Cương nhé!
Part1
Part2
Part3

Tổng kết

Mình hi vọng bài viết của mình có thể giúp ích cho mọi người, để góp phần tạo ra các ứng dụng ngon hơn 😀

Dưới đây là code project demo:

TableView là được sử dụng rất nhiều trong các ứng dụng của chúng ta. Vì vậy, việc tạo thêm một số hiệu ứng cho TableView khiến cho ứng dụng trở lên sinh động và bớt nhàm chán hơn. Chỉ với một vài câu lệnh, mọi thứ sẽ trở lên mới mẻ và dễ gần hơn rất nhiều lần.

Hầu như các animation của tableview sẽ được tạo trong method dưới đây:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    // Add animations here
}

Chúng ta bắt đầu với hiệu ứng đơn giản nhất nhưng được sử dụng nhiều nhất:

Kết quả đạt được:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        cell.alpha = 0
        UIView.animate(withDuration: 0.5,
                       delay: 0.1 * Double(indexPath.row),
            animations: {
                cell.alpha = 1
        })
    }

Hiệu ứng Bounce animation:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
      cell.transform = CGAffineTransform(translationX: 0, y: 60)
        UIView.animate(
            withDuration: 1,
            delay: 0.05 * Double(indexPath.row),
            usingSpringWithDamping: 0.4,
            initialSpringVelocity: 0.1,
            options: [.curveEaseInOut],
            animations: {
                cell.transform = CGAffineTransform(translationX: 0, y: 0)
        })
}

Move and Fade Animation

Kết hợp hai hiệu ứng trên và chung ta ngừng sử dụng hiệu ứng Spring cho Cell, một hiệu ứng mới được tạo thành.

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    cell.transform = CGAffineTransform(translationX: 0, y: 30)
        cell.alpha = 0

        UIView.animate(
            withDuration: 1,
            delay: 0.05 * Double(indexPath.row),
            options: [.curveEaseInOut],
            animations: {
                cell.transform = CGAffineTransform(translationX: 0, y: 0)
                cell.alpha = 1
        })
}

Slide in Animation

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        cell.transform = CGAffineTransform(translationX: tableView.bounds.width, y: 0)

        UIView.animate(
            withDuration: 1,
            delay: 0.5 * Double(indexPath.row),
            options: [.curveEaseInOut],
            animations: {
                cell.transform = CGAffineTransform(translationX: 0, y: 0)
        })
    }

Trên đây là một số ví dụ về việc thêm animation vào tableview bằng các hiệu ứng cơ bản của UIView( transform, alpha …) ngoài ra với 1 số hiệu ứng khác như Flip, Change color … cũng được sử dụng rất nhiều trong các hiệu ứng animation. Chúng ta hoàn toàn có thể tạo ra các animation mang mang màu sắc của cá nhân như các họa sĩ code vậy.
Một lưu ý đó là khi muốn kiểm soát tốt hơn các animation thì chúng ta nên tạo ra một class riêng  để xử lý việc chạy animation. Nó đồng thời cũng kiểm soát việc animation chỉ chạy một lần duy nhất với tất cả các cell.

class DownloadImage: Operation {
    var index: Int
    
    init(ind: Int) {
        self.index = ind
    }

    override func main() {
        // Download image task
        print("Start downloading task \(index) at time: \(Date().timeIntervalSince1970)")
        sleep(5)
        print("Finish downloading task \(index) at time: \(Date().timeIntervalSince1970)")
    }
}

let firstOperation = DownloadImage(ind: 1)
let secondOperation = DownloadImage(ind: 2)
//firstOperation.addDependency(secondOperation)

let operationQueue = OperationQueue()
operationQueue.addOperation(firstOperation)
operationQueue.addOperation(secondOperation)

firstOperation.removeDependency(op: secondOperation)

firstOperation.addDependency(secondOperation)
secondOperation.addDependency(firstOperation)

class Calculate: Operation {
    let firstNum: Int
    let secondNum: Int
    var sum: Int?
    
    init(first: Int, second: Int) {
        self.firstNum = first
        self.secondNum = second
    }
    
    override func main() {
        sum = firstNum + secondNum
    }
}

class Display: Operation {
    
    override func main() {
        // 2
        let sum = dependencies.compactMap{ ($0 as? Calculate)?.sum }.first
        
        guard let unwrappedSum = sum else {
            return
        }
        // 3
        print("Sum = \(unwrappedSum)")
    }
}

let calculateOperation = Calculate(first: 5, second: 10)
let displayOperation = Display()
// 1
displayOperation.addDependency(calculateOperation)


let operationQueue = OperationQueue()
// 4
operationQueue.addOperation(calculateOperation)
operationQueue.addOperation(displayOperation)

Lời mở đầu

Xin chào mọi người, hôm nay mình sẽ giới thiệu với các bạn về UIPanGestureReconizer. Và mình sẽ hướng dẫn mọi người cách sử dụng và ứng dụng nó vào thực tế. Mình hi vọng sau khi xem hết bài viết này, mọi người có thể áp dụng nó vào các ứng dụng sau này nếu cần đến 😀

Ý tưởng

Chắc hẳn ai sử dụng iOS đều sử dụng qua tính năng “Control Center” của iOS. Để mở Control center lên ta phải vuốt từ dưới màn hình lên và ẩn đi thì ngược lại, nó còn cho phép người dùng kéo thả một cách mượt mà.

UIGestureRecognizer là gì?

UIGestureRecognizer là class định nghĩa một tập hợp các hành vi phổ biến có thể được cấu hình cho tất cả các cử chỉ cụ thể. Dạng như chạm, kéo thả …

UIGestureRecognizer được sử dụng để nhận dạng các loại hành vi của người dùng khi tương tác lên màn hình và thực hiện hành động được cấu hình.

Dưới đây là một số subclasses của nó:

• UITapGestureRecognizer
• UIPinchGestureRecognizer
• UIRotationGestureRecognizer
• UISwipeGestureRecognizer
• UIPanGestureRecognizer
• UIScreenEdgePanGestureRecognizer
• UILongPressGestureRecognizer

UIPanGestureRecognizer là gì?

UIPangestureRecognizer là subclass của UIGestureRecognizer dùng để nhận biết hành vi kéo thả.

Ví dụ về UIPanGestureRecognizer

Để bắt đầu chúng ta cần mở XCode và tạo mới một Single View App. Sau khi tạo project xong chúng ta mở file Main.storyboard và kéo vào một UIView -> đổi màu nền(Background color) của view sang một màu khác cho dễ nhìn.

Khi này chúng ta cần gán constraint cho view đó theo Hình 1
Cần chú ý ở đây chúng ta sẽ constraint bottom của view vào bottom của superview thay vì Safe Area để khi build trên các dòng điện thoại tai thỏ (iphone x, xs ….) sẽ không bị trắng ở dưới của màn hình.

Tiếp đến chúng ta sẽ add 1 UIView nhỏ vào trong UIView vừa mới tạo để thể hiện view này có thể kéo thả được.
Chúng ta cũng constraint UIView nhỏ để nó nằm trên top và giữa của superview kết quả chúng ta thu được như Hình 2

Vậy là chúng ta đã xong phần UI, tiếp đến chúng ta cần kéo IBOutlet top constraint cho cái view to và đặt tên nó là topViewContainer kết quả sẽ được như hình 3

Chúng ta kéo IBOutlet cho top constraint của view để làm gì? Mục đích ở đây là để sau này chúng ta sẽ thay đổi giá trị của topConstraint.constant -> thay đổi vị trí và để tạo hiệu ứng chuyển động.

Tiếp đến chúng ta kéo outlet cho thằng View to đặt tên là viewContainer

OK, giờ chúng ta sẽ đi vào code chi tiết.
Giờ chúng ta mở file ViewController.swift ra và tạo enum cho các trạng thái mở rộng

// 1: Tạo 3 trạng thái mở rộng cho viewContainer
enum ExpansionState {
    case compressed
    case haft
    case expanded
}

Tạo pangesture và gán nó cho viewContainer, trong code mình đã comment rõ từng dòng, từng hàm để các bạn có thể hiểu được nó làm gì.

   // thêm UIGestureRecognizerDelegate để sử dụng được PanGesture
class ViewController: UIViewController, UIGestureRecognizerDelegate {

    @IBOutlet weak var viewContainer: UIView!
    @IBOutlet weak var topViewContainer: NSLayoutConstraint!
    // Khởi tạo trạng thái
    var expansionState: ExpansionState = .haft
    // Khởi tạo giá trị cũ của topViewContainer
    var oldTopViewContainer: CGFloat = 0

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        setupGestureRecognizers()
        // Khởi tạo vị trí bắt đầu cho việc animte viewContainer.
        // Ở đây chúng ta đang để nó ở trạng thái compressed có nghĩa là ở trạng thái expansion nhỏ nhất.
        topViewContainer.constant = topViewContainer(forState: .compressed)
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        // Do mình muốn viewContainer sẽ chuyển động từ dưới lên trên và dừng lại ở trạng thái expansion 1 nửa màn hình
        // Nên mình gọi hàm phía dưới để nó thực hiện chuyển động vì ở viewDidLoad nó đang ở trạng thái compressed
        animateTopConstraint(constant: topViewContainer(forState: .haft), velocity: CGPoint(x: 0, y: 50))
    }

    // Cài đặt Pangesture,
    func setupGestureRecognizers() {
        let panGestureRecognizer = UIPanGestureRecognizer(target: self,
                                                          action: #selector(panGestureDidMove(sender:)))
        panGestureRecognizer.delegate = self
        viewContainer.isUserInteractionEnabled = true

        viewContainer.addGestureRecognizer(panGestureRecognizer)
    }

    @objc func panGestureDidMove(sender: UIPanGestureRecognizer) {
        let translationPoint = sender.translation(in: view.superview)
        // velocity là vận tốc chuyển động của hành động, dạng như bạn vuốt vào màn hình nhanh hay chậm
        let velocity = sender.velocity(in: view.superview)

        switch sender.state {
        case .changed:
            panGesture(didChangeTranslationPoint: translationPoint, withVelocity: velocity)
        case .ended:
            panGesture(didEndTranslationPoint: translationPoint, withVelocity: velocity)
        default:
            return
        }
    }

    // Phương thức này để tính toán giá trị viewContainer.top theo các trạng thái thái mà nó cần tính
    func topViewContainer(forState state: ExpansionState) -> CGFloat {
        let heightView = self.view.bounds.height
        switch state {
        case .compressed:
            return heightView - 100
        case .haft:
            return heightView / 2
        case .expanded:
            return 100
        }
    }
}

Tiếp đến chúng ta cần tạo Extenstion cho phần animation để phục vụ cho việc chuyển động view container

/ MARK: Animation
extension ViewController {
    /// Animates the top constraint of the drawerViewController by a given constant
    /// using velocity to calculate a spring and damping animation effect.
    func animateTopConstraint(constant: CGFloat, velocity: CGPoint) {
        let previousConstraint = topViewContainer.constant
        let distance = previousConstraint - constant
        let springVelocity = velocity.y != 0 ? max(1 / (abs(velocity.y / distance)), 0.08) : 0.08
        let springDampening = CGFloat(0.6)

        UIView.animate(withDuration: 0.5,
                       delay: 0.0,
                       usingSpringWithDamping: springDampening,
                       initialSpringVelocity: springVelocity,
                       options: [.curveLinear],
                       animations: {
                        self.topViewContainer.constant = constant
                        self.oldTopViewContainer = constant
                        self.view.layoutIfNeeded()
        }, completion: nil)
    }
}

Tiếp đến chúng ta cần các hàm để xử lí khi mà người dùng kéo viewContainer
Ở trong code mình đã comment các hàm, các dòng để mọi người dễ hiểu, hãy đọc trong code nhé.

//MARK: PanGesture handle
extension ViewController {

    // Hàm này được gọi khi PanGestureRecognizer nhận ra được sự thay đổi của view,
    // trong hàm này chúng ta có thể thực hiện một số điều kiện để giới hạn việc kéo của người dùng
    func panGesture(didChangeTranslationPoint translationPoint: CGPoint,
                              withVelocity velocity: CGPoint) {
        let newConstraintConstant = oldTopViewContainer + translationPoint.y
        // Giới hạn việc người dùng kéo quá xa so với phía trên
        if newConstraintConstant >= 0 {
            topViewContainer.constant = newConstraintConstant
        }
    }

    // Phương thức này được gọi khi kết thúc pan
    func panGesture(didEndTranslationPoint translationPoint: CGPoint,
                              withVelocity velocity: CGPoint) {
        // Velocity là kiểu CGPoint vì vậy nó có 2 giá trị x và y
        // x: đại diện cho vận tốc theo chiều ngang
        // y: đại điện cho vận tốc theo chiều dọc
        // Do mình đang muốn thực hiện kéo thả theo chiều dọc nên ở ví dụ này mình sẽ dùng thuộc tính vận tốc y
        if abs(velocity.y) <= 50.0 {
            // 50: ở đây là vận tốc mà mình coi nó là người dùng đang kéo từ từ. Con số này các bạn có thể tùy chỉnh
            // Giá trị của y < 0 có nghĩa là người dùng đang kéo lên trên và y > 0 là kéo xuống dưới
            // dấu của y sẽ thể hiện chiều di chuyển của nó.
            // Vì vậy mình cần sử dụng hàm abs() trước khi thực hiện phép so sánh
            drag(lowVelocity: velocity)
        } else if velocity.y > 0 {
            dragDown(highVelocity: velocity)
        } else {
            dragUp(highVelocity: velocity)
        }
    }

    // Hàm này thực hiện việc xác định xem view đang gần vị trí của trạng thái nào hơn sẽ chuyển sang trạng thái đó.
    func drag(lowVelocity velocity: CGPoint) {
        let compressedTopConstraint = topViewContainer(forState: .compressed)
        let haftTopConstraint = topViewContainer(forState: .haft)
        let expandedTopConstraint = topViewContainer(forState: .expanded)

        let expandedDifference = abs(topViewContainer.constant - expandedTopConstraint)
        let haftDifference = abs(topViewContainer.constant - haftTopConstraint)
        let compressedDifference = abs(topViewContainer.constant - compressedTopConstraint)

        let heightArray = [expandedDifference, haftDifference, compressedDifference]
        let minHeight = heightArray.min()

        if expandedDifference == minHeight {
            expansionState = .expanded
            animateTopConstraint(constant: expandedTopConstraint, velocity: velocity)
        } else if haftDifference == minHeight {
            expansionState = .haft
            animateTopConstraint(constant: haftTopConstraint, velocity: velocity)
        } else {
            expansionState = .compressed
            animateTopConstraint(constant: compressedTopConstraint, velocity: velocity)
        }
    }

    // Hàm này để xử lí khi người dùng kéo thả view với tốc độ cao,
    // nó sẽ xác định và chuyển tới trạng thái liền kề theo hướng phía dưới
    func dragDown(highVelocity velocity: CGPoint) {
        // Handle High Velocity Pan Gesture

        switch expansionState {
        case .compressed, .haft:
            expansionState = .compressed
            animateTopConstraint(constant: topViewContainer(forState: .compressed), velocity: velocity)
        case .expanded:
            expansionState = .haft
            animateTopConstraint(constant: topViewContainer(forState: .haft), velocity: velocity)
        }
    }

    // Hàm này để xử lí khi người dùng kéo thả view với tốc độ cao,
    // nó sẽ xác định và chuyển tới trạng thái liền kề theo hướng phía trên
    func dragUp(highVelocity velocity: CGPoint) {
        // Handle high Velocity Pan Gesture
        switch expansionState {
        case .compressed:
            expansionState = .haft
            animateTopConstraint(constant: topViewContainer(forState: .haft), velocity: velocity)
        case .haft, .expanded:
            expansionState = .expanded
            animateTopConstraint(constant: topViewContainer(forState: .expanded), velocity: velocity)
        }
    }
}

Và đây là kết quả khi chúng ta build app lên:

Vậy là xong!
Ngoài ra các bạn có thể chỉnh sửa lại view sao cho phù hợp với ứng dụng đang làm 😀

Cảm ơn mọi người đã theo dõi bài viết!
Mọi ý kiến đóng góp mọi người hãy comment xuống phía dưới để mình có thể thay đổi cho bài biết được tốt hơn. :v