Hướng dẫn cho người mới bắt đầu để triển khai Ảnh động Android (Phần 2)

Trong Phần 1, chúng tôi đã thảo luận về những điều cơ bản của Ảnh động và về Ảnh động Tài sản. Trong bài đăng này, tôi sẽ thảo luận về Xem hoạt hình và khung chuyển đổi Hoạt động mới được giới thiệu ở cấp độ API 21. Khung chuyển đổi đã được thêm vào trong API cấp 19 (4.4.2) nhưng nó mạnh hơn ở cấp độ API 21.

Khung công tác Android bắt đầu với Xem hoạt hình nhưng do sự cố của họ, họ đã giới thiệu Thuộc tính Hoạt hình như được thảo luận trong Phần 1. Xem hoạt hình là hoàn hảo cho hoạt hình màn hình giật gân và các khu vực khác không có tương tác như vậy với chế độ xem. Trong hầu hết các trường hợp, chúng được triển khai bằng mã XML.

Các kiểu xem hoạt hình

  1. Tween Animation - Đây là những hình ảnh động được áp dụng trên một khung nhìn chịu trách nhiệm chia tỷ lệ, dịch, xoay hoặc làm mờ một khung nhìn (cùng nhau hoặc từng cái một).
  2. Frame Animation - Những hình ảnh động này được áp dụng bằng nhiều hình vẽ khác nhau. Trong phần này, chúng ta chỉ cần xác định một danh sách các drawable trong mã XML và hình ảnh động chạy giống như các khung của video.

Xem Ảnh động không được sử dụng nhiều vì cùng một thứ có thể sử dụng đối tượng ViewPropertyAnimator nhanh hơn và dễ đọc hơn nhiều. Khung hình động tương tự như Drawable Animation. Điều quan trọng hơn là phải hiểu khung Transition mới rất hữu ích và cung cấp hình ảnh động đẹp mắt.

Các hình ảnh động mới (API cấp 21+)

Nó có tuyệt không?

Android cung cấp chuyển tiếp hoạt động, chuyển tiếp đoạn và chuyển tiếp phần tử được chia sẻ. Các hình ảnh động khác là tiết lộ tròn, hiệu ứng gợn vv, chuyển động cong. Hiệu ứng Ripple có thể được áp dụng chỉ bằng cách đặt thuộc tính nền của chế độ xem là:

android: nền = Cảnh? attr / selectableItemBackground

Ở đây chúng tôi sẽ thử chuyển đổi hoạt động và chuyển tiếp phần tử được chia sẻ giống như trên GIF.

Bước cơ bản là tạo tệp Styles-v21 và thực hiện các thao tác sau:

Giải thích về các kiểu trên-v21.xml

Chuyển tiếp phần tử được chia sẻ - Trong phần này, có một chế độ xem được chia sẻ giữa hai hoạt động / đoạn. Chế độ xem được chia sẻ có nghĩa là cả hai chế độ xem đều giống nhau trong cả hai hoạt động, chỉ có kích thước của chúng là khác nhau một chút. Ví dụ: một hình ảnh trong một mục xem tái chế mà khi nhấp vào (gõ) sẽ hiển thị chi tiết mục với cùng một hình ảnh nhưng ở kích thước lớn hơn. Chúng tôi sẽ làm một cái gì đó như thế này: -

Mát mẻ Nhưng làm thế nào là điều này làm việc?

Về cơ bản có 2 hoạt động ở đây. Một với một dấu chấm nhỏ và khác với một dấu chấm lớn và văn bản. Khi tôi nhấp vào nút trong Hoạt động A, nó sẽ mở ra Hoạt động B với hình động. Hiệu ứng này cũng có thể được nhìn thấy trong ứng dụng Google Play Store. Nhưng họ cũng áp dụng tiết lộ tròn, hiệu ứng chuyển động vòng cung. Điều quan trọng nhất cần lưu ý ở đây là hình ảnh KHÔNG di chuyển từ vị trí ban đầu đến vị trí cuối cùng. Khung chuyển đổi tính toán cảnh bắt đầu và cảnh kết thúc và sau đó hoạt hình ở giữa các cảnh đó. Để biết làm thế nào hoạt hình làm việc tham khảo này. Ngoài ra với sự trợ giúp của cơ chế mục đích mới, điều này có thể đạt được như dưới đây:

Ở đây, Iveve đã sử dụng kiểm tra API cho kẹo mút và sau đó chạy quá trình chuyển đổi và ở các cấp độ khác, hoạt động sẽ bắt đầu bình thường. Dòng Pair <> mới giúp hệ thống biết về các yếu tố được chia sẻ.

Lưu ý - Giữ tên chuyển tiếp giống nhau ở cả hai chế độ xem (chấm nhỏ và chấm lớn). Điều này giúp hệ thống biết các yếu tố được chia sẻ. Một điều tốt là đặt tên chuyển tiếp trong chuỗi XML.

Ở đây, tôi đã sử dụng quá trình chuyển đổi custom_animation.xml cho quá trình chuyển đổi hoạt động là một hiệu ứng bùng nổ. Hơn nữa, tôi đã loại trừ một số lượt xem để tham gia vào hoạt hình. Các khung nhìn này là statusBar và thanh công cụ. Chúng tôi có thể sử dụng các loại hiệu ứng khác nhau (fade, slide) để phù hợp với trường hợp sử dụng của chúng tôi.

Chuyển đổi hoạt động - API cấp 21 giới thiệu các chuyển đổi hoạt động thân thiện và thực tế hơn với người dùng. Chẳng hạn, các chuyển đổi Explode, ChangeImageTransform xuất hiện thực tế hơn và hướng dẫn tốt hơn cho người dùng luồng hoạt động. Trong ví dụ của chúng tôi ở trên, tôi đã sử dụng chuyển tiếp mờ dần được cung cấp bởi hệ thống Android. Nếu chúng tôi không chỉ định bất kỳ hình ảnh động nào, thì theo mặc định AutoTransition sẽ được sử dụng. Chúng ta có thể tạo chuyển tiếp của riêng mình bằng cách tạo một lớp tùy chỉnh mở rộng Chuyển đổi. Xem cái này để tham khảo.

Tiết lộ thông tư

Thông tư tiết lộ hiệu lực

Hiệu ứng tiết lộ tròn ở trên được tạo khi nhấp vào FAB:

Cảm ơn đã đọc bài viết. Gợi ý / Sửa chữa / Nhận xét luôn được hoan nghênh. Nếu bạn thích nó, vui lòng nhấn nút thích và chia sẻ bài viết với cộng đồng Android. Hãy để chia sẻ kiến ​​thức càng nhiều càng tốt.

Ngoài ra, hãy để Let trở thành bạn bè trên About.me, Twitter, LinkedIn, Github và Facebook.