Ví dụ về MotionLayout

Tài liệu này có các ví dụ về cách sử dụng MotionLayout. Mỗi ví dụ bao gồm một video minh hoạ chuyển động, cùng với mã tương ứng cho cảnh và bố cục chuyển động.

Chuyển động cơ bản

Ví dụ này chứa một khung hiển thị duy nhất mà bạn có thể chạm và kéo để di chuyển theo chiều ngang.

Hình 1. Kéo chế độ xem.

Thuộc tính tuỳ chỉnh – backgroundColor

Ví dụ này tương tự như ví dụ về Chuyển động cơ bản. Ngoài chuyển động cơ bản, màu nền của khung hiển thị cũng thay đổi khi khung hiển thị di chuyển.

Hình 2. Kéo một khung hiển thị khi màu nền của khung hiển thị đó thay đổi.

ImageFilterView - chuyển đổi hình ảnh

Ví dụ này cho biết cách chuyển đổi giá trị độ bão hoà của ImageFilterView.

Hình 3. Kéo một hình ảnh khi độ rực màu của hình ảnh đó thay đổi.

Vị trí khung chính

Ví dụ này sử dụng <KeyFrameSet> để thay đổi vị trí Y của khung hiển thị trong khi chuyển động.

Hình 4. Kéo một khung hiển thị và thay đổi vị trí Y của khung hiển thị đó.

Loại nội suy khung chính

Ví dụ này dựa trên ví dụ về Vị trí khung hình, thêm tính năng xoay và điều chỉnh theo tỷ lệ cho hiệu ứng chuyển đổi khung hiển thị.

Hình 5. Kéo một khung hiển thị và thay đổi vị trí Y, hướng xoay và tỷ lệ của khung hiển thị đó.

Chu kỳ khung hình chính

Ví dụ này thêm các phần tử <KeyCycle> để thêm chuyển động dạng sóng vào khung hiển thị.

Hình 6. Kéo một khung hiển thị với chuyển động giống như sóng trong khi thay đổi màu sắc của khung hiển thị đó.

CoordinatorLayout (1/2)

Ví dụ này thêm MotionLayout vào AppBarLayout hiện có để thêm chuyển động vào thanh ứng dụng. Ví dụ này được mô tả kỹ hơn trong phần Giới thiệu về MotionLayout (phần III).

Hình 7. Cuộn nội dung trong khi thanh ứng dụng mở rộng.

CoordinatorLayout (2/2)

Ví dụ này thêm MotionLayout vào AppBarLayout hiện có để thêm chuyển động vào thanh ứng dụng.

Hình 8. Thao tác cuộn nội dung trong khi thanh ứng dụng mở rộng, đồng thời văn bản chuyển động vào và ra khỏi thanh ứng dụng.

Bố cục ngăn (1/2)

Ví dụ này cho biết cách thêm chuyển động vào DrawerLayout. Ví dụ này được mô tả kỹ hơn trong phần Giới thiệu về MotionLayout (phần III).

Hình 9. Mở rộng "DrawerLayout".

Bố cục ngăn (2/2)

Ví dụ này cho biết cách thêm chuyển động vào DrawerLayout.

Hình 10. Mở rộng "DrawerLayout" bằng văn bản trình đơn động.

Bảng điều khiển bên

Ví dụ này cho biết cách hiển thị bảng điều khiển bên khi kéo vùng nội dung chính sang bên phải.

Hình 11. Hiển thị bảng điều khiển bên bằng cách kéo nội dung chính.

Quảng cáo thị sai

Ví dụ này minh hoạ nền thị sai, trong đó các lớp nền khác nhau di chuyển với tốc độ khác nhau.

Hình 12. Hiệu ứng thị sai trong hình ảnh tiêu đề.

ViewPager

Ví dụ này cho thấy cách bạn có thể thêm chuyển động khi vuốt giữa các thẻ ViewPager. Ví dụ này được mô tả kỹ hơn trong phần Giới thiệu về MotionLayout (phần III).

Hình 13. Hiệu ứng thị sai trong hình ảnh tiêu đề khi vuốt "ViewPager".

ViewPager – Lottie

Ví dụ này cho thấy cách bạn có thể thêm chuyển động khi vuốt giữa các thẻ ViewPager.

Hình 14. Hình ảnh cho thấy hiệu ứng Lottie trong hình ảnh tiêu đề khi vuốt "ViewPager".

Chuyển động phức tạp (1/3)

Ví dụ này kết hợp các phần tử trong các ví dụ trước để minh hoạ chuyển động phức tạp.

Hình 15. Kết hợp các hiệu ứng để tạo chuyển động phức tạp.

Chuyển động phức tạp (2/3)

Ví dụ này kết hợp các phần tử trong các ví dụ trước để minh hoạ chuyển động phức tạp.

Hình 16. Kết hợp các hiệu ứng để tạo chuyển động phức tạp.

Chuyển động phức tạp (3/3)

Ví dụ này kết hợp các phần tử trong các ví dụ trước để minh hoạ chuyển động phức tạp.

Hình 17. Kết hợp các hiệu ứng để tạo chuyển động phức tạp.

Chuyển đổi mảnh (1/2)

Ví dụ này cho thấy cách bạn có thể dùng MotionLayout để chuyển đổi giữa các mảnh.

Hình 18. Chuyển đổi mảnh.

Chuyển đổi phân mảnh (2/2)

Ví dụ này cho thấy cách bạn có thể dùng MotionLayout để chuyển đổi giữa các mảnh.

Hình 19. Chuyển đổi mảnh.

Chuyển động giống như YouTube

Ví dụ này minh hoạ việc chuyển đổi giữa khung hiển thị thu gọn và trải nghiệm toàn màn hình có thêm nội dung.

Hình 20. Các mảnh chuyển đổi tương tự như YouTube.

Trình kích hoạt phím

Ví dụ này minh hoạ cách hiện và ẩn một nút hành động nổi khi hiệu ứng chuyển đổi vượt qua một ngưỡng tiến trình.

Hình 21. Hiện và ẩn một nút hành động nổi.

Nhiều tiểu bang

Ví dụ này cho thấy cách sử dụng trạng thái để xác định chuyển động nào cần áp dụng.

Hình 22. Chuyển động khác nhau dựa trên trạng thái.