[iOS] Làm cho ứng dụng của bạn đẹp hơn với một vài hiệu ứng animation

1681

Làm cho ứng dụng của bạn đẹp hơn? Tại sao không?

Điều kiện tiên quyết

Bạn không cần phải có kiến thức chuyên sâu về phát triển ứng dụng iOS, vì vậy cứ thoải mái! Tất cả những gì bạn cần là một máy tính có MacOS và Xcode.

Đến cuối bài, chúng ta sẽ có:

  1. Background animation quay vòng liên tục qua các màu được xác định trước.
  2. Countdown progress bar nằm ở giữa.
  3. Pulsing animation xung quanh progress bar.

Ít thôi nhưng tôi hy vọng nó sẽ giúp được phần nào khi bạn bắt đầu với Core Animation!

Hướng dẫn

Cùng đi tiếp và tạo một ứng dụng mới trong Xcode. Trước tiên chúng ta sẽ bắt đầu với background, và làm thế nào để có được animation như vậy.

Gradient Background

Đối với nền, chúng tôi sẽ sử dụng CAGradientLayer để tạo hiệu ứng cho nó. Chúng tôi sẽ khai báo các biến như vậy:

Đầu tiên chúng ta đã tạo ra CAGradientLayer và cũng là một mảng sẽ chứa nhiều màu sắc khác nhau, sẽ được sử dụng làm gradient sau. 

Khi View tải, chúng ta sẽ tạo chế độ view gradient như trên.

  • Nối tất cả các màu có sẵn vào Set
  • Đặt khung gradient để chiếm toàn bộ màn hình
  • Đặt màu ban đầu được sử dụng, là chỉ số 0 trong tập gradient của chúng ta
  • Chúng ta đã xác định điểm bắt đầu và điểm kết thúc sao cho gradient flow theo đường chéo từ trên trái sang dưới phải.
  • Và cuối cùng, tôi chèn gradient làm first layer tiên trong sublayers.

Sau khi tôi đã thiết lập layer gradient, đây là lúc để tạo hiệu ứng cho layer!

  • Bất cứ khi nào hàm này được gọi, tôi sẽ tăng chỉ số currentGradient lên 1 và lặp lại theo đó.
  • Thiết lập CABasicAnimation để thay đổi colors
  • Set animation để animate toValue chỉ số màu hiện tại của tôi trong bộ của chúng tôi trong thời gian 3 giây.
  • Một vài dòng tiếp theo để đảm bảo rằng hình ảnh động gradient của chúng tôi không bị xóa khi hoàn thành.
  • Sử dụng delegate animationDidStop để detect khi animation gradient của chúng ta đã hoàn thành. Nếu nó đã kết thúc, hãy update màu gradient hiện tại thành chỉ mục hiện tại của chúng ta (điều này sẽ hoạt động giống như fromValue trong animation của chúng ta) và gọi lại animateGradient ().

Tuyệt quá! Animating background thông qua CAGradientLayer khá đơn giản! Hãy để đi trước và thêm một thanh tiến trình đếm ngược!

Countdown Progress Bar

Để đạt được hiệu quả như trên, chúng ta sẽ cần những điều sau đây:

  • CAShapeLayers – Một cho background, một cho foreground và một cho pulsation
  • CAGradientLayer —Điều này là để có một nét với một số gradient so với một UIColor rắn
  • Timer để theo dõi thời gian còn lại và update UILabel trên màn hình

Đầu tiên, tôi đã tạo một lớp và tuân thủ nó theo UIView để tôi có thể sử dụng nó theo chương trình hoặc thông qua storyboard.

Những gì tôi đã tuyên bố ban đầu là 3 CAShapeLayer cần thiết và một UILabel, đó là các biến lười biếng và tôi đã cho chúng các giá trị ban đầu. Lazy có nghĩa là các closures sẽ được thực thi khi các biến này được gọi trong thời gian chạy.

Ngoài ra, vì tôi có timer, tôi cũng đã thêm một deinit để đảm bảo rằng timer không hợp lệ khi chế độ xem bị hủy:

Ngoài ra, vì tôi muốn foreground và pulse của mình có một số gradientc, tôi đã tạo thêm 2 biến, thuộc loại CAGradientLayer. Chúng ta sẽ che foreground và pulse của chúng ta trên các lớp gradient để đạt được hiệu quả mà chúng ta muốn.

Tôi đã cho họ một số màu gradient cũng như vị trí của họ. Đây là tất cả các biến chúng ta cần để bắt đầu! Hàm init gọi một phương thức loadLayers () để cho phép xem điều đó làm gì.

Khi chúng ta gọi phương thức, đầu tiên chúng ta tạo một circular path sẽ được CAShapeLayers sử dụng. Vì chúng tôi muốn các foreground và pulse có gradient, tôi đã áp dụng mặt nạ tương ứng. Cuối cùng, tôi đã thêm UILabel ở giữa View sẽ được sử dụng để hiển thị thời gian còn lại.

Animating cho layers

Bây giờ chúng ta đã thiết lập tất cả các layers, hãy để xem xét cách chúng ta có thể đạt được animations. Dưới đây cho thấy làm thế nào chúng ta có thể làm animate foreground layer.

Chúng tôi đã khai báo CABasicAnimation với keyPath 'StroEnd' Điều này có nghĩa là chúng ta muốn tạo hiệu ứng nơi stroke sẽ kết thúc.

Animation sẽ đi từ đầu đến cuối (là một vòng tròn như được chỉ định trong đường dẫn của chúng ta trước đó) trong một khoảng thời gian được chỉ định. Cuối cùng, chúng ta không muốn Animation của mình bị xóa khi hoàn thành, vì vậy chúng ta đặt isRemondOnCompletion thành false. Bước cuối cùng là thêm Animation vào foregroundLayer (CAShapeLayer)của chúng ta

pulsing layer animation gần như giống nhau, ngoại trừ việc chúng ta sẽ nhóm 2 animation. Nếu bạn thấy kết quả cuối cùng, pulse layer của chúng ta sẽ scales ra bên ngoài và cũng trở nên ít nhìn thấy hơn về cuối.

Chúng tôi sẽ khai báo 2 CABasicAnimations với các đường dẫn transform.scale để điều chỉnh kích thước và opacity để điều chỉnh mức độ hiển thị. Layer sẽ tăng 20% ​​kích thước và giảm đến 0 opacity trong suốt thời gian của animation. Khi chúng ta đã khai báo 2 animations, chúng ta có thể sử dụng CAAnimationgroup để thêm các animations lại với nhau. Sau đó, để làm cho nó trông đẹp hơn và không tuyến tính như foreground animation của chúng ta, chúng ta đã đặt timingFunction thành easyInEaseOut, điều này có nghĩa là animation của chúng ta sẽ bắt đầu chậm, tăng tốc giữa duration của nó và sau đó chậm lại trước khi kết thúc. Cuối cùng, chúng ta đã đặt duration là 1 giây và lặp lại animation liên tục. Nhưng đừng lo lắng, khi chúng ta phát hiện ra rằng foreground animation của chúng ta đã dừng (có nghĩa là thời gian còn lại là 0), chúng ta cũng sẽ loại bỏ pulsing animation.

Cuối cùng, đây là phần còn lại của các methods được tìm thấy trong tệp của chúng ta. HandleTimerTick giảm thời gian còn lại 0,1 giây và cập nhật UILabel của chúng ta bằng cách sử dụng main thread (vì đây là thao tác UI).

Public method duy nhất của chúng ta là startCountdown, mất nhiều thời gian và có animate hay không.

AnimationDidStop delegate hoạt động giống như background gradient của chúng ta, chúng ta đã làm trước đó. Khi foreground layer của chúng ta kết thúc animating, chúng ta sẽ xóa tất cả animations và làm mất hiệu lựctimer của chúng ta.

Đó là tất cả những gì chúng ta thực sự cần để có được đầu ra giống nhau! Dưới đây là 2 tập tin nếu có ai bị mất.

Sử dụng lớp CountdownProgressBar

Để sử dụng lớp của chúng ta, đầu tiên tôi đã tạo một UIView và đặt nó ở giữa View. Sau đó tôi đã thay đổi class của nó thành lớp CountdownProgressBar của chúng ta. Cuối cùng, trong ViewControll.swiftcủa tôi, tôi bắt đầu animation như sau:

countdownProgressBar.startCoundown(duration: 10, showPulse: true)

Hãy thử xem pulsation animation hoặc thử vô hiệu hóa nó.

Thế là xong! Chúng ta đã thực hiện một vài animations thực sự thú vị mà không khó chút nào! Ban đầu tôi đã viết custom countdown class của riêng mình cho một dự án tôi đang làm, và không thể tìm thấy nhiều ví dụ trực tuyến. Hãy sửa đổi và sử dụng mã như bạn muốn.

Source: GITHUB

Có rất nhiều điều thú vị mà bạn có thể làm, với hiệu quả cao hơn UIView, bằng cách sử dụng CALayers!

Đầu tiên, bạn có thể thử nghiệm với các giá trị và màu sắc khác nhau để thực sự hiểu cách hoạt động của mã. Ví dụ: bạn có thể chỉnh sửa màu background , điều chỉnh radius của hiệu ứng pulsing của chúng ta hoặc chơi với màu của foreground layer.

Đây chỉ là một số ví dụ đơn giản làm thế nào bạn có thể thêm gia vị cho ứng dụng của bạn. Sẽ rất tuyệt khi kết hợp một animated background cho Login Page của bạn hoặc tạo custom loading bar của riêng bạn.

TopDev via Viblo

SHARE