Kỹ thuật đưa animation vào Button trong Swift

Trong thời gian rảnh tôi đã thử làm Animation có trong dribble cho vào button và bài viết hôm nay xin được giới thiệu tới các bạn.

https://github.com/hayashi311/HRProgressButton

Base là UIControl

Chúng ta đi từ điều cơ bản này. Trước khi thực hiện ta cần nhớ rõ, thừa kế từ UIControl chứ không phải UIButton

Nếu chúng ta sử dụng UI Component tuỳ ý và thừa kế rất nhiều class tính năng phong phú thì ta sẽ phải mất nhiều thời gian để xoá đi những tính năng không cần thiết.

Và kết cục con đường đi ngắn nhất là sử dụng Class cần thiết nhỏ nhất.

Sử dụng isHighlighted làm trigger khi muốn thay đổi hiển thị lúc bấm vào button

Ở đây chú ý chúng ta sẽ không dùng các thuộc tính như GestureReconizer hay setAction:

Mỗi lần khi trigger isSelected không thấy thay đổi gì, nhưng chính xác thì ta cần xử lý trong isHighlighted

Gần đây mình thấy chất lượng của các App có vẻ thấp đi nhiều. Chính vì vậy mặc dù làm hơi mất thời gian nhưng chúng ta nên làm hiệu ứng khi sử lý button ^^

Đưa animation Loading vào ta sử dụng CAReplicatorLayer

Khi ta code :

relicatorLayer.instanceCount = 3

thì kết quả sẽ như sau:

tương tự vậy :

relicatorLayer.instanceCount = 10

thì kết quả:

Tiếp đó để cho animation gốc của Layer vào chúng ta sẽ chỉ định thời gian cho từng chấm layer

Animation đồng thời :

replicatorLayer.instanceDelay = 0

Animation lùi theo time (theo kiểu làn sóng)

replicatorLayer.instanceDelay = 0.1

khá là tiện lợi

Thêm một chút animation vào lúc hiển thị và không hiển thị nữa

Khi bắt đầu Loading:

// trước animation
circleLayer.transform = CATransform3DMakeTranslation(0, 6, 0)
circleLayer.opacity = 0.5
// animation
circleLayer.transform = CATransform3DIdentity
circleLayer.opacity = 0.5

Cùng lúc thực hiện cả hai animation

Theo kinh nghiệm thì cùng lúc ta thực hiện cả hai hiệu ứng này sẽ khá là "chất" phải không nào ^^

Ở hiển thị các dấu chấm (dot) ta sử dụng opacity và bounds

Sau khi táp vào ta dùng transform(scale) và backgroundColor

và kết hợp lại nó sẽ như thế này nhé ^^

Thư viện mình vẫn chưa hoàn thành, tuy nhiên mình đã đang public rồi nên các bạn cứ lấy về chơi thử xem thế nào nhé (bow)

https://github.com/hayashi311/HRProgressButton

Tham Khảo: Qiita