Card Flip Animation trong Android

Trong một thời gian dài, tôi đã cố gắng triển khai Hoạt ảnh lật thẻ bằng Card Flip Animation trong Android, nhưng mọi hướng dẫn hoặc mã nguồn mà tôi tìm thấy đều không giải thích được các con số “ma thuật” trong tệp hoạt ảnh XML. Không biết từ đâu hackathon hoang dã xuất hiện!

Trong cuộc thi lập trình Android mới nhất của công ty chúng tôi, chúng tôi đã quyết định phát triển một ứng dụng cho Planning Poker. Như bạn có thể đoán Flip Animation rất quan trọng để làm cho ứng dụng của chúng tôi trở nên thú vị. Tôi được chọn để tạo giao diện người dùng và đó là một cơ hội tốt để đi sâu vào Flip Animation. Trong bài đăng trên blog này, tôi sẽ giải thích tất cả những gì tôi đã học được về nó.

Card layouts

Đầu tiên, hãy tạo một bố cục đơn giản với mặt trước của một thẻ:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

 

    <ImageView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:tint="@color/cardFront"

        android:padding="16dp"

        android:src="@drawable/rectangle"/>

 

    <TextView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:text="@string/front"

        android:textColor="@color/white"

        style="@style/Base.TextAppearance.AppCompat.Display1"

        android:gravity="center"/>

 

</FrameLayout>

Sau đó đặt trong layout activity

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context="blog.droidsonroids.pl.blogpost.MainActivity"

    android:onClick="flipCard">

 

    <FrameLayout

        android:id="@+id/card_front"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:gravity="center">

 

        <include layout="@layout/card_front" />

 

    </FrameLayout>

 

</FrameLayout>

Animation XML

Tiếp theo tạo animation trong xml

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator

        android:valueFrom="0"

        android:valueTo="180"

        android:propertyName="rotationY"

        android:duration="@integer/anim_length" />

</set>

Hoạt ảnh đơn giản này chỉ xoay chế độ xem quanh trục Y từ 0 đến 180 độ và đó là những gì chúng ta cần cho phần đầu tiên của hoạt ảnh. Như được hiển thị bên dưới, hoạt ảnh biến mất nửa chừng, nhưng tôi sẽ giải thích cách khắc phục sau.

Phần thứ hai của hoạt ảnh “đối lập” với những gì chúng tôi vừa tạo. Vì vậy, tôi đã thay đổi hai giá trị trong tệp XML của chúng tôi

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator

        android:valueFrom="-180"

        android:valueTo="0"

        android:propertyName="rotationY"

        android:duration="@integer/anim_length" />

 

</set>

Giá trị -180 làm cho chế độ xem lật ngay lập tức và bắt đầu xoay nó về vị trí tự nhiên. Dấu hiệu quyết định hướng chuyển động. Hãy thoải mái thử nghiệm và thay đổi các giá trị để hiểu rõ hơn một vấn đề và đừng lo lắng về trục trặc xấu xí đó khi bắt đầu hoạt ảnh vì điều đó sẽ không gây chú ý cho người dùng.

Để tạo toàn bộ hoạt ảnh, chúng ta cần tạo hai tệp XML để nhập và thoát hoạt ảnh và sửa thẻ biến mất trên nửa chặng đường của hoạt ảnh. Để khắc phục chúng ta chỉ cần thay đổi khoảng cách camera. Khoảng cách máy ảnh là độ dài giữa chế độ xem động và mắt "ảo". Thay đổi khoảng cách đó ảnh hưởng đến sự biến dạng phối cảnh.

Camera distance

Trong trường hợp của chúng tôi, khoảng cách chỉ là nhỏ và Flipping Animation vượt qua "đường ảo" và biến mất. Để khắc phục chúng ta chỉ cần tăng khoảng cách đó lên. Khoảng cách mặc định khác nhau trên các thiết bị khác nhau. Theo tài liệu Android, nếu bạn muốn chỉ định khoảng cách dẫn đến kết quả nhất quán về mặt hình ảnh trên các thiết bị khác nhau, hãy sử dụng công thức đó:

float scale = context.getResources().getDisplayMetrics().density;

view.setCameraDistance(distance * scale);

Tôi đặt khoảng cách là 8000 để làm cho phối cảnh hoạt ảnh ít bị méo hơn.

Whole animation

Điều thứ hai chúng ta cần làm là ẩn / hiện chế độ xem trong một nửa hoạt ảnh, để đạt được điều này, chỉ cần thêm các dòng sau

<objectAnimator

    android:valueFrom="1.0"

    android:valueTo="0.0"

    android:propertyName="alpha"

    android:duration="0" />

cho mọi tệp hoạt hình. Hãy xem out_animation.xml (hoạt ảnh của chế độ xem tiền cảnh).

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator

        android:valueFrom="0"

        android:valueTo="180"

        android:propertyName="rotationY"

        android:duration="@integer/anim_length" />

 

    <objectAnimator

        android:valueFrom="1.0"

        android:valueTo="0.0"

        android:propertyName="alpha"

        android:startOffset="@integer/anim_length_half"

        android:duration="1" />

</set>

Hoạt ảnh này xoay chế độ xem từ vị trí tự nhiên sang vị trí được phản chiếu xung quanh trục Y và ẩn nó đi một nửa.

Hoạt ảnh nửa chiều đạt được bằng cách đặt startOffset trong một nửa thời gian của toàn bộ hoạt ảnh. In_animation.xml tiếp theo (hoạt ảnh của chế độ xem nền) trông gần như giống nhau:

<set xmlns:android="http://schemas.android.com/apk/res/android">  

<objectAnimator

        android:valueFrom="1.0"

        android:valueTo="0.0"

        android:propertyName="alpha"

        android:duration="0" />

 

    <objectAnimator

        android:valueFrom="-180"

        android:valueTo="0"

        android:propertyName="rotationY"

        android:repeatMode="reverse"

        android:duration="@integer/anim_length" />

 

    <objectAnimator

        android:valueFrom="0.0"

        android:valueTo="1.0"

        android:propertyName="alpha"

        android:startOffset="@integer/anim_length_half"

        android:duration="0" />

</set>

Kết quả: