Android Gooey FAB Is EASY

Dịch nôm na " gooey stuff " là dạng view mà khi chuyển động có sự thay đổi hình dạng, từ đó khiến người dùng có cảm giác các view có hiệu ứng dính vào nhau, bạn có thể xem ảnh gift sau để hiểu rõ hơn Tôi đã suy nghĩ về gooey stuff trong thời gian dài. Nó khá mới mẻ, và về phía người dùng, những thành phần dính này khá bắt mắt, mượt mà và thật. Hãy cùng tôi thử implement FAB với hiệu ứng gooey.

Giống như bạn thấy, gooey không có đổ bóng, và khi click thì foreground animation làm nên hiệu ứng gooey. Nên hãy tập trung vào tạo transformation. Cách nhanh nhất để tạo transformation là dùng Vector Drawable. Trước khi dùng hình ảnh động bạn cần tham khảo Android icon animation để hiểu về animation cho icon Android icon animations. Chúng ta có 1 button FAB, nó thường sẽ có nhiều actions khác nhau, ở đây ta sẽ chỉ ví dụ đơn giản với 1 action.

Tạo ảnh vector

Nếu bạn tạo một vòng tròn trong Android Studio, nó sẽ bao gồm 2 cung tròn. Dùng SketchUp để vẽ cung tròn, dùng command sau:

a rx ry x-axis-rotation large-arc-flag sweep-flag x y

Button gooey với 1 action

Giải thích các tham số

• x: bán kính hình tròn lớn
• y: bán kính hình tròn lồi (xuất hiện khi click vào hình tròn lớn)

Chi tiết bạn có thể tham khảo

• SVG arc tutorial http://www.pindari.com/svg-arc.html
• Draw SVG arc using SketchUp https://help.sketchup.com/en/article/3000087

Kết quả được 1 ảnh vector.

Đưa ảnh vector vừa tạo vào object animator

<objectAnimator
       android:duration="375"
       android:interpolator="@android:anim/accelerate_decelerate_interpolator"
       android:propertyName="pathData"
       android:valueFrom="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"
       android:valueTo="M12,12m-10,0a10,10 0,1 1,20 0a10,16 0,1 1,-20 0"
       android:valueType="pathType" />

Đó là animation, như bạn thấy có bán kính y anim chạy từ 10-16 và sau đó có một anim trong một thiết lập cho hình ảnh động ngược với startOffset.

Như bạn đã nhận ra cốt lõi ở đây là đó là những hình ảnh động, tôi không làm cho một số hình dạng phức tạp, không sử dụng Bezier đường cong. Sự kỳ diệu là ở tốc độ, kích thước.

Trong khi ép FAB lớn, nhỏ đi từ dưới lên trên với bắt đầu từ một button trông bình thường và áp dụng một số chuyển đổi quy mô nhỏ để cho nó cái nhìn tốt hơn. Tất cả điều đó cho sự xuất hiện nhỏ như FAB đến từ những cái lớn như cùng một view gốc. Toàn bộ hình ảnh động có thời gian kéo dài gấp đôi duration mà tôi khai báo trong object view animator (375*2 = 750 ms) mà đã khá dài, nếu để duration rơi vào khoảng 150- 200 ms bạn sẽ hầu như không nhận thấy sự không hoàn hảo, nó rất mượt. Trông cũng khá, phải không?

Một điều cần xem xét là làm thế nào để xử lý các sự kiện click. Nếu gắn bó với một điểm sau đó chúng tôi sẽ phải kiểm tra vị trí của sự kiện liên lạc. quan điểm khác biệt cho nhỏ FAB của giải quyết vấn đề này. Một điều nữa là tiền cảnh có thể click và có shadow. Tôi sẽ cho họ trong tương lai, nhưng như bạn thấy, nó là tương đối đơn giản để làm cho một số công cụ dính trên Android với Animated Vector Drawables. Điều duy nhất bạn cần phải tìm hiểu là tất cả các lệnh SVG khác nhau. Bạn không cần phải làm cho tất cả quan điểm của bạn có gooey để giữ cảm giác của một phong cách thiết kế duy nhất.

Tham khảo github repo ở đây https://github.com/IhorKlimov/Android-Animations