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 |
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> - 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>
- 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:
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
1. http://developer.android.com/guide/topics/resources/animation-resource.html
2. http://developer.android.com/reference/android/view/animation/Animation.html
3. http://developer.android.com/guide/topics/resources/animation-resource.html
4. http://developer.android.com/reference/android/view/animation/Animation.AnimationListener.html
Nhận xét
Đăng nhận xét