Animation trong Android sử dụng file XML

11:28 AM Fighttech 0 Comments

Bài viết này StudyCoding sẽ huớng dẫn cách tạo hiệu ứng Animotion trong Android, Sử dụng các các hiệu ứng rotating, fading, moving, stretching  và đặc biệt vertical , horizontal.

App Demo
Tween Animation Example
Tween Animation Example

1. Tạo files XML-animation

             File XML-animation thuờng đuợc lưu trong thư mục  res\anim directory. 
Tạo 2 file XML: translate.xml and rotate.xml.

Code rotate.xml file:

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shareInterpolator="false">    
 <rotate   
     android:fromDegrees="0"  
     android:toDegrees="180"  
     android:pivotX="50%"  
     android:pivotY="50%"  
     android:duration="2500"/>   
 </set>
Các thuộc tính xoay:
  • android:fromDegrees -  bắt đầu từ vị trí góc (tính bằng độ).
  • android:toDegrees -  kết thúc từ vị trí góc (tính bằng độ).
  • android:pivotX - phối hợp của trung tâm quay. Hiện bằng điểm ảnh so với cạnh trái của đối tượng hoặc tỷ lệ phần trăm so với cạnh trái của đối tượng, hoặc tỷ lệ phần trăm so với cạnh trái container của cha mẹ. 
  • android:pivotY - TY phối hợp của các trung tâm quay.T hể hiện một trong hai: tính theo điểm ảnh so với cạnh trên của đối tượng, tỷ lệ phần trăm so với cạnh trên của đối tượng, hoặc tỷ lệ phần trăm so với cạnh trên container của cha mẹ.
  • android:duration - thời gian - số lượng thời gian cho các animation chạy (in milliseconds).

Code translate.xml file:

 <?xml version="1.0" encoding="utf-8"?>  
 <set xmlns:android="http://schemas.android.com/apk/res/android"  
   android:shareInterpolator="false">    
   <translate   
     android:toYDelta="-150"  
     android:fillAfter="true"  
     android:duration="1500"/>  
   <translate   
     android:toXDelta="-150"  
     android:fillAfter="true"  
     android:duration="1500"  
     android:startOffset="1500"/>    
   <translate   
     android:toXDelta="150"  
     android:fillAfter="true"  
     android:duration="1500"  
     android:startOffset="3000"/>   
   <translate   
     android:toYDelta="150"  
     android:fillAfter="true"  
     android:duration="1500"  
     android:startOffset="4500"/>   
 </set>
Các yếu tố:
  • android:toXDelta - Thể hiện một trong hai: tính theo điểm ảnh tương đối so với vị trí bình thường, tỷ lệ phần trăm so với chiều rộng phần tử, hoặc tỷ lệ phần trăm so với chiều rộng của parent.
  • android:toYDelta - Thể hiện một trong hai: tính theo điểm ảnh tương đối so với vị trí bình thường, tỷ lệ phần trăm so với yếu tố chiều cao, hoặc tỷ lệ phần trăm so với chiều cao của phụ huynh. 
  • android:startOffset - số lượng mili giây chậm trễ animation sau khi bắt đầu () được gọi. 
  • android:duration - số lượng thời gian cho các animation chạy (trong mili giây). 
  • android:fillAfter -  khi thiết lập là true, việc chuyển đổianimation được áp dụng sau khi các hình ảnh động là hơn.

2. Tạo hình dạng cho animation

     
        Đầu tiên tạo ra trong thư mục  res\drawable tạo file shape.xml (Click->new Android XML file). 

Code file shape.xml file:

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"   
       android:shape="rectangle">    
      <solid android:color="#9400D3" />  
</shape>
Chúng tôi đã tạo ra một hình chữ nhật màu tím :)

3. Chỉnh sữa file activity_main.xml

         Code file activity_main.xml :
 <LinearLayout 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"  
   android:orientation="vertical"  
   android:paddingBottom="@dimen/activity_vertical_margin"  
   android:paddingLeft="@dimen/activity_horizontal_margin"  
   android:paddingRight="@dimen/activity_horizontal_margin"  
   android:paddingTop="@dimen/activity_vertical_margin"  
   android:background="#DCDCDC"  
   tools:context=".MainActivity" >  
   <ImageView  
     android:id="@+id/image"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:minHeight="150dp"  
     android:minWidth="150dp"  
     android:layout_margin="70dp"/>  
   <TableRow  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content" >  
   <Button   
     android:id="@+id/rotate"  
     android:layout_width="fill_parent"  
     android:layout_height="80dp"  
     android:text="@string/rotate_text"  
     android:layout_weight="1"/>  
   <Button   
     android:id="@+id/translate"  
     android:layout_width="fill_parent"  
     android:layout_height="80dp"  
     android:text="@string/translate_text"  
     android:layout_weight="1"/>  
   </TableRow>  
 </LinearLayout>

4. Loading Animation and Handling User Input
        Code file MainActivity.java:

  1| package tweenanimationexample.tuts.com;  
  2| import android.os.Bundle;  
  3| import android.app.Activity;  
  4| import android.content.Context;  
  5| import android.view.Menu;  
  6| import android.view.View;  
  7| import android.view.View.OnClickListener;  
  8| import android.view.animation.Animation;  
  9| import android.view.animation.Animation.AnimationListener;  
 10| import android.view.animation.AnimationUtils;  
 11| import android.widget.Button;  
 12| import android.widget.ImageView;  
 13| public class MainActivity extends Activity implements AnimationListener{  
 14|  ImageView image;  
 15|  Animation animation1;  
 16|  Animation animation2;  
 17|  Button rotate, translate;  
 18|  Context context = this;  
 19|  @Override  
 20|  protected void onCreate(Bundle savedInstanceState) {  
 21|       super.onCreate(savedInstanceState);  
 22|       setContentView(R.layout.activity_main);  
 23|       image = (ImageView) findViewById(R.id.image);  
 24|       rotate = (Button) findViewById(R.id.rotate);  
 25|       translate = (Button) findViewById(R.id.translate);  
 26|       image.setImageResource(R.drawable.shape);  
 27|       animation1 = AnimationUtils.loadAnimation(this, R.anim.rotate);  
 28|       animation2 = AnimationUtils.loadAnimation(this, R.anim.translate);  
 29|       userInputHandler();  
 30|  }  
 31|  private void userInputHandler() {  
 32|       rotate.setOnClickListener(new OnClickListener() {  
 33|            @Override  
 34|            public void onClick(View v) {  
 35|                 image.startAnimation(animation1);                      
 36|            }  
 37|       });  
 38|       translate.setOnClickListener(new OnClickListener() {  
 39|            @Override  
 40|            public void onClick(View v) {  
 41|                 image.startAnimation(animation2);                      
 42|            }  
 43|       });  
 44|  }  
 45|  @Override  
 46|  public void onAnimationEnd(Animation animation) {  
 47|       image.setVisibility(View.INVISIBLE);  
 48|  }  
 49|  @Override  
 50|  public void onAnimationRepeat(Animation animation) {  
 51|       // TODO Auto-generated method stub  
 52|       image.setVisibility(View.VISIBLE);  
 53|  }  
 54|  @Override  
 55|  public void onAnimationStart(Animation animation) {  
 56|       // TODO Auto-generated method stub  
 57|       image.setVisibility(View.VISIBLE);  
 58|  }  
 59| }
Giải thích Code:
  • 27-28 - ở đây chúng tôi đang tạo ra một đối tượng hoạt hình bằng cách gọi phương pháp loadAnimation () (đi qua các bối cảnh hoạt động và một liên kết đến tập tin XML-hoạt hình của chúng tôi cho nó). 
  • 31-44 -  trong userInputHandler () phương pháp chúng tôi đang thiết thính giả trên các nút của chúng tôi, nhưng trong onClick () phương pháp chúng tôi đang kêu gọi () phương pháp View.startAnimation để bắt đầu hoạt hình được chọn. 
  • 45-57 - AnimationListener interface implements 3 phuơng thức abstract methods. Ví dụ, chúng ta có thể làm cho đối tượng hoạt hình vô hình khi các hình ảnh động kết thúc.

Source Code
References:

0 comments:

Subscribe to: Post Comments (Atom)