Professional Documents
Culture Documents
Animation Trong Android
Animation Trong Android
Android
Animations
_____________
H NI, 05/ 2012
MC LC
Trang
Tng quan..................................................................................................................................................... 4
Phn 1. Frame-by-Frame Animation........................................................................................................... 4
1.1. V d v frame-by-frame animation ................................................................................................ 4
1.2. To Activity ....................................................................................................................................... 5
1.3. Thm Animation cho Activity .......................................................................................................... 5
Phn 2. Layout Animation ........................................................................................................................... 7
2.1. Cc kiu Tweening Animation c bn............................................................................................. 8
2.2. V d v layout animation ................................................................................................................ 8
2.3. To Activity v ListView .................................................................................................................. 9
2.4. To animation cho ListView .......................................................................................................... 10
Phn 3. View Animation ............................................................................................................................ 12
3.1. Tm hiu View Animation .............................................................................................................. 12
3.2. Thm Animation ............................................................................................................................. 14
3.3. S dng camera cm nhn c su .................................................................................. 16
3.4. Lp AnimationListener .................................................................................................................. 17
3.5. Mt s ch v ma trn bin i .................................................................................................. 18
Ti liu tham kho ..................................................................................................................................... 20
Tng quan
Animation (c th dch l hot nh) cho php mt i tng trn mn hnh c th thay i mu
sc, v tr, kch thc hay hng ca n theo thi gian. Animation trong Android rt thit thc,
vui nhn v n gin v vy chng c s dng rt thng xuyn.
Android 2.3 v cc phin bn trc h tr ba kiu animation: frame-by-frame animation,
layout animation, view animation (hai kiu sau thuc loi tweening animation).
Android 3.0 v cc bn sau tng cng kh nng Animation trong Android bng vic gii
thiu kh nng to hiu ng ng cho cc thuc tnh ca giao din ngi dng (UI).
Trong ti liu ny, chng ta s ln lt tm hiu v ba kiu animation frame-by-frame
animation, layout animation, view animation bng vic phn tch chng su hn thng qua
cc v d.
1.2. To Activity
XML Layout cho v d
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView android:id="@+id/textViewId1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Debug Scratch Pad"
/>
<Button
android:id="@+id/startFAButtonId"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Start Animation"
/>
<ImageView
android:id="@+id/imageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
mt tp cc tham s khc nhau. Ch rng, bn khng cn bit chi tit nhng th hin bn trong
nu s dng class AnimationDrawable.
s dng class AnimationDrawable, u tin chng ta to file XML nh ngha danh sch cc
frame t trong /res/drawable
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="@drawable/colored_ball1" android:duration="50"
<item android:drawable="@drawable/colored_ball2" android:duration="50"
<item android:drawable="@drawable/colored_ball3" android:duration="50"
<item android:drawable="@drawable/colored_ball4" android:duration="50"
<item android:drawable="@drawable/colored_ball5" android:duration="50"
<item android:drawable="@drawable/colored_ball6" android:duration="50"
<item android:drawable="@drawable/colored_ball7" android:duration="50"
<item android:drawable="@drawable/colored_ball8" android:duration="50"
<item android:drawable="@drawable/colored_ball9" android:duration="50"
</animation-list>
/>
/>
/>
/>
/>
/>
/>
/>
/>
Ghi ch: Tham kho chng trnh hon chnh trong th mc SampleFrameAnimation trong file
nh km.
Translate animation (Tnh tin): Tnh tin mt view dc theo trc x hoc dc theo
trc y.
Alpha animation (Alpha): Thay i trong sut ca mt view.
Ghi ch: Tham kho chng trnh minh ha trong th mc AndroidAnimButtons trong file
nh km.
Ta c th thy, cc tham s trong file XML trn u c "from" v "to" v chng ta phi xc nh
gi tr bt u v kt thc cho animation.
Cc dng thay i c in m.
Alpha animation c trch nhim kim sot s phai nht dn ca mu sc. Trong v d ny, ta
ang yu cu alpha animation i t "khng th nhn thy" (invisible color) n y mu
sc (full color) trong 1000 mili giy hay 1 giy. Thi gian cn thit ti thiu l 1 giy, nu khng
rt kh nhn ra s thay i ny. Mi khi mun thay i animation ca mt item ring l, ta
cn thay i file XML trung gian tr ti file animation mi ny.
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:delay="30%"
android:animationOrder="reverse"
android:animation="@anim/alpha"/>
Dng thay i c in m.
Tip theo ta th mt animation l kt hp ca vic thay i v tr v thay i mu gradient.
Kt hp Translate v Alpha Animation
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromYDelta="-100%" android:toYDelta="0"
android:duration="500" />
<alpha android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="500" />
</set>
Translate animation s dch chuyn text t trn xung di trong khng gian hin th. Alpha
animation s thay i mu gradient t khng th nhn thy n c th thy. Thi gian thit lp l
500 cho php ngi dng nhn thc c s thay i. Tt nhin, chng ta cn thay i file
layoutAnimation trung gian ln na tham chiu n file ny. Gi s file XML kt hp trn
c tn l translate_alpha.xml, ta s thay i file layoutAnimation trung gian nh sau
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:delay="30%"
android:animationOrder="reverse"
android:animation="@anim/translate_alpha"/>
Dng thay i c in m.
on m di y cho chng ta thy cch s dng rotate animation
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromDegrees="0.0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="500" />
on m trn th hin vic quay mi text item trong list mt vng xung quanh im gia ca
mi text item. Tip theo, bn cn thay i file layout controller XML v file ListView XML
layout v sau chy ng dng.
Ghi ch: Tham kho chng trnh hon chnh trong th mc SampleLayoutAnimation trong
file nh km.
Ngoi ra, cn c mt cng c khc lin quan n layout animation l interpolator.
View animation l loi phc tp nht trong ba loi animation. View animation cho php ta to
hiu ng ng vi view ty bng vic thao tc vi ma trn bin i.
}
});
}
}
ng k vi file AndroidManifest.xml
<activity android:name=".ViewAnimationActivity"
android:label="View Animation Test Activity">
</activity>
{
super.onCreate(savedInstanceState);
setContentView(R.layout.list_layout);
setupListView();
this.setupButton();
}
private void setupListView()
{
String[] listItems = new String[] {"Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6",
};
ArrayAdapter<String> listItemAdapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, listItems);
ListView lv = (ListView)this.findViewById(R.id.list_view_id);
lv.setAdapter(listItemAdapter);
}
private void setupButton()
{
Button b = (Button)this.findViewById(R.id.btn_animate);
b.setOnClickListener(
new Button.OnClickListener(){
public void onClick(View v)
{
animateListView();
}
});
}
private void animateListView()
{
ListView lv = (ListView)this.findViewById(R.id.list_view_id);
lv.startAnimation(new ViewAnimation2());
}
}
Cc phng thc preTranslate v postTranslate s thit lp mt ma trn trc khi scale v sau
khi scale. iu ny tng tng vi ba ma trn bin i. on m
matrix.setScale(interpolatedTime, interpolatedTime);
matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);
//Log.d("d","transform:" + interpolatedTime);
final Matrix matrix = t.getMatrix();
camera.save();
camera.translate(0.0f, 0.0f, (1300 - 1300.0f * interpolatedTime));
camera.rotateY(360 * interpolatedTime);
camera.getMatrix(matrix);
matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);
camera.restore();
}
}
3.4. Lp AnimationListener
Android s dng mt listener interface c tn AnimationListener gim st cc s kin
animation. Bn c th lng nghe cc s kin animation bng vic hin thc AnimationListener
interface v thit lp hin thc i vi class Animation.
public class ViewAnimationListener
implements Animation.AnimationListener {
private ViewAnimationListener(){}
public void onAnimationStart(Animation animation)
{
Log.d("Animation Example", "onAnimationStart");
}
public void onAnimationEnd(Animation animation)
{
Log.d("Animation Example", "onAnimationEnd");
}
public void onAnimationRepeat(Animation animation)
{
Log.d("Animation Example", "onAnimationRepeat");
}
}
matrix.postTranslate(centerX, centerY);
tng ng vi
Matrix matrixPreTranslate = new Matrix();
matrixPreTranslate.setTranslate(-centerX, -centerY);
matrix.concat(matrixPreTranslate,matrix);
matrix.postTranslate(matrix,matrixpostTranslate);
Button