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

Hãy thừa nhận điều đó, bạn luôn muốn tạo ra các ứng dụng hấp dẫn trực quan. Nhưng do cách tiếp cận chức năng đầu tiên, hình ảnh động luôn bị trì hoãn. Không còn nữa.

Một chút cơ bản về hình ảnh động:

Có 3 loại Ảnh động:

  1. Ảnh động thuộc tính - Chúng được sử dụng để thay đổi thuộc tính của các đối tượng (Khung nhìn hoặc đối tượng không xem). Chúng tôi chỉ định một số thuộc tính nhất định (như translateX, TextScaleX) của các đối tượng để thay đổi. Các đặc điểm khác nhau của hoạt hình có thể được xử lý là thời lượng hoạt hình, có đảo ngược nó hay không và chúng tôi muốn lặp lại hoạt hình bao nhiêu lần, v.v. Chúng được giới thiệu trong Android 3.0 (API cấp 11).
  2. Xem hoạt hình - Chúng được sử dụng để thực hiện các hoạt hình đơn giản như thay đổi kích thước, vị trí, xoay, kiểm soát độ trong suốt. Chúng dễ xây dựng và rất nhanh nhưng có những hạn chế riêng. Ví dụ: - Trạng thái của họ thay đổi nhưng tài sản của họ không thay đổi. Xem hình ảnh động sẽ được trình bày trong phần 2.
  3. Drawable Animations - Điều này được sử dụng để làm hoạt hình bằng cách sử dụng drawables. Một tệp XML chỉ định danh sách các bản vẽ khác nhau được tạo ra được chạy từng cái một giống như một cuộn phim. Cái này không được sử dụng nhiều nên tôi đã giành chiến thắng.
Android 5.0 đã giới thiệu nhiều hình ảnh động khác - Hiệu ứng hiển thị, chuyển tiếp Hoạt động / Đoạn, chuyển tiếp Phần tử được chia sẻ, v.v. Bấm vào đây để tìm hiểu thêm về điều này.
Lưu ý - Phần 1 sẽ chỉ thảo luận về Ảnh động tài sản.

Khi nào nên sử dụng loại Hoạt hình nào?

  1. Nếu bạn chỉ muốn thực hiện các hoạt hình đơn giản trên các chế độ xem mà không phải xử lý các chi tiết khác như chạm hoặc nhấp, hãy sử dụng Xem Ảnh động. Vấn đề với View Animations là, mặc dù trạng thái View thay đổi, thuộc tính của nó vẫn ở vị trí ban đầu. Điều đó có nghĩa là, nếu một ImageButton được di chuyển từ 0 đến 100 pixel sang phải, mặc dù nó sẽ hoạt hình sang phải, cảm ứng (thuộc tính) của nút hình ảnh sẽ vẫn ở vị trí 0.
  2. Xem Ảnh động có thể được sử dụng trong màn hình Splash. Khi sử dụng Xem Ảnh động, hãy sử dụng XML thay vì thực hiện theo chương trình. Sử dụng các tệp XML, nó dễ đọc hơn và có thể được chia sẻ giữa các chế độ xem khác.
  3. Nếu bạn muốn xử lý cảm ứng, nhấp vào sau hình động, hãy vào Thuộc tính Hoạt hình khi chúng thay đổi trạng thái cũng như hành vi.

Khái niệm hoạt hình bất động sản

Bên trong tài sản Hoạt hình. Lịch sự của Google.

Hoạt hình thực tế được thực hiện bởi Value Animator. Lớp này theo dõi thời lượng hoạt hình và giá trị hiện tại của thuộc tính mà nó đang hoạt hình. TimeInterpolater theo dõi về thời gian (tốc độ) của hình ảnh động như là nó có tốc độ không đổi trong thời gian nhất định hay tăng tốc sau đó giảm tốc trong thời gian nhất định. TypeEvaluator được sử dụng để tính toán các phân số dựa trên loại TypeEvalutor được sử dụng cho ví dụ: int, float, rgb, v.v. Chúng tôi cũng có thể sử dụng TypeEvaluator tùy chỉnh nếu không phù hợp với nhu cầu của chúng tôi.

Ảnh động sử dụng ValueAnimator

Lớp ValueAnimator cho phép bạn làm động các giá trị của một số loại trong suốt thời gian của hoạt hình bằng cách chỉ định một tập hợp các giá trị int, float hoặc color để tạo hiệu ứng thông qua. Bạn có được ValueAnimator bằng cách gọi một trong các phương thức xuất xưởng của nó: ofInt (), ofFloat () hoặc ofObject (). Ví dụ:

TextView cuối cùng animateTextView = (TextView) findViewById (R.id.tv_animate);

ValueAnimator valueAnimator = ValueAnimator.ofFloat (0f, 500f);
valueAnimator.setInterpolator (new AccelerateDecelerateInterpolator ()); // tăng tốc độ trước rồi mới giảm
valueAnimator.setDuration (2000);
valueAnimator.addUpdateListener (new ValueAnimator.AnimatorUpdateListener () {
    @Ghi đè
    khoảng trống công khai trênAnimationUpdate (hoạt hình ValueAnimator) {
        float tiến trình = (float) animation.getAnimatedValue ();
        animateTextView.setTranslationY (tiến trình);
        // không cần sử dụng không hợp lệ () vì nó đã có trong // chế độ xem văn bản.
    }
});
valueAnimator.start ();
Phép lịch sự của Giphy

Điều tương tự có thể đạt được bằng cách sử dụng mã XML như sau:

                   /res/animator/value_animator_ex.xml

                     ---- Mã hoạt động ----
ValueAnimator valueAnimator = (ValueAnimator) AnimatorInflater.loadAnimator (
        này, R.animator.value_animator_ex);

valueAnimator.addUpdateListener (new ValueAnimator.AnimatorUpdateListener () {
    @Ghi đè
    khoảng trống công khai trênAnimationUpdate (hoạt hình ValueAnimator) {
        float tiến trình = (float) animation.getAnimatedValue ();
        animateTextView.setTranslationY (tiến trình);
    }
});

valueAnimator.start ();

Ảnh động sử dụng ObjectAnimator

ObjectAnimator là một lớp con của ValueAnimator và kết hợp công cụ tính thời gian và tính toán giá trị của ValueAnimator với khả năng làm động một thuộc tính có tên của một đối tượng đích. Điều này làm cho hoạt hình bất kỳ đối tượng nào dễ dàng hơn nhiều, vì bạn không còn cần phải thực hiện ValueAnimator.AnimatorUpdateListener, vì thuộc tính hoạt hình cập nhật tự động. Trong hầu hết các trường hợp, chúng ta nên sử dụng điều này.

Đối với hoạt hình tương tự ở trên, chúng ta có thể viết mã cho ObjectAnimator là:

TextView animateTextView = (TextView) findViewById (R.id.tv_animate);

ObjectAnimator textViewAnimator = ObjectAnimator.ofFloat (animateTextView, "dịchY", 0f, 500f);
textViewAnimator.setDuration (2000);
textViewAnimator.setInterpolator (new AccelerateDecelerateInterpolator ());
textViewAnimator.start ();

Như chúng ta có thể thấy, chúng tôi đã phải sử dụng trình nghe để cập nhật vị trí của chế độ xem văn bản vì điều này được thực hiện bởi chính ObjectAnimator. Điều chính ở đây để xem là dịch thuật Dịch thuật, đó là tài sản chúng tôi muốn thực hiện hoạt hình. Đây phải là một thuộc tính được xác định trong Android hoặc nếu đó là thuộc tính của riêng chúng ta thì chúng ta phải chỉ định các phương thức truy cập của nó, tức là phương thức getter và setter.

Điều tương tự có thể được thực hiện bằng cách sử dụng XML như:

                /res/animator/object_animator_ex.xml

                        ---- Mã hoạt động ----

TextView animateTextView = (TextView) findViewById (R.id.tv_animate);

ObjectAnimator textViewAnimator = (ObjectAnimator) AnimatorInflater.loadAnimator (AnimationActivity.this, R.animator.object_animator_ex);
textViewAnimator.setTarget (animateTextView);
textViewAnimator.start ();

Làm nhiều ảnh động cùng một lúc

Chúng ta có thể có nhiều ObjectAnimators bắt đầu cùng một lúc và trong cùng một khoảng thời gian để thực hiện nhiều hoạt ảnh, nhưng nó không hiệu quả vì không có chế độ xem nào biết về bất kỳ chế độ xem nào khác. Để làm như vậy, chúng ta có thể sử dụng lớp Animatorset.

Trong dự án hiện tại của tôi, tôi đã thực hiện các hoạt hình sau:

(Sẽ được cập nhật sớm. Xin lỗi vì sự bất tiện này.)

Như chúng ta có thể thấy, có nhiều hình ảnh động chạy cùng một lúc. Có 4 hình ảnh động đồng thời đang diễn ra. Khi nhấp vào biểu tượng tìm kiếm, đầu tiên biểu tượng tìm kiếm sẽ di chuyển sang bên trái, logo bị mờ dần, nút hủy đang mờ dần và chỉnh sửa văn bản cũng mờ dần. Khi nhấp vào nút hủy, hoạt hình tương tự được phát nhưng ngược lại.

Mã để làm điều này là:

   --------- thực hiện hoạt hình trên biểu tượng tìm kiếm, nhấp ----------
// đưa đến vị trí ngoài cùng bên trái
DisplayMetrics displayMetrics = getResource (). GetDisplayMetrics ();
int modifierX = - (displayMetrics. thongPixels - v.getWidth ());
riêng tư tĩnh cuối cùng SEARCH_ANIMATION_DURATION = 1000; // 1 giây
ObjectAnimator searchIconLeftAnimation = ObjectAnimator.ofFloat (v, "dịchX", modifierX);
searchIconLeftAnimation.setDuration (SEARCH_ANIMATION_DURATION);

Logo ObjectimimatorFadeOutAnimator = ObjectAnimator.ofFloat (mAppLogo, "alpha", 1f, 0f);
logoFadeOutAnimator.setDuration (SEARCH_ANIMATION_DURATION);

ObjectAnimator CancImageFadeInAnimator = ObjectAnimator.ofFloat (mIv HủySearch, "alpha", 0f, 1f);
hủyImageFadeInAnimator.setDuration (SEARCH_ANIMATION_DURATION);

ObjectAnimator searchEditTextAnimator = ObjectAnimator.ofFloat (mEtSearch, "alpha", 0f, 1f);
tìm kiếmEditTextAnimator.setDuration (SEARCH_ANIMATION_DURATION);

Animatorset animatorset = new Animatorset ();
animatorset.play (searchIconLeftAnimation) .with (logoFadeOutAnimator);
animatorset.play (searchIconLeftAnimation) .with (CancImageFadeInAnimator);
animatorset.play (searchIconLeftAnimation) .with (searchEditTextAnimator);

hoạt hình Set.start ();
   --------- đảo ngược tất cả các hình ảnh động khi hủy bấm ----------
ObjectAnimator searchIconRightAnimation = ObjectAnimator.ofFloat (mIvSearch, "dịchX", 0);
searchIconRightAnimation.setDuration (SEARCH_ANIMATION_DURATION);

Logo ObjectimimatorFadeInAnimator = ObjectAnimator.ofFloat (mAppLogo, "alpha", 0f, 1f);
logoFadeInAnimator.setDuration (SEARCH_ANIMATION_DURATION);

ObjectAnimator CancImageFadeOutAnimator = ObjectAnimator.ofFloat (mIv HủySearch, "alpha", 1f, 0f);
hủyImageFadeOutAnimator.setDuration (SEARCH_ANIMATION_DURATION);

ObjectAnimator searchEditTextFadeInAnimator = ObjectAnimator.ofFloat (mEtSearch, "alpha", 1f, 0f);
tìm kiếmEditTextFadeInAnimator.setDuration (SEARCH_ANIMATION_DURATION);

Animatorset animatorset = new Animatorset ();
animatorset.play (searchIconRightAnimation) .with (logoFadeInAnimator);
animatorset.play (searchIconRightAnimation) .with (CancImageFadeOutAnimator);
animatorset.play (searchIconRightAnimation) .with (searchEditTextFadeInAnimator);

hoạt hình Set.start ();

Ở đây, chúng tôi đã tạo ra nhiều Object Animators trên các khung nhìn khác nhau và chơi chúng với nhau bằng Animatorset. Các phương thức như play () và with () giúp đạt được điều này.

Chúng tôi cũng có thể sử dụng trình nghe để xác định về trạng thái hoạt hình. Ví dụ:

animatorset.addListener (Animator mới.AnimatorListener () {
    @Ghi đè
    khoảng trống công khai trênAnimationStart (Hoạt hình hoạt hình) {
        // làm bất cứ điều gì trước khi bắt đầu hoạt hình
    }

    @Ghi đè
    khoảng trống công khai trênAnimationEnd (Hoạt hình hoạt hình) {
       // làm những thứ khác sau khi hoạt hình kết thúc
    }

    @Ghi đè
    khoảng trống công khai trênAnimation Hủy (Hoạt hình hoạt hình) {
      // làm gì đó khi hoạt ảnh bị hủy (bởi người dùng / nhà phát triển)
    }

    @Ghi đè
    khoảng trống công khai trênAnimationRepeat (Hoạt hình hoạt hình) {
       // làm gì đó khi hoạt hình đang lặp lại
    }
});

Khi thực hiện nhiều hình động trên một chế độ xem

Cho đến bây giờ, chúng ta đã thấy hình ảnh động trên các đối tượng xem khác nhau. Chúng ta cũng có thể thực hiện nhiều hình động trên một chế độ xem bằng cách sử dụng các cách tiếp cận ở trên (sử dụng bộ hoạt hình), nhưng đó là chi phí hiệu năng vì có chi phí xử lý khi thiết lập Animatorset và chạy song song hai Animators. Cách tiếp cận tốt hơn là sử dụng ViewPropertyAnimator. Sử dụng này, mã đơn giản hơn để đọc cũng. Ví dụ:

animateTextView.animate (). rotation (360f) .y (500f) .setDuration (2000);
     ---------------------------- VS --------------------- --------
ObjectAnimator rotationAnimator = ObjectAnimator.ofFloat (animateTextView, "rotation", 360f);
rotationAnimator.setDuration (2000);
ObjectAnimator translateAnimator = ObjectAnimator.ofFloat (animateTextView, "dịchY", 500f);
dịchAnimator.setDuration (2000);
Animatorset set = new Animatorset ();
set.playTogether (rotationAnimator, translateAnimator);
set.start ();

Là hoạt hình làm cho ứng dụng của tôi chậm hoặc nó sẽ vượt qua thời gian cửa sổ vẽ 16ms? Có bất kỳ chi phí nào cho hiệu suất không?

Các hoạt hình cập nhật giao diện người dùng gây ra công việc kết xuất bổ sung cho mọi khung hình trong đó hoạt hình chạy. Vì lý do này, việc sử dụng các hình ảnh động chuyên sâu về tài nguyên có thể ảnh hưởng tiêu cực đến hiệu suất của ứng dụng của bạn.

Công việc cần thiết để tạo hiệu ứng giao diện người dùng của bạn được thêm vào giai đoạn hoạt hình của đường ống kết xuất. Bạn có thể tìm hiểu xem hoạt hình của mình có ảnh hưởng đến hiệu suất của ứng dụng hay không bằng cách bật Kết xuất GPU hồ sơ và theo dõi giai đoạn hoạt hình.

Hãy suy nghĩ về trường hợp sử dụng và sau đó áp dụng cách thích hợp.

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.

Lưu ý - Phần 2 trên ViewAnimations cũng sẽ sớm ra mắt.

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