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. 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

Chúng ta sẽ cần 2 hiệu ứng để di chuyển TextView: 1 là hiệu ứng di chuyển sang phải, 2 là hiệu ứng di chuyển xuống dưới.

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

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
   <objectAnimator
       android:propertyName="y"
       android:valueTo="1000"
       android:duration="3000"/>
  
</set>

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