Phát triển iOS với Swift 2 - Ảnh động

Hoạt ảnh là một phần quan trọng của bất kỳ Ứng dụng nào vì nó thu hút sự chú ý của người dùng đến ứng dụng. Hoạt ảnh chỉ là một tập hợp các hình ảnh lặp lại với tốc độ nhanh. Nó cũng làm cho ứng dụng của bạn trở nên khác biệt so với những ứng dụng khác.

Làm một dự án hoạt hình - Kitty Animation

Đây sẽ là một dự án đơn giản, trong đó chúng tôi sẽ chạy hoạt ảnh khi một nút được nhấp vào. Chúng tôi sẽ sử dụng nhiều hình ảnh để tạo GIF, vì vậy hãy tải xuống bất kỳ GIF nào và chuyển đổi nó thành hình ảnh, điều này sẽ cung cấp cho bạn nhiều khung hình của GIF đó.

Trong phần này, chúng tôi sẽ sử dụng các hình ảnh sau.

Những hình ảnh này khi được phát cùng nhau sẽ tạo ra một hoạt ảnh. Do đó, chúng tôi sẽ tạo một ứng dụng xem duy nhất. Sau đó, chúng tôi sẽ kéo một tùy chọn chế độ xem hình ảnh, nhãn và nút bên trong bộ điều khiển chế độ xem chính. Sau khi hoàn tất, chúng tôi sẽ kết nối chế độ xem hình ảnh và nút với tệp nhanh của chúng tôi.

(Nếu bạn không muốn sử dụng những hình ảnh này, hãy tìm kiếm bất kỳ ảnh gif nào và chuyển đổi nó thành hình ảnh trực tuyến bằng cách sử dụng một số công cụ chuyển đổi gif sang hình ảnh.)

Bên trong hành động nút, chúng tôi sẽ chèn lệnh sau để hiển thị hình ảnh khi một nút được nhấn.

imageView.image = UIImage(named: "frame_0_delay-0.1s.gif") 
// frame_0_delay-0.1s.gif, is the name of image

Đây là cách chúng tôi chỉ định hình ảnh theo chương trình cho Chế độ xem hình ảnh. Khung nhìn bây giờ sẽ như sau:

Chế độ xem đầu tiên sẽ xuất hiện khi chúng tôi chạy ứng dụng. Khi chúng ta bấm vào nút Animate, hình ảnh sẽ hiện ra.

Đây không phải là một hình ảnh động, mà chỉ là một hình ảnh. Chúng tôi sẽ tạo hoạt ảnh ngay bây giờ -

Thêm một biến bên dưới ổ cắm hình ảnh: var counter = 1.

Hãy thấy rằng hình ảnh của chúng ta có tên chung và chỉ khác một ký tự. Thay đổi mã của nút hoạt ảnh của bạn như được hiển thị bên dưới -

@IBAction func animatePressed(_ sender: Any) { 
   imageView.image = UIImage(named: "frame_\(counter)_delay-0.1s.gif") 
   counter += 1 
   if counter == 9 { 
      counter = 0 
   } 
}

Bây giờ, khi bạn nhấn animatenút, hình ảnh thay đổi mỗi lần. Bước tiếp theo là tạo như sau:

Tạo một biến - isAnimating và gán False cho nó.
Tạo một biến bộ đếm thời gian và chỉ định một Timer() chức năng của nó.

Khi hai bước trên được thực hiện, hãy tạo một hàm hoạt ảnh và dán đoạn mã sau.

func animate() { 
   imageView.image = UIImage(named: "frame_\(counter)_delay-s.gif") 
   counter += 1 
   if counter == 9 { 
      counter = 0 
   } 
}

Trong đó, bộ đếm là biến bộ đếm của chúng ta mà chúng ta đã thực hiện trong tệp trước. Bây giờ, bên trong chức năng nút hoạt ảnh, hãy thêm mã sau:

if isAnimating { 
   timer.invalidate() 
   isAnimating = false 
} else { 
   timer = Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: 
   #selector(ViewController.animate), userInfo: nil, repeats: true) 
   isAnimating = true 
}

Hãy thử chạy ứng dụng và chúng tôi sẽ thấy rằng một hình ảnh động đang được chạy trên thiết bị của bạn.

Challenge - Thêm một nút dừng sẽ dừng hoạt ảnh.