Start activity bằng cách sử dụng animation

1265

Người viết: Nguyen Ngoc Son

Transition của activity trong material design app cung cấp trực quan sự kết nối giữa các trạng thái khác nhau thông qua chuyển động và sự biến đổi giữa các thành thành phần. Bạn có thể chỉ định animation cho việc chuyển tiếp nhập và chuyển tiếp các thành phần được chia sẽ giữa các activity.

  • Enter transition sẽ xác định xem View của một Activity xuất hiện như thế nào. Ví dụ view xuất hiện trên màn hình từ bên ngoài và bay vào chính giữa màn hình.
  • Exit transition xác định xem View của một Activity sẽ ẩn đi như thế nào. Ví dụ, view ẩn khỏi màn hình từ chính giữa.
  • Shared element transition xác định transition của các share element giữa các activity diễn ra như thế nào. Ví dụ nếu 2 activity có cùng 1 ảnh ở các vị trí khác nhau với size khác nhau, changeImageTransform shared element sẽ hiển thị một cách trơn tru sự thay đổi này.

Transition với shared elements.

Android support những transition sau:

  • Explode – Di chuyển view vào và ra từ chính giữa màn hình.
  • Slide- Di chuyển view vào vả ra từ một trong các cạnh của màn hình.
  • Fade – Thêm hoặc xoá view từ từ bằng cách điều chỉnh opacity.

Bất cứ transition nào extend Visibility class sẽ support enter and exit transition. Chi tiết xem API của Transition class.

Android cũng support những shared element transition sau:

  • changeBounds – Animation thay đổi layout bound của view.
  • changeClipBounds – Animation thay đổi clip bounds của view.
  • changeTranform – Animation thay đổi scal và rotation của view.
  • changeImageTransform – Animation thay đổi size và scale của ảnh.

Khi enable acitivty transition, mặc định cross-fading transition sẽ được activate để hiện và ẩn giữa các activity.

Transition với một shared element

Kiểm tra system version

Activity transition API hỗ trợ từ Android 5.0 (API 21) trở lên. Để duy trì khả năng tương thích với các phiên bản Android trước đó, hãy kiểm tra phiên bản hệ thống ở runtime trước khi gọi API cho bất kì feature nào sau đây:

Chỉ định custom transition

Đầu tiên, enable window content transition với thuộc tính android:windowActivityTransitions khi define một style kế thừa từ material theme. Bạn cũng có thể chỉ định hiện, ẩn và share element transition trong định nghĩa style của bạn:

change_image_transform transition trong ví dụ này được define như sau:

changeImageTransform element tương ứng với ChangeImageTransform class. Chi tiết vui lòng xem API cho Transition.

Để enable window content transition, gọi hàm Window.requestFeature():

Để chỉ định transition, gọi những hàm sau với Transition object:

Hàm Window.setExitTransition() và Window.setSharedElementExitTransition()define exit transition cho việc gọi activity. Hàm Window.setEnterTransition() và Window.setSharedElementEnterTransition() define cho việc enter transition cho việc gọi activity.

Để get full effect của transition, bạn phải enable window content transition cho cả activity gọi và activity được gọi. Nếu không, acitivity gọi sẽ start exit transition nhưng sau đó bạn sẽ thấy window transition (như scale hay fade).

Để bắt đầu enter transition, sử dụng hàm Window.setAllowEnterTransitionOverlap()trong activity được gọi, điều này cho phép hiển thị enter transition ấn tượng hơn.

Có thể bạn quan tâm

UX Best Practice (Trải nghiệm người dùng): Hack não người dùng để làm cho trang web và ứng dụng của bạn “cảm giác” nhanh hơn

Các thư viện web animation tốt nhất cho JavaScript

Start activity sử dụng transition

Nếu bạn enable transition và set exit transition cho một activity, transition sẽ active khi bạn khởi chạy một activity khác như dưới đây:

Nếu bạn set enter transition cho activity thứ 2, transition cũng được active khi activity start. Để disable transition khi start activity mới, truyền null vào bundle.

Start activity với shared element

Để tạo transition animation giữa 2 activity có một shared element:

  1. Enable window content transition trong theme.
  2. Chỉ định shared element transition trong style.
  3. Define transition như là một XML resource.
  4. Gán một common name cho shared element ở trong cả 2 layout với thuộc tính android:transitionName.
  5. Sử dụng hàm ActivityOptions.makeSceneTransitionAnimation()

Với shared dynamic view mà được generate trong code, sử dụng hàm View.setTransitionName() để chỉ định tên common element ở cả 2 activity. Để đảo ngược hoạt ảnh của transition animation khi finish activity thứ 2, gọi hàm Activity.finishAfterTransition() thay vì Activity.finish().

Start activity với multiple shared element

Để tạo hoạt ảnh transition animation giữa 2 activity có nhiều hơn một shared element, define shared element ở cả 2 layout với thuộc tính android:transitionName (hoặc sử dụng hàm View.setTransitionName() trong cả 2 activity), sau đó tạo đối tượng ActivityOptions như sau:

Techtalk via Viblo