Thêm hoạt ảnh dựa trên vật lý vào ứng dụng Android. Tạo hoạt ảnh chuyển tiếp giữa Hoạt động trong Android

Trong bài viết này, chúng ta sẽ xem xét cách tạo hoạt ảnh cho các thành phần giao diện trong Android. Dưới các thành phần giao diện trong trong trường hợp nàyđiều này có nghĩa là tất cả các hậu duệ của lớp View (có thể tìm thấy danh sách đầy đủ các hậu duệ trong tài liệu của lớp View). Hoạt ảnh là một cách dễ dàng để làm cho ứng dụng trở nên sinh động hơn :)

1. Hãy bắt đầu bằng cách tạo một trang web thử nghiệm. Hãy tạo một ứng dụng đơn giản với một nút bấm và một hình ảnh ở giữa màn hình. Tôi sẽ không cung cấp mã, rất đơn giản, nếu có, hãy xem nguồn (chúng ở cuối bài viết).

2. Trong thư mục /res/anim, tạo tệp anim.xml và ghi vào đó
< set xmlns:android=" http : // schemas.android.com /apk/res/android " android:shareInterpolator=" false " > < alpha android:fromAlpha=" 0.0 " android:toAlpha=" 1.0 " android:duration=" 1000 " />
Đây là mô tả hoạt ảnh mà chúng tôi sẽ áp dụng cho hình ảnh của mình. Chúng tôi sẽ xem xét những gì đang xảy ra ở đây một cách chi tiết hơn bên dưới, nhưng hiện tại chúng tôi sẽ chỉ sao chép nó vào một tệp.

3. Để tải một hình ảnh động từ tập tin xmlđã sử dụng phương pháp tĩnh lớp Hoạt hìnhUtils
LoadAnimation(Ngữ cảnh, int id), Ở đâu bối cảnh là bối cảnh hiện tại, và nhận dạng- mã định danh tài nguyên có hình ảnh động. Phương thức này trả về một thể hiện của lớp Hoạt hình.
Hoạt hình - một lớp trừu tượng để thể hiện hoạt ảnh trong một ứng dụng.
Để áp dụng nó, thể hiện kết quả của lớp Hoạt hình được truyền cho phương thức
startAnimation(Hoạt hình hoạt hình) Chế độ xem lớp (và tất cả con cháu của nó).

4. Hãy ghi vào tệp AnimationTestActivity.java:
lớp công khai AnimationTestActivity mở rộng Hoạt động ( Hình ảnh ImageView; Nút nút; Hoạt hình; @Override protected void onCreate(Bundle SavedInstanceState) ( super .onCreate(savedInstanceState); setContentView(R.layout.main); image = (ImageView)findViewById(R. id.image); nút = (Button )findViewById(R.id.button); anim = AnimationUtils.loadAnimation(this , R.anim.anim); // 1 nút.setOnClickListener(new OnClickListener() ( @Override public void onClick(Xem v) ( image.startAnimation(anim); //2 ) )); ) )
1) Đọc tệp có mã định danh R.anim.anim (tương ứng với tệp /res/anim/anim.xml) và lấy một phiên bản của lớp Hoạt hình.
2) Bằng cách nhấp vào nút, chúng tôi áp dụng hoạt ảnh cho hình ảnh.

5. Bạn có thể chạy ứng dụng của chúng tôi. Khi bạn nhấn nút, hình ảnh sẽ biến mất và sau đó bắt đầu xuất hiện trở lại từ từ.

6. Bây giờ chúng ta hãy xem xét kỹ hơn cách tạo hoạt ảnh trong tệp xml.
Có 4 loại hoạt hình:

• alpha(minh bạch, rõ ràng)


• tỉ lệ(chia tỷ lệ)


• quay(xoay)


• dịch(di chuyển)

Để tạo hoạt ảnh, chúng ta phải mô tả trạng thái ban đầu và trạng thái cuối cùng của đối tượng và chính hệ thống sẽ quyết định cách chuyển từ trạng thái này sang trạng thái khác. Trong ví dụ của chúng tôi
< alpha android:fromAlpha=" 0.0 " android:toAlpha=" 1.0 " android:duration=" 1000 " />
chúng tôi mô tả hoạt ảnh alpha, nghĩa là chúng tôi thay đổi mức độ hiển thị của đối tượng. Đặt trạng thái ban đầu từAlpha="0.0"(hoàn toàn vô hình) và hữu hạn toAlpha="1.0"(có thể nhìn thấy đầy đủ). Chỉ định thời lượng của hoạt ảnh thời lượng="1000"(tính bằng mili giây). Và mọi thứ khác, đó là cách thay đổi mức độ hiển thị của một đối tượng để biến nó từ vô hình sang hiển thị trong một giây, hệ thống sẽ tự thực hiện. Điều này được tính bằng cách sử dụng phép nội suy- trong toán học tính toán, một phương pháp tìm giá trị trung gian của một đại lượng từ một tập hợp giá trị rời rạc hiện có. Đối với mỗi hoạt ảnh, bạn có thể đặt bộ nội suy
-Bộ nội suy tăng tốcGiảm tốc(@android:anim/accelerate_decelerate_int erpolator) - tốc độ thay đổi thấp ở đầu và cuối và tăng tốc ở giữa

-Bộ nội suy tăng tốc(@android:anim/accelerate_interpolator) - tốc độ thay đổi bắt đầu ở mức thấp và sau đó tăng tốc

-Dự đoánInterpolator(@android:anim/anticipate_interpolator) - thay đổi bắt đầu lúc mặt trái rồi nhanh chóng tiến về phía trước

-Dự đoánOvershootInterpolator(@android:anim/anticipate_overshoot_inte rpolator) - các thay đổi bắt đầu theo hướng ngược lại, sau đó nhanh chóng di chuyển về phía trước và bay lên trên giá trị cuối cùng, sau đó quay trở lại giá trị cuối cùng

-Bộ nội suy trả lại(@android:anim/bounce_interpolator) - tốc độ thay đổi tăng vào cuối

-Chu kỳInterpolator(@android:anim/cycle_interpolator) - lặp lại hoạt ảnh một số lần nhất định. Tốc độ thay đổi theo hình sin

-Bộ suy giảm tốc độ(@android:anim/decelerate_interpolator) - tốc độ thay đổi giảm dần ở cuối

-Bộ nội suy tuyến tính(@android:anim/Linear_interpolator) - tốc độ thay đổi không đổi

-OvershootInterpolator(@android:anim/overshoot_interpolator) - các thay đổi nhảy về phía trước và vượt lên trên giá trị cuối cùng, sau đó quay lại giá trị cuối cùng

Bộ nội suy được đặt bằng thuộc tính android:interpolator. Ví dụ
android:interpolator="@android:anim/cycl e_interpolator". Giá trị mặc định là LinearInterpolator.

7. Mô tả trạng thái ban đầu và cuối cùng
1) alpha (tính minh bạch, khả năng hiển thị)
- android: fromAlpha- giá trị minh bạch ban đầu. 0,0 - hoàn toàn trong suốt (vô hình), 1,0 - hoàn toàn mờ đục (hiển thị)
- android:toAlpha - giá trị cuối cùng minh bạch

2) tỉ lệ
- android: fromXScale- giá trị tỷ lệ ban đầu dọc theo trục X (trong đó kích thước hiện tại tương ứng với giá trị 1.0)
- android:toXScale- giá trị tỷ lệ cuối cùng dọc theo trục X
- android:fromYScale- giá trị tỷ lệ ban đầu dọc theo trục Y (trong đó kích thước hiện tại tương ứng với giá trị 1.0)
- android:toYScale- giá trị tỷ lệ cuối cùng dọc theo trục Y
- android:pivotX- tọa độ x của điểm, sẽ không thay đổi sau khi chia tỷ lệ
- android:pivotY- tọa độ y của điểm, sẽ không thay đổi sau khi chia tỷ lệ

Các giá trị có thể có cho PivotX và PivotY:
tính bằng pixel so với cạnh trái (hoặc trên cùng đối với tọa độ Y) của phần tử (ví dụ: "5")
dưới dạng phần trăm so với cạnh trái (trên cùng) (ví dụ: "5%")
theo tỷ lệ phần trăm so với cạnh trái (trên cùng) phần tử cha(ví dụ "5%p")

Ví dụ: nếu PivotX=0, PivotY=0 (tương ứng với góc trên cùng bên trái của phần tử), thì tỷ lệ sẽ thay đổi kích thước phần tử xuống và sang phải. Nếu PivotX=50%, PivotY=50% thì điểm nằm ở giữa phần tử và kích thước thay đổi theo mọi hướng, trong khi tâm sẽ vẫn ở một điểm.

3) xoay (xoay)
- android:fromDegrees - Giá trị ban đầu góc quay (tính bằng độ, có thể có giá trị âm)
- android: toDegrees- giá trị cuối cùng của góc quay
- android:pivotX- tọa độ x tâm quay.
- android:pivotY- tọa độ y của tâm quay.
Các giá trị có thể có của PivotX và PivotY như trong ảnh động tỷ lệ

4) dịch (di chuyển)
- android:fromXDelta- tọa độ x của điểm bắt đầu chuyển động. Những giá trị khả thi:
tính bằng pixel so với vị trí ban đầu (ví dụ: “5”)
dưới dạng phần trăm so với chiều rộng của phần tử (ví dụ: “5%”)
dưới dạng phần trăm so với chiều rộng của phần tử gốc (ví dụ: "5%p")
- android: toXDelta- tọa độ x điểm cuối của bước di chuyển
- android: fromYDelta- tọa độ y của điểm bắt đầu chuyển động
- android:toYDelta- tọa độ y của điểm cuối của chuyển động

8. Tùy chọn bổ sung
Ngoài ra còn có các thuộc tính chung cho cả bốn loại hoạt ảnh, trong đó hữu ích nhất là:
- android: thời lượng- thời lượng hoạt ảnh (tính bằng mili giây)
- android: bộ nội suy- xác định bộ nội suy cho hoạt ảnh
- android:repeatCount- số lần lặp lại hoạt ảnh bổ sung. Chính xác là những cái bổ sung, nghĩa là hoạt ảnh sẽ được thực thi một lần. Giá trị mặc định là "0" - điều này có nghĩa là hoạt ảnh sẽ chỉ được thực thi một lần. Giá trị "1" có nghĩa là hoạt ảnh sẽ chạy hai lần (một lần là hoạt ảnh chính và một lần là hoạt ảnh phụ). Giá trị “-1” hoặc “vô hạn” có nghĩa là sự lặp lại vô tận.
- android: Chế độ lặp lại- xác định hành vi của hoạt ảnh khi nó kết thúc và tham số số lần lặp lại không bằng 0. Có hai giá trị: “khởi động lại” - hoạt ảnh bắt đầu lại và “đảo ngược” - hoạt ảnh sẽ đi theo thứ tự ngược lại .
- android:startOffset- độ trễ trước khi hoạt ảnh bắt đầu (tính bằng mili giây)

9. Kết hợp nhiều ảnh động
Bạn có thể áp dụng nhiều loại hoạt ảnh cho một phần tử cùng một lúc. Ví dụ: nếu chúng ta viết:
< set xmlns:android=" http : // schemas.android.com /apk/res/android " > < alpha android:fromAlpha=" 0.0 " android:toAlpha=" 1.0 " android:duration=" 1000 " /> < rotate android:fromDegrees=" 0 " android:toDegrees=" 360 " android:pivotX=" 50% " android:pivotY=" 50% " android:duration=" 1000 " />
Hình ảnh sẽ thay đổi độ trong suốt trong 1 giây (từ trong suốt hoàn toàn sang mờ đục) và đồng thời xoay 360 độ.

Hoạt ảnh có thể được đặt thành các khoảng thời gian khác nhau, ví dụ: hãy đặt thời lượng=5000để xoay hình ảnh động. Bây giờ hình ảnh sẽ xoay chậm hơn nhiều và độ trong suốt vẫn sẽ thay đổi sau một giây.

Bằng cách sử dụng bắt đầuOffset, bạn có thể tạo hoạt ảnh theo trình tự. Thêm thuộc tính xoay bắt đầuOffset="1000"(nghĩa là chúng ta sẽ tạo độ trễ bằng thời lượng của hoạt ảnh đầu tiên). Bây giờ, hình ảnh đầu tiên sẽ hiển thị sau 1 giây và sau đó chỉ xoay 360 độ.

Một số hoạt ảnh có thể được kết hợp thành bộ bằng cách sử dụng thẻ. Một thẻ như vậy sẽ luôn có trong tệp và là thẻ gốc. Bạn có thể đặt các thuộc tính sau cho một bộ:
- khoảng thời gian(khoảng thời gian), Lặp lại các chế độ(chế độ lặp lại) - các thuộc tính này sẽ được áp dụng cho từng hoạt ảnh trong bộ
- bộ nội suy- xác định bộ nội suy hoạt ảnh và chia sẻInterpolator- liệu bộ nội suy này có được áp dụng cho từng hoạt ảnh trong bộ hay không (các giá trị có thể là “true” và “false”)
- bắt đầuOffset(độ trễ) - độ trễ cho toàn bộ bộ hoạt ảnh.
Thật không may, thuộc tính không thể được áp dụng cho tập hợp lặp lạiĐếm, nghĩa là, việc lặp lại một tập hợp hoạt ảnh nhiều lần sẽ không hiệu quả.
Các bộ có thể là bất kỳ sự lồng nhau nào.

10. Tạo ảnh động không cần xml
Hoạt ảnh có thể được tạo mà không cần sử dụng xml, trực tiếp trong mã chương trình. Đối với điều này, các lớp con cháu Animation được sử dụng:
1) AlphaAnimation để tạo hoạt ảnh alpha. Trình xây dựng lớp trông giống như
AlphaAnimation(float từ Alpha, float tới Alpha) trong đó fromAlpha và toAlpha lần lượt là giá trị độ trong suốt ban đầu và cuối cùng (từ 0,0 đến 1,0)

11. Hãy tạo một hình ảnh động trong mã mà khi bạn nhấn nút, hình ảnh sẽ xoay hình ảnh theo một góc ngẫu nhiên (từ 0 đến 360) và phóng to nó lên kích thước ngẫu nhiên (không quá hai lần). Với mục đích này tôi đã thêm một nút khác RandomButton
RandomButton.setOnClickListener(new OnClickListener() ( @Override public void onClick(View v) ( Random Random = new Random (); //1 RotateAnimation xoay = new RotateAnimation (0, (float )random.nextInt(360), Animation. RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); //2 xoay.setDuration(1000); //3 xoay.setRepeatMode(Animation.REVERSE); //4 xoay.setRepeatCount(1); //5 thời lượng dài = xoay.computeDurationHint(); //6 kích thước float = Random.nextFloat() + 1.0; //7 Tỷ lệ quy mô hoạt hình = quy mô mới (1.0f, kích thước, 1.0f, kích thước, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF , 0.5f); //8 thang đo.setDuration(1000); thang đo.setStartOffset(thời lượng); //9 AnimationSet set = new AnimationSet (false); //10 set.addAnimation(rotate); //11 set.addAnimation (tỷ lệ); image.startAnimation(set); //12 ) ));
1) Tạo đối tượng Random để tạo số ngẫu nhiên. Bạn có thể đọc thêm về Random trong tài liệu; bây giờ chúng ta quan tâm đến các phương thức int nextInt(int n) - tạo ra một số nguyên trong phạm vi từ 0 đến n. Và phương thức float nextFloat() đang tạo ra số thực từ 0 đến 1.
2) Tạo hoạt ảnh xoay. Góc đầu = 0, góc cuối = số ngẫu nhiên từ 0 đến 360. Animation.RELATIVE_TO_SELF có nghĩa là chúng ta sẽ biểu thị điểm tâm xoay theo tỷ lệ phần trăm so với chiều rộng của phần tử. Đừng quên rằng giá trị 1.0 tương ứng với 100%, nghĩa là 0,5f là 50%. Điều này có nghĩa là tâm điểm xoay sẽ ở giữa bức ảnh.
3) Đặt thời lượng hoạt ảnh thành 1000 mili giây (đây là 1 giây)
4) Chúng ta xác định chế độ lặp lại là Animation.REVERSE, tức là khi lặp lại ảnh động chúng ta sẽ đi theo thứ tự ngược lại.
5) Đặt số lần lặp lại bổ sung = 1. Điều này có nghĩa là hoạt ảnh sẽ được lặp lại hai lần, một lần theo thứ tự thuận và một lần ngược lại.
6) Phương thức tính toánDurationHint() dài tính toán tổng thời gian hoạt ảnh sẽ kéo dài. Có một phương thức getDuration() nhưng nó chỉ trả về giá trị thời lượng mà chúng ta đặt bằng phương thức setDuration(). Trong trường hợp của chúng tôi, chúng tôi đặt giá trị thời lượng thành 1000 và phương thức getDuration() sẽ trả về 1000 và sẽ không tính đến việc hoạt ảnh sẽ lặp lại hai lần, có nghĩa là nó thực sự sẽ kéo dài 2000 mili giây. Phương thức tính toánDurationHint() sẽ tính toán thời lượng có tính đến số lần thử lại và độ trễ.
7) Chúng tôi tính toán kích thước mới Những bức ảnh. Giá trị 1.0 là tỷ lệ hình ảnh hiện tại, vì vậy giá trị 2.0 có nghĩa là hình ảnh được nhân đôi. Chúng tôi tạo một số từ 0,0 đến 1,0 và thêm 1, có nghĩa là chúng tôi nhận được một số từ 1,0 đến 2,0
8) Tạo hoạt ảnh chia tỷ lệ từ kích thước hình ảnh hiện tại thành số được tạo ngẫu nhiên từ 1,0 đến 2,0
9) Đặt độ trễ bằng tổng thời lượng của hoạt ảnh xoay. Để hoạt ảnh thứ hai bắt đầu ngay sau khi kết thúc hoạt ảnh đầu tiên
10) Tạo một bộ ảnh động.
11) Thêm hai hình động đã tạo vào bộ
12) Áp dụng một bộ hoạt ảnh cho ảnh

12. Một phương thức thú vị khác của lớp Animation
setAnimationListener(Trình nghe Animation.AnimationListener)- đặt trình lắng nghe để thay đổi trạng thái hoạt ảnh. Giao diện Animation.AnimationListener xác định các phương thức sau:
onAnimationStart (Hoạt hình hoạt hình)- được gọi khi hoạt ảnh bắt đầu
onAnimationRestart (Hoạt hình hoạt hình)- được gọi khi hoạt ảnh lặp lại
onAnimationEnd(Hoạt hình hoạt hình)- được gọi ở cuối hoạt ảnh

Ví dụ:
hoạt hình = AnimationUtils.loadAnimation(this, R.anim.anim); anim.setAnimationListener(new AnimationListener () ( @Override public void onAnimationEnd(Animation animation) ( Log.d("MY" , "animation end" ); ) @Override public void onAnimationRepeat(Animation animation) ( Log.d("MY " , "lặp lại hoạt ảnh"); ) @Override public void onAnimationStart(Hoạt hình hoạt hình) ( Log.d("MY" , "bắt đầu hoạt hình" ); ) ));
Chúng tôi không làm gì hữu ích khi thay đổi trạng thái hoạt ảnh, chúng tôi chỉ ghi nó vào nhật ký.

Đó là tất cả. Tôi đã nói với bạn những điều cơ bản, phần còn lại tốt hơn nên học thông qua thử nghiệm :)

Nguồn có thể được tải về ở đây

Tại ribot, chúng tôi quan tâm đến việc tạo ra những trải nghiệm đẹp đẽ và ý nghĩa cho mọi người, trong đó chuyển động đóng vai trò quan trọng.

Sau khi chứng kiến ​​buổi nói chuyện đầy cảm hứng tại Droidcon London, tôi quyết định tìm hiểu sâu hơn về các yếu tố chuyển động của Android. Với ý nghĩ đó, tôi đã tổng hợp tất cả những phát hiện của mình để giúp các nhà phát triển và nhà thiết kế biết việc thêm chuyển động đẹp mắt vào ứng dụng Android dễ dàng như thế nào.

Nếu bạn muốn thử tự mình tạo những hoạt ảnh này thì mỗi ví dụ này đều được đóng gói trong ứng dụng Android trên Github.

Tôi thích chuyển động, nó không chỉ làm tăng sự tương tác mà còn khiến mọi người chú ý ngay lập tức. Hãy suy nghĩ về các ứng dụng bạn sử dụng và đồ họa chuyển động, đặc biệt là chúng trông đẹp, dễ sử dụng, miễn phí và tự nhiên như thế nào.

Falcon Pro: Ngay cả những chuyển động tinh tế cũng có thể tạo ra sự khác biệt lớn trong trải nghiệm người dùng

Bây giờ hãy so sánh chúng với những ứng dụng bạn yêu thích nhưng không gợi lên cảm xúc tương tự.

Medium: Mặc dù tôi yêu thích ứng dụng Medium nhưng nó thực sự thiếu sự chuyển động trong các lĩnh vực mà nó xứng đáng có được.

Đó là tất cả trong các chi tiết

Chúng ta có thể sử dụng các hiệu ứng chuyển động này theo nhiều cách khác nhau:

• Chuyển người dùng thông qua ngữ cảnh điều hướng
• Tăng cường hệ thống phân cấp cơ bản
• Giải thích sự thay đổi giữa các thành phần hiển thị trên màn hình

Mục đích của bài viết này là để cho bạn thấy việc triển khai chuyển động trong ứng dụng của bạn dễ dàng như thế nào, nơi nó có thể mang lại những lợi ích đáng kể - vì vậy hãy bắt đầu.

Phản hồi chạm

Bảo vệ nhận xét, khi người dùng chạm vào màn hình, giúp giao tiếp theo cách trực quan để tương tác xảy ra. Những hoạt ảnh này không được làm người dùng mất tập trung nhưng phải mang lại sự thú vị, rõ ràng và khuyến khích người dùng khám phá thêm.

Khung Android cung cấp trạng thái gợn sóng cho lớp phản hồi này, lớp này có thể được sử dụng để đặt nền của hoạt ảnh thành một trong các mục sau:

Android:attr/selectableItemBackground - Hiển thị hiệu ứng gợn sóng trong ranh giới của hình ảnh.

Xung bắt đầu tại điểm tiếp xúc, lấp đầy nền của hình ảnh được trình bày

?android:attr/selectableItemBackgroundBorderless- Hiển thị hiệu ứng rung động vượt ra ngoài ranh giới của hình ảnh được trình bày.

Hiệu ứng rung hình tròn bắt đầu tại điểm tiếp xúc, lấp đầy bán kính ngoài hình ảnh được trình bày

Xem thuộc tính Animator

View Property Animator được giới thiệu ở API cấp 12, cho phép bạn thực hiện các thao tác hoạt ảnh (song song) một cách đơn giản và hiệu quả trên một số thuộc tính hình ảnh bằng cách sử dụng một phiên bản Animator duy nhất.

Ở đây tôi đang tạo hoạt ảnh trên tất cả các thuộc tính được trình bày bên dưới.

alpha() - Đặt giá trị alpha để tạo hình động
ScalX() & ScalY() - Cân bằng chế độ xem trên trục X và/hoặc Y của nó
TranslationZ() - Dịch chế độ xem trên trục Z của nó
setDuration() - Đặt thời lượng của hoạt ảnh
setStartDelay() - Đặt độ trễ hoạt ảnh
setInterpolator() - Đặt nội suy hoạt ảnh
setListener() - Đặt trình nghe để biết khi nào hoạt ảnh bắt đầu, kết thúc, lặp lại hoặc bị hủy.
Lưu ý: Khi trình nghe đã được đặt thành bức ảnh này và nếu bạn thực hiện các hoạt ảnh khác tại cùng một điểm và không muốn sử dụng chức năng gọi lại này thì bạn phải đặt trình nghe thành NULL.

Điều này cũng đơn giản và gọn gàng để thực hiện theo chương trình:

mButton.animate():

Bản dịchZ(10f)

SetInterpolator(FastOutSlowInInterpolator mới())

SetStartDelay(200)

SetListener(Animator.AnimatorListener mới() (

public void onAnimationStart(Hoạt hình hoạt hình) ( )

public void onAnimationEnd(Hoạt hình hoạt hình) ( )

public void onAnimationCancel(Hoạt hình hoạt hình) ( )

public void onAnimationRepeat(Hoạt hình hoạt hình) ( )

Lưu ý: Chúng ta thực sự không phải gọi start() trên trình tạo hoạt ảnh của mình vì hoạt ảnh sẽ tự động bắt đầu ngay khi chúng ta ngừng khai báo hoạt ảnh cùng một lúc. Nếu đúng như vậy thì hoạt ảnh sẽ không bắt đầu cho đến khi có bản cập nhật tiếp theo từ hàng đợi sự kiện thiết bị giao diện.

Lưu ý: Để tương thích ngược, bạn có thể sử dụng lớp ViewCompat để triển khai ViewPropertyAnimator từ API Android phiên bản 4 trở lên.

Giống như View Property Animator, Object Animator cho phép chúng ta tạo hoạt ảnh cho nhiều thuộc tính khác nhau của hình ảnh mục tiêu (cả về mã và tài nguyên tệp XML). Tuy nhiên, có một vài khác biệt:

Object Animator chỉ cho phép hoạt ảnh tồn tại ở một trạng thái duy nhất cho mỗi phiên bản, ví dụ: thang đo X theo sau là thang đo Y
Tuy nhiên, nó cho phép hoạt ảnh tồn tại ở trạng thái bình thường, chẳng hạn như màu nền trước của hình ảnh.
Sử dụng Thuộc tính hoặc Trạng thái tùy chỉnh để tạo hiệu ứng động cho hình ảnh theo tỷ lệ và thay đổi màu nền trước, chúng ta có thể đạt được những điều sau:

Bằng cách sử dụng Thuộc tính tùy chỉnh, chúng ta có thể tạo một phiên bản của Object Animator bằng cách gọi ObjectAnimator.ofInt() trong đó chúng ta nêu:

Xem - Xem để áp dụng hình ảnh động
Thuộc tính - Thuộc tính cho hoạt ảnh
Màu ban đầu - Màu mà chế độ xem hoạt ảnh bắt đầu.
Màu mục tiêu - Màu mà bức ảnh này phải đi vào cuộc sống
riêng tư void animateForegroundColor(@ColorInt int targetColor cuối cùng) (
Công cụ hoạt hình ObjectAnimator =
ObjectAnimator.ofInt(YOUR_VIEW, FOREGROUND_COLOR, Color.TRANSPARENT, targetColor);
animator.setEvaluator(ArgbEvaluator mới());
animator.setStartDelay(DELAY_COLOR_CHANGE);
hoạt hình.start();
}
Sau đó, chúng tôi đặt bộ đánh giá (chúng tôi sử dụng ArgbEvaluator vì chúng tôi đang thực hiện hoạt ảnh giữa các giá trị màu), đặt độ trễ và bắt đầu() hoạt ảnh.

Chúng tôi khởi tạo ObjectAnimator bằng ofFloat() vì chúng tôi không tạo hiệu ứng động cho các giá trị số nguyên khi làm việc với kích thước hình ảnh
Thay vì thuộc tính tùy chỉnh, chúng tôi sử dụng thuộc tính hình ảnh - cả View.SCALE_X và View. SCALE_Y
khoảng trống riêng tư thay đổi kích thướcView() (
chiều rộng float cuối cùngHeightRatio = (float) getHeight() / (float) getWidth();
thay đổi kích thướcViewProperty(View.SCALE_X, .5f, 200);
thay đổi kích thướcViewProperty(View.SCALE_Y, .5f / widthHeightRatio, 250);
}
khoảng trống riêng tư thay đổi kích thướcViewProperty(Thuộc tính tài sản
mục tiêu nổiScale,
int thời lượngOffset) (
Trình tạo phim hoạt hình ObjectAnimator = ObjectAnimator.ofFloat(this, property, 1f, targetScale);
animator.setInterpolator(LinearOutSlowInInterpolator mới());
animator.setStartDelay(DELAY_COLOR_CHANGE + thời lượngOffset);
hoạt hình.start();
}
Cuối cùng, chúng ta cần tạo hoạt ảnh cho hình ảnh đã được thay đổi kích thước ngoài màn hình của mình. Trong trường hợp này, chúng tôi đang sử dụng AdaptorViewFlipper để điều chỉnh các hình ảnh mà chúng tôi đang tạo hoạt ảnh ngoài màn hình. Sử dụng điều này có nghĩa là chúng ta có thể gọi showNext() trên phiên bản ViewFlipper và nó sẽ tạo hoạt ảnh cho các hình ảnh ngoài màn hình bằng cách sử dụng hoạt ảnh mà chúng ta đã xác định. Sau đó, hình ảnh tiếp theo sẽ tự động hiển thị trên màn hình, đồng thời sử dụng hoạt ảnh đến mà chúng tôi cũng đã xác định.

Bộ nội suy

Bộ nội suy có thể được sử dụng để xác định tốc độ thay đổi của hoạt ảnh, nghĩa là tốc độ, gia tốc và hành vi của hoạt ảnh có thể được thay đổi. Có sẵn một số loại bộ nội suy khác nhau và sự khác biệt giữa một số trong số chúng là rất nhỏ, vì vậy tôi khuyên bạn nên dùng thử chúng trên thiết bị này.

• Không có Bộ nội suy - Chế độ xem trở nên sống động mà không có sự thay đổi về tốc độ thay đổi
• Nhanh chóng - Bên ngoài dây chuyền - Bên trong

Hình ảnh bắt đầu hoạt ảnh và kết thúc bằng chuyển động tuyến tính

• Nhanh - Chậm - Trong

Hình ảnh bắt đầu hoạt ảnh nhanh chóng và chậm dần về cuối

• Tuyến tính - Chậm - Bên trong

Hình ảnh bắt đầu bằng các chuyển động tuyến tính và chậm dần về cuối

• Tăng tốc - Giảm tốc

Hình ảnh bắt đầu tăng tốc khi bắt đầu hoạt ảnh và giảm dần khi kết thúc.

• Tăng tốc - Hình ảnh tăng tốc dần dần cho đến khi hoạt ảnh kết thúc
• Phanh - Hình ảnh chậm dần cho đến khi hoạt ảnh kết thúc
• Dẫn - Hình ảnh bắt đầu bằng cách xoay nhẹ hoạt ảnh được chỉ định trước khi di chuyển theo cách chuẩn
• Dự đoán - Bỏ qua - Tương tự như Lead nhưng chuyển động "kéo lùi" xảy ra trong quá trình hoạt ảnh được cường điệu hơn một chút
• Bộ nội suy nhảy - Hình ảnh trở nên sống động với hiệu ứng "nảy" trước khi về đích
• Bộ nội suy tuyến tính - Hình ảnh trở nên sống động từ đầu đến cuối với chuyển động tuyến tính và mượt mà
• Bỏ qua Interpolator - Hình ảnh “hồi sinh” sự cường điệu giá trị đã cho, rút ​​về giá trị yêu cầu

Hoạt hình tròn

Hoạt ảnh CircleReveal sử dụng một vòng tròn được cắt bớt để hiển thị hoặc ẩn một nhóm phần tử giao diện người dùng. Bên cạnh việc giúp cung cấp tính liên tục về mặt hình ảnh, đây còn là một sự tương tác thú vị để giúp nâng cao hình ảnh với người dùng.

Như được hiển thị ở trên, chúng ta bắt đầu bằng cách sử dụng View Property Animator để ẩn nút Hành động nổi trước khi bắt đầu tạo hoạt ảnh động trước mắt. Việc thiết lập vòng tròn hồi sinh của chúng tôi chỉ yêu cầu xác định một số thuộc tính:

• startView - chế độ xem mà Thông tưReveal sẽ bắt đầu từ (tức là chế độ xem được nén)
• centerX - Tọa độ tâm cho trục X khi nhấn
• centerY- Tọa độ tâm của trục Y khi nhấn
• targetView - Chế độ xem để tạo
• FinalRadius - Bán kính cắt của hình tròn, bằng cạnh huyền của các giá trị của chúng ta - centerX và centerY

int centerX = (startView.getLeft() + startView.getRight()) / 2;
int centerY = (startView.getTop() + startView.getBottom()) / 2;
float FinalRadius = (float) Math.hypot((double) centerX, (double) centerY);
Trình tạo phim hoạt hình mCircularReveal = ViewAnimationUtils.createCircularReveal(
targetView, centerX, centerY, 0, FinalRadius);

Chuyển tiếp cửa sổ

Việc tùy chỉnh các chuyển đổi được sử dụng để điều hướng giữa các giao dịch cho phép kết nối trực quan mạnh mẽ hơn giữa các trạng thái ứng dụng. Theo mặc định, chúng ta có thể định cấu hình các chuyển tiếp sau:

• đầu vào - Xác định cách hình ảnh giao dịch đi vào hiện trường
• exit - Xác định cách hình ảnh giao dịch thoát khỏi cảnh
• nhập lại - Xác định cách giao dịch được nhập lại sau khi thoát trước đó
• các phần tử được chia sẻ - Xác định cách trao đổi hình ảnh chuyển tiếp giữa các giao dịch

Giống như API cấp 21, một số chuyển đổi mới đã xuất hiện và được giới thiệu:

Chuyển tiếp bùng nổ cho phép hình ảnh xuất hiện từ mọi phía của màn hình, tạo ra hiệu ứng bùng nổ khi nhấn vào.

Hiệu ứng bùng nổ hoạt động rất tốt trên bố cục dựa trên lưới.

Hiệu ứng này rất dễ thực hiện - để bắt đầu, bạn cần tạo quá trình chuyển đổi tiếp theo trong thư mục RES res/transition.

android:duration=“300“/>

Tất cả những gì chúng tôi đã làm ở đây:

• Quá trình chuyển đổi bùng nổ được công bố
• Đặt thời lượng thành 300 mili giây

Hoặc theo chương trình:

Chuyển đổi bùng nổ = TransitionInflater.from(this).inflateTransition(R.transition.explode);
getWindow().setEnterTransition(nổ);

Cầu trượt

Chuyển đổi trang trình bày cho phép bạn trượt vào hoặc ra khỏi giao dịch bằng một trong hai bên phải, hoặc từ cuối màn hình. Mặc dù bạn có thể đã đạt được điều này trước đây nhưng quá trình chuyển đổi mới này linh hoạt hơn nhiều.

Chuyển tiếp slide cho phép bạn trượt tuần tự vào các hình ảnh con

Quá trình chuyển đổi này có thể phổ biến khi chuyển đổi giao dịch, tôi đặc biệt thích slide bên phải do trạng thái giống như chất lỏng của nó. Một lần nữa, điều này rất dễ thực hiện:

android:interpolator=“@android:interpolator/decelerate_cubic“
android:slideEdge=“kết thúc“/>

Ở đây chúng tôi:

• Thông báo chuyển tiếp slide
• Đặt slideEdge chuyển tiếp kết thúc ở đó (ở bên phải), để các slide chuyển sang bên phải - slide dưới cùng phải được đặt ở dưới cùng

Mờ dần

Chuyển đổi mờ dần cho phép bạn chuyển đổi sang giao dịch nội bộ hoặc bên ngoài bằng cách sử dụng hiệu ứng mờ dần.

Quá trình chuyển đổi mờ dần rất đơn giản, mặc dù quá trình chuyển đổi mờ dần rất dễ chịu.

Việc tạo nó thậm chí còn dễ dàng hơn so với các chuyển đổi trước đó:

android:duration=“300“/>

Ở đây chúng tôi:

• Chúng tôi thông báo quá trình chuyển đổi mờ dần
• Đặt thời lượng thành 300 mili giây

Tối ưu hóa chuyển đổi

Mặc dù đã thử nghiệm nhưng tôi đã tìm thấy một số phương pháp có thể giúp cải thiện các hiệu ứng chuyển tiếp được đề cập ở trên.

Cho phép chuyển đổi nội dung cửa sổ- bạn phải kích hoạt thuộc tính sau trong các chủ đề kế thừa từ chủ đề vật liệu:

ĐÚNG VẬY

Bật/tắt chuyển tiếp phù hợp- Khi chuyển đổi, có thể có độ trễ khi một hành động chờ một hành động khác hoàn tất quá trình chuyển đổi trước khi hành động đó có thể bắt đầu quá trình chuyển đổi của chính nó. Tùy thuộc vào trường hợp sử dụng, quá trình chuyển đổi nhìn chung sẽ trôi chảy và tự nhiên hơn nếu bạn bật các thuộc tính sau:

ĐÚNG VẬY

Loại trừ hình ảnh khỏi quá trình chuyển đổi- Đôi khi chúng tôi có thể không muốn tạo chuyển tiếp cho tất cả hình ảnh giao dịch của mình. Tôi nhận thấy rằng trong hầu hết các trường hợp, thanh trạng thái và thanh công cụ đều gây ra sự cố chuyển đổi. May mắn thay, chúng tôi có thể loại trừ một số loài nhất định đã được đưa vào quá trình chuyển đổi của chúng tôi:

android:duration=“200“>

Thanh công cụ và thanh hành động- Khi chuyển đổi giữa các thao tác sử dụng Action Bar sang sử dụng Toolbar (và ngược lại), đôi khi tôi nhận thấy quá trình chuyển đổi không phải lúc nào cũng suôn sẻ. Để khắc phục điều này, tôi đảm bảo rằng hai hoạt động liên quan đến quá trình chuyển đổi đều sử dụng cùng một thành phần.

Thời gian chuyển tiếp- Bạn không muốn người dùng phải chờ đợi quá lâu nhưng cũng không muốn tạo ra các thành phần xuất hiện với tốc độ ánh sáng. Điều này phụ thuộc vào quá trình chuyển đổi mà bạn đang sử dụng, vì vậy tốt nhất bạn nên thử nghiệm, nhưng tôi nhận thấy rằng thời lượng 200-500 mili giây có tác dụng trong hầu hết các trường hợp.

Các yếu tố chuyển tiếp phổ biến

Các phần tử chuyển tiếp được chia sẻ cho phép bạn tạo hiệu ứng chuyển tiếp giữa các hình ảnh được chia sẻ trong một giao dịch, tạo ra các chuyển tiếp thú vị hơn và giúp người dùng hiểu rõ hơn về hành trình của họ.

Ở đây, hình ảnh từ hành động đầu tiên của chúng tôi được thu nhỏ và dịch thành hình ảnh tiêu đề trong hành động thứ hai

Trong bố cục của chúng tôi, chúng tôi phải liên kết bất kỳ hình ảnh phổ biến nào bằng thuộc tính transitionName - điều này thiết lập mối quan hệ chuyển tiếp giữa các hình ảnh. Dưới đây là những hình ảnh chung từ hoạt hình trên:

Đây là những hình ảnh được chia sẻ, có nghĩa là chúng sẽ trở nên sống động với nhau trong quá trình chuyển đổi hành động

Để chuyển đổi giữa hai điều này, chúng tôi bắt đầu bằng cách khai báo tên của quá trình chuyển đổi chung, được thực hiện bằng cách sử dụng thuộc tính transitionName trong bố cục XML.

android:transitionName=“@string/transition_view“/>

android:id=“@+id/view_shared_transition“
android:transitionName=“@string/transition_view“/>
android:id=“@+id/view_separator“/>
android:id=“@+id/text_detail“/>
android:id=“@+id/text_close“/>

Sau khi hoàn thành việc này, chúng ta tạo một đối tượng Cặp ở bước 1) chứa hình ảnh chuyển tiếp của chúng ta và tên chuyển tiếp của nó. Sau đó, chúng tôi chuyển nó sang các tùy chọn giao dịch mẫu như (ActivityOptionsCompat) để cả hai hoạt động đều nhận biết được các thành phần chung. Từ đó chúng ta sẽ bắt đầu giao dịch của mình, thông qua tùy chọn ví dụ:

Người tham gia cặp = Cặp mới<>(mSquareView, ViewCompat.getTransitionName(mSquareView));
Hoạt độngOptionsCompat chuyển tiếpActivityOptions =
Hoạt độngOptionsCompat.makeSceneTransitionAnimation(
SharedTransitionsActivity.this, người tham gia);
Hoạt độngCompat.startActivity(SharedTransitionsActivity.this,
ý định, transitionActivityOptions.toBundle());

Việc tách những hình ảnh này trong khi quá trình chuyển đổi đang diễn ra thực sự giúp hoàn thành quá trình chuyển đổi.

Đây là phần chuyển tiếp giữa hai hình ảnh này, nhưng còn những hình ảnh trong màn thứ hai trượt từ bên dưới thì sao?

(Những người ở bên trái)

Tôi rất vui vì bạn đã hỏi! Điều này cũng dễ dàng đạt được, như hình dưới đây:

Trượt slide = Slide mới(Gravity.BOTTOM);
slide.addTarget(R.id.view_separator);
slide.addTarget(R.id.text_detail);
slide.addTarget(R.id.text_close);
getWindow().setEnterTransition(slide);
Như bạn có thể thấy, chúng tôi tạo mẫu Trang trình bày chuyển tiếp mới bằng cách thêm các chế độ xem mục tiêu cho quá trình chuyển đổi và đặt trang trình bày làm chuyển tiếp mục nhập giao dịch.

Chuyển tiếp tùy chỉnh

Chúng tôi cũng có khả năng tạo các chuyển đổi của riêng mình bằng cách sử dụng bất kỳ hoạt ảnh nào từ API mà chúng tôi đã đề cập cho đến nay. Ví dụ: chúng ta có thể thực hiện thêm một bước chuyển tiếp Phần tử được chia sẻ để trở thành hình ảnh chuyển tiếp - điều này có thể hữu ích khi chúng ta muốn hiển thị hộp thoại (hoặc hình ảnh bật lên tương tự), như hiển thị bên dưới:

Chuyển động này giúp hướng sự chú ý của người dùng giữa các trạng thái thành phần

Chúng ta hãy xem nhanh những gì đang xảy ra ở đây:

• Chúng tôi bắt đầu bằng cách tạo SharedTransition, chuyển ở trạng thái được nhấn cùng với tên chuyển đổi để tham chiếu thành phần được chia sẻ
• Tiếp theo, chúng tôi tạo một phiên bản ArcMotion, điều này cho phép chúng tôi tạo hiệu ứng cong chuyển động khi chuyển đổi giữa hai hình ảnh
• Sau đó, chúng tôi mở rộng ChangeBounds để tạo chuyển đổi tùy chỉnh và chuyển đổi hai biểu mẫu (chúng tôi có một lớp riêng cho nút và FAB). Ở đây, chúng tôi ghi đè các phương thức khác nhau từ lớp để có thể tạo hiệu ứng động cho các thuộc tính được yêu cầu. Chúng ta sẽ sử dụng ViewPropertyAnimator để tạo hoạt ảnh cho độ trong suốt của hình ảnh hộp thoại, ObjectAnimator để tạo hoạt ảnh cho hình ảnh giữa hai màu và một AnimatorSet mẫu để chúng ta có thể tạo hiệu ứng cho cả hai hiệu ứng này cùng nhau.

Vector hoạt hình của hệ số đầu vào

Kể từ phiên bản API 21 (Lollipop), AnimatedVectorDrawable có thể được sử dụng để tạo hoạt ảnh cho các thuộc tính VectorDrawable nhằm tạo ra hoạt ảnh của đối tượng có thể vẽ.

Bây giờ thật dễ dàng để thực hiện một số nhiều loại khác nhau hoạt hình về hệ số đầu vào

Nhưng làm thế nào để chúng tôi làm điều này? Vâng, chúng ta hãy xem điều này:

Nó bao gồm một số tệp khác nhau và chúng tôi bắt đầu bằng cách tạo hai tệp vectơ riêng biệt, mỗi tệp có một số thuộc tính:

• Chiều cao và chiều rộng - Kích thước thực tế hình ảnh vector
• Chiều cao và chiều rộng của khung nhìn - Khai báo kích thước của khung vẽ ảo nơi các rãnh vectơ được vẽ trên đó
• Tên nhóm - Khai báo nhóm mà bản nhạc thuộc về
• Pivot X & Y - Khai báo trục xoay dùng để chia tỷ lệ và xoay nhóm
• Quỹ đạo màu Tô màuđiền vào đường dẫn vector
• Path Data - Khai báo dữ liệu của đường dẫn vector dùng để vẽ vector

Lưu ý: Tất cả các thuộc tính liên kết được lưu trữ trong một tệp dòng chung, giúp giữ cho các phần tử được ngăn nắp và gọn gàng.

android:chiều cao=“56dp“
android:width=“56dp“

android:viewportWidth=“24.0“>

android:pivotX=“12“
android:pivotY=“12“>

android:pathData=“@string/path_add“/>

Vectơ được tạo từ tệp ic_add.xml của chúng tôi (bên dưới)

android:chiều cao=“56dp“
android:width=“56dp“
android:viewportHeight="24.0"
android:viewportWidth=“24.0“>
android:name=“@string/groupAddRemove“
android:pivotX=“12“
android:pivotY=“12“>
Android:fillColor=“@color/Stroke_color“
android:pathData=“@string/path_remove“/>

Vectơ được tạo từ tệp ic_remove.xml của chúng tôi (bên dưới)

Tiếp theo, chúng tôi khai báo các tệp Vector có thể vẽ hoạt hình, đặt cả Vector có thể vẽ được và hoạt ảnh được sử dụng cho từng trạng thái "kéo dài" (Thêm hoặc Xóa). Bằng cách xem xét vectơ hoạt ảnh được thêm hoặc xóa, chúng ta khai báo mục tiêu:

Hoạt hình từ trạng thái này sang trạng thái khác
Hoạt hình xoay của hệ số đã nhập

android:drawable=“@drawable/ic_add“>
android:name=“@string/add“
android:animation=“@animator/add_to_remove“ />
android:name=“@string/groupAddRemove“
android:animation=“@animator/rotate_add_to_remove“ />

Sau đó, chúng ta phải tạo từng tệp được đề cập cho các mục đích này.

Thay đổi trạng thái của hệ số đã nhập

Trong add_to_remove.xml, chúng tôi sử dụng ObjectAnimator để chuyển đổi giữa các hình dạng bằng các thuộc tính sau:

• PropertyName - Thuộc tính hoạt ảnh
• valueFrom- Giá trị ban đầu cho đường dẫn vectơ
• valueTo- Giá trị đích cho đường dẫn vector
• Thời lượng - Thời lượng của hoạt ảnh
• bộ nội suy - Bộ nội suy được sử dụng cho hoạt ảnh
• ValueType - Loại giá trị chúng ta đang tạo hiệu ứng

xmlns:android=“//schemas.android.com/apk/res/android“
android:propertyName=“pathData“
android:valueFrom=“@string/path_add“
android:valueTo=“@string/path_remove“

android:interpolator=“@android:interpolator/fast_out_slow_in“
android:valueType=“pathType“ />

Xoay biểu mẫu

Chúng tôi sử dụng cách tiếp cận tương tự để xoay hình bằng cách sử dụng thuộc tính góc quay và độ lớn:

xmlns:android=“//schemas.android.com/apk/res/android“
android:propertyName=“xoay”
android:valueFrom=“-180“
android:valueTo=“0“
android:duration=“@integer/duration“
android:interpolator=“@android:interpolator/fast_out_slow_in“ />
Hoạt ảnh đảo ngược (từ Xóa sang Thêm) hoạt động tương tự, chỉ với các giá trị hoạt ảnh đảo ngược.

Vector hệ số đầu vào hoạt hình đã hoàn thành của chúng ta trông thật tuyệt phải không!

Và kết luận là…

Mặc dù chỉ là bề nổi nhưng tôi hy vọng bài viết này đã cung cấp một số thông tin chi tiết về cách bạn có thể tạo ra chuyển động có ý nghĩa trong ứng dụng của mình. Tôi mong muốn tìm hiểu cách tôi có thể đẩy chúng đi xa hơn và cải thiện giao diện thiết kế của tôi.

Nếu bạn thích bài viết này, vui lòng nhấp vào “Đề xuất”!

Tôi muốn biết suy nghĩ của bạn về vấn đề này và nơi bạn sử dụng những hoạt ảnh này - vui lòng để lại nhận xét hoặc tweet cho tôi!

Bắt đầu với Android 4.4, các nhà phát triển có thêm một công cụ để tạo hoạt ảnh - Transitions Framework. Ban đầu nó được thiết kế để tạo hoạt ảnh thay đổi trạng thái của ứng dụng bằng cách thao tác trên nhiều Chế độ xem. Với việc phát hành Android 5.0, bộ hoạt ảnh có sẵn để sử dụng đã được mở rộng để tương ứng với khái niệm Material Design được giới thiệu cùng lúc.

Transitions Framework cho phép bạn tạo nhiều hình ảnh động khác nhau một cách nhanh chóng và dễ dàng. Vì vậy, trong quá trình làm việc trên i Funny thì không thể bỏ qua bộ công cụ này. Mời bạn đọc tham gia một trường hợp đặc biệt về việc sử dụng Transitions API - tạo hoạt ảnh chuyển đổi giữa các Hoạt động với hiệu ứng “liền mạch”.

Từ quan điểm trực quan, hoạt ảnh chuyển tiếp giữa các Hoạt động được trình bày trong Khung chuyển tiếp có thể được chia thành hai loại: hoạt ảnh thông thường và hoạt ảnh có thành phần chung. Khái niệm hoạt hình với một yếu tố chung được thể hiện bằng một hình ảnh bị đánh cắp một cách trung thực từ dev.android.com. 1. Các thành phần phổ biến trên đó là hình đại diện và tên liên hệ.

Cơm. 1. Hoạt ảnh chuyển tiếp giữa Hoạt động với các thành phần chung

Nhưng không ai thích những lời giới thiệu dài dòng, vì vậy hãy chuyển ngay sang câu chuyện về cách tạo ra những hoạt ảnh kiểu này trong ứng dụng i Funny. Ví dụ đầu tiên, hãy xem xét hoạt ảnh được hiển thị trong Hình. 2. Để sử dụng nó, chúng ta cần có phiên bản Android 5.0 trở lên.

Cơm. 2. Ảnh động chuyển đổi giữa Hoạt động trên màn hình xác thực người dùng

Từ quan điểm của người dùng, không có gì bất thường ở đây: một màn hình, hoạt ảnh đơn giản. Tuy nhiên, như bạn có thể đoán, “under the Hood” là sự chuyển tiếp giữa hai màn hình với một thành phần chung.

Kỳ lạ thay, bước đầu tiên để tạo ra sự chuyển đổi như vậy là chọn chính phần tử này và xác định vị trí của nó trong bố cục của cả hai Hoạt động. Sau này, bạn cần thêm thuộc tính android:transitionName vào mô tả của từng Chế độ xem hiển thị phần tử đã chọn và cũng gán cho chúng một android:id nếu thiếu.

Trong trường hợp của chúng tôi, đây là các ImageView thông thường có dạng sau:

Có hai điểm quan trọng đáng lưu ý ở đây. Đầu tiên, cả hai ImageView cần được đặt thành cùng một transitionName, điều này hợp lý. Thứ hai, vì chúng ta đang sử dụng ImageView nên nội dung của chúng phải giống nhau, vì việc sử dụng hai tài nguyên khác nhau có thể dẫn đến những hậu quả không mong muốn (ít nhất là chế độ xem hoạt ảnh nhấp nháy ở đầu và cuối hoạt ảnh).

Ở bước thứ hai, bạn cần thêm các tùy chọn cho Hoạt động đã khởi chạy (thứ hai), cho biết rằng hoạt ảnh sẽ được khởi chạy khi nó bắt đầu.

Ghi chú.“Thứ hai” chúng tôi muốn nói đến Hoạt động đã khởi chạy, quá trình chuyển đổi sang hoạt động này phải được thực hiện và “đầu tiên” chúng tôi muốn nói đến Hoạt động khởi chạy.

Điều này được thực hiện như sau:

Gói gói = null; if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) ( Xem v = hoạt động.findViewById(R.id.auth_logo); if (v != null) ( Tùy chọn Hoạt động = Hoạt động.makeSceneTransitionAnimation(hoạt động , v, hoạt động.getString(R.string.email_auth_transition)); bó = tùy chọn.toBundle(); ) ) Ý định ý định = Ý định mới (hoạt động, SecondActivity.class); if (gói == null) ( hoạt động.startActivity(ý định); ) khác ( hoạt động.startActivity(ý định, gói); )

Trong danh sách sau:

• R.id.auth_logo - ImageView từ Hoạt động đầu tiên, được sử dụng trong hoạt ảnh;
• hoạt động - Hoạt động đầu tiên;
• R.string.email_auth_transition - nhãn trước đây được để lại trong bố cục của cả hai ImageView;
• SecondActivity.class - Hoạt động thứ hai.

Và bây giờ, người đọc chú ý có thể bối rối: trong phần giới thiệu chúng ta đã nói về việc sử dụng API cấp 19, trong ví dụ có API cấp 21 và trong danh sách ở trên có hạn chế về API cấp 22. Thật không may, khi viết mã, nó hóa ra rằng hoạt ảnh chuyển tiếp có thành phần chung có thể hoạt động không chính xác trên điện thoại có API cấp 21. Điều này thể hiện ở dạng hoạt ảnh bị chậm lại nói chung và các tạo phẩm trên Chế độ xem hoạt ảnh nói riêng. Nếu bạn đã quen thuộc với chủ đề này, biết lý do của hành vi này và/hoặc cách giải quyết vấn đề được mô tả, hãy cho chúng tôi biết về vấn đề đó trong phần nhận xét.

Ở bước thứ ba, cần mô tả hoạt ảnh chuyển tiếp, tức là. chỉ ra đường dẫn mà Chế độ xem động đi qua và sự chuyển đổi của chính Chế độ xem đó. Đối với điều này, chúng tôi sẽ tạo ra tập tin riêng biệt projectName/src/main/res/transitions/email_auth_transition.xml với nội dung sau:

Một chút lý thuyết. Thẻ transitionSet nhằm mục đích mô tả một số phép biến đổi được áp dụng cho Chế độ xem động cùng một lúc. Tham số transitionOrdering kiểm soát thứ tự áp dụng các phép biến đổi này. Trong trường hợp của chúng tôi, chúng được áp dụng đồng thời. Có một số loại chuyển đổi dựng sẵn được cung cấp trong Khung chuyển tiếp. VỚI danh sách đầy đủ có thể được tìm thấy trên trang này. Chúng ta sẽ tập trung vào hai cái cụ thể: ChangeBounds và ChangeImageTransform.

Cái đầu tiên là để chuyển đổi kích thước của Chế độ xem. Cái thứ hai chỉ hoạt động với ImageView và kết hợp với cái thứ nhất, cho phép bạn thay đổi không chỉ kích thước mà còn cả hình dạng của ImageView. Sử dụng dữ liệu chuyển đổi, chúng tôi thu được hình ảnh động đầu ra về việc thay đổi kích thước hình ảnh, được hiển thị trong Hình. 2. Nếu bạn không chỉ định kiểu chuyển động của Chế độ xem động thì nó sẽ di chuyển theo đường đi ngắn nhất. Hơn cách thú vị Chúng ta sẽ xem xét chuyển động trong ví dụ thứ hai.

Bước cuối cùng trong việc tạo hoạt ảnh là khai báo nó trong chủ đề của cả hai Hoạt động. Để thực hiện việc này, hãy chỉnh sửa mô tả của các chủ đề như sau (hoặc tạo chủ đề mới trong thư mục projectName/src/main/res/values-v22/theme.xml):

• android:windowActivityTransitions cho phép hoạt ảnh chuyển tiếp;
• android:windowSharedElementEnterTransition trỏ tới một tệp mô tả hoạt ảnh của quá trình chuyển đổi từ Hoạt động đầu tiên sang Hoạt động thứ hai;
• android:windowSharedElementExitTransition trỏ đến một tệp mô tả hoạt ảnh chuyển tiếp khi quay lại từ Hoạt động thứ hai về Hoạt động đầu tiên.

Cần lưu ý rằng đối với các phiên bản HĐH dưới 5.1 cần tạo các chủ đề có phong cách giống hệt nhau để tránh những hậu quả khá mong đợi khi ứng dụng bị treo. Ví dụ: hãy đặt chúng vào tệp projectName/src/main/res/values/theme.xml: