Tạo Bendabel dynamic View với UIKit Dynamic và Core Animation

48

Bài hướng dẫn này đến từ tác giả Victor Baro sử dụng UIKit Dynamic và Core Animation để tạo ra những view “có thể uốn cong” được lấy cảm hứng từ ứng dụng Skype.

Tác giả gọi nó là “The Jelly View

Điều này được thực hiện như thế nào???

Mẹo ở đây rất đơn giản: chúng ta có 9 views nhỏ được kết nối 1:1 sử dụng UIAttachmentBehaviour. Hình ảnh sau đây sẽ cho chúng ta thấy những subviews (màu xanh lá) và những đường nối (màu vàng)

Đoạn code để thực hiện điều ở trên rất đơn giản:

 

 

Nếu chúng ta thêm vào các hành động (lực hút, va chạm…) nó sẽ thực hiện được. Đây là ví dụ với những hành động với lực hút và va chạm.

skeletonView

Để vẽ “JellyView”, chúng ta sử dụng CAShapeLayer. Lý do là nó sẽ giúp dễ dàng hơn trong trường hợp chúng ta muốn thêm vài sublayers vào.

Path của shape layer sẽ cho hình vuông 3×3. Chúng ta chỉ cần thêm 4 Quadcurves (một cho mỗi cạnh) sử dụng midpoint như là 1 control point.

Đoạn code để thực hiện điều đó:

 

 

Thêm vào Magic Touch. Magic touch sẽ là CADisplayLink.

CADisplayLink object is a timer object that allows your application to synchronize its drawing to the refresh rate of the display.

Nó thực sự mạnh mẽ và dễ dàng. Vấn đề ở đây là chúng ta không thể nắm bắt được những thay đổi của 9 subviews. Bằng cách vẽ CGPath như một function ở tâm của mỗi hình vuông, CADisplayLink sẽ lo phần còn lại.

 

Một vài ví dụ:

Tác giả đã tạo 1 project với 4 ví dụ để cho thấy một số ý tưởng về cách sử dụng chúng trong project của các bạn.

1.Normal VBFJellyView + UIPanGestureRecognizer: tác giả chỉ di chuyển các điểm góc và cập nhật các animator chính với những giá trị mới cho nó để tính toán lại. Các vị trí midpoints được cập nhật bởi UIKit Dynamic, nhờ vào các snap behaviour.

2.JellyButton: Có subclass VBFJellyView và thêm một UITapGestureRecognizer. Mỗi một view khi được touch vào, một push behaviour sẽ được áp dụng cho các control point.

3.JellyAlert: Có subclass VBFJellyView và thêm vào các hành vi liên quan tới lực hút và va chạm. Đối với hành vi va chạm, tác giả có thêm vào đường biên ngang. Mỗi một view khi được touch vào, hành vi va chạm sẽ được remove đi và view sẽ rơi khỏi màn hình.

4.VBFJellyView + UIPanGestureRecognizer + gravity + collision behaviours.

 

Bạn có thể tìm bài hướng dẫn ở đây Victor Baro’blog

Bạn có thể tìm VBFJellyView trên github

Nguồn: IDE Academy via Maniacdev