Hướng dẫn sử dụng Object Animator để tạo hiệu ứng cho view trong android

Dùng Object Animator để tạo hiệu ứng

Bài viết này hướng dẫn các bạn cách tạo hiệu ứng bằng file XML sau đó điều khiển bằng code java. Bạn nên tạo mới project để thực hành.

Bước 1: Tạo project có 1 textview và 1 nút bấm

Code Textview: 

<TextView
    android:id="@+id/tv01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello!"
    android:textSize="40dp"
    android:background="#FF9800"/>

Code Button:

<Button
    android:id="@+id/btn01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="start" />

Bạn tự trình bày làm sao cho 2 cái textview và button nằm cách xa nhau 1 chút như ảnh dưới đây.

trong Activity bạn khai báo biến, thực hiện ánh xạ các view và set sự kiện onClick cho nút bấm

public class MainActivity extends AppCompatActivity {

    TextView tv01;
    Button btn1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tv01 = findViewById(R.id.tv01);
        btn1 = findViewById(R.id.btn01);
 

        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
              // chỗ này để viết code load hiệu ứng khi người dùng bấm nút
             
            }
        });
    }
}

Bước 2: Phân tích logic hiệu ứng

Bạn quan sát ảnh dưới đây, mục đích là tạo hiệu ứng di chuyển cái textview Hello từ vị trí ban đầu đến vị trí A. Như ảnh sẽ có 3 đường đi của textview là 1, 2, 3. 

Chúng ta sẽ cần 2 hiệu ứng để di chuyển: 1 là hiệu ứng di chuyển sang phải, 2 là hiệu ứng di chuyển xuống dưới.  Kết hợp 2 hiệu ứng này sẽ đưa textview xuống vị trí A. 

Bước 3: Tạo thư mục tên là animator trong thư mục /res của ứng dụng để tạo file hiệu ứng

Kích phải chuột lên thư mục res/ chọn new --> Directory --> nhập tên là animator sau đó Enter

Kích phải chuột lên thư mục animator --> chọn New --> Animator Resource File --> nhập tên là:  hieu_ung01  và bấm Enter (các lựa chọn khác để mặc định)

Kết quả là có file hieu_ung01.xml trong đó. 

Nếu bạn nào không nhìn thấy thư mục animator thì chuyển chế độ view Project về dạng Project thay vì android

------------------------------------------------

Soạn nội dung cho file hieu_ung01.xml

Bước 4: Vào sự kiện OnClick của nút bấm để load hiệu ứng

AnimatorSet animatorSet = (AnimatorSet) AnimatorInflater.loadAnimator(MainActivity.this,R.animator.hieu_ung01);
animatorSet.setTarget(tv01);
animatorSet.start();

Bước 5: Chạy và bấm nút để xem hiệu ứng.

Sau khi chạy hãy thay đổi thứ tự code của objectAnimator trong file xml và chạy lại để xem hiệu ứng thay đổi thế nào