שפתומךה ב- Android משמשת להעניק לממשק המשתמש מראה עשיר וחוויית משתמש מורכבת. אנימציות באפליקציות ל- Android ניתן לבצע דרך קוד XML או קוד Android. במדריך זה על אנימציות Android נשתמש בקודי XML כדי להוסיף אנימציות לאפליקציה שלנו.
אנימציות ב- Android
אנימציות באפליקציות Android הן התהליך של יצירת תנועה ושינוי צורה. הדרכים הבסיסיות לביצוע אנימציות שנסתכל עליהן במדריך הן:
- אנימציית נפוצה
- אנימציית פעוטה
- אנימציית עמעום
- אנימציית הבהונה
- אנימציית התקררות
- אנימציית הגדלה
- אנימציית הקפיצה
- אנימציית סיבוב
- אנימציית הזזה
- אנימציית החזרה
- אנימציית התנגדות
- אנימציית רצפה
- אנימציית סדרתית
דוגמה לאנימציית Android ב- XML
יצרנו ספריית משאבים תחת התיקייה res והקנינו לקובץ XML שמכיל את לוגיקת האנימציה. הקובץ XML הדוגמא מציג קוד לוגיקת אנימציה של Android. sample_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="https://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:duration="300"
android:fillAfter="true"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />
-
android:interpolator : זהו שיעור השינוי באנימציה. אנו יכולים להגדיר interpolators משלנו באמצעות הזמן כאילו. בקוד XML למעלה, interpolator מובנה מוקצה
-
android:duration : משך האנימציה שבו אמורה האנימציה להשלים. זה 300 מילישניות כאן. זהו כללית המשך האידיאלית להצגת המעבר במסך. תחילת וסוף האנימציה מוגדרים באמצעות:
android:fromTRANSFORMATION android:toTRANSFORMATION
-
TRANSFORMATION : ההמרה שברצוננו לציין. במקרה שלנו, אנו מתחילים עם קנייה של x ו y שווה ל-0 ומסיימים עם קנייה של x ו y שווה ל-1
-
android:fillAfter : המאפיין מציין האם התצוגה צריכה להיות גלויה או מוסתרת בסיום האנימציה. הגדרנו אותה לגלויה בקוד למעלה. אם הוא מוגדר לשקר, הרכיב משנה למצבו הקודם לאנימציה
-
android:startOffset : זהו הזמן הממתין לפני שהנפשה מתחילה. מאפיין זה משמש בעיקר לביצוע הנפשות מרובות בסדר רצוף
-
android:repeatMode : זה מועיל כאשר ברצונך שההנפשה תתנפש מחדש
-
android:repeatCount : מגדיר את מספר החזרות בהנפשה. אם נקבע ערך זה כאינסופי, אז ההנפשה תתנפש באופן אינסופי
הנפשת אנימציה כאשר ייבוצע לחיצה על רכיב ממשק משתמש
המטרה שלנו היא להציג אנימציה כאשר נלחץ כל ווידג'ט (נניח TextView). לכן אנו צריכים להשתמש במחלקת Animation
. הקובץ xml שמכיל את הלוגיקה של האנימציה נטען באמצעות המחלקה AnimationUtils על ידי קריאה לפונקציית loadAnimation()
. הקטע הבא מציג את היישום של זה.
Animation animation;
animation = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.sample_animation);
כדי להתחיל את האנימציה עלינו לקרוא לפונקציית startAnimation()
על הרכיב UI כפי שמוצג בקטע למטה:
sampleTextView.startAnimation(animation);
כאן אנו מבצעים את האנימציה על רכיב textview על ידי מעבר סוג האנימציה כפרמטר.
הגדרת מאזיני האנימציה
זה נדרש רק אם נרצה להאזין לאירועים כמו התחלה, סיום או חזרה. לשם כך על הפעילות ליישם AnimationListener ולעקוב אחרי השיטות הבאות.
- onAnimationStart: זה יופעל פעם אחת בהתחלת האנימציה
- onAnimationEnd: זה יופעל פעם אחת בסיום האנימציה
- onAnimationRepeat: זה יופעל אם האנימציה חוזרת
מבנה פרויקט אנימציה של אנדרואיד
כפי שאתה רואה, כל xml של כל סוגי האנימציה העיקריים שנכללו למעלה.
קוד XML לדוגמאות אנימציה של Android
כאן אני מספק קוד לדוגמא לרוב האנימציות הנפוצות באנדרואיד.
אנימציית הצצה
fade_in.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<alpha
android:duration="1000"
android:fromAlpha="0.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="1.0" />
</set>
כאן אלפא מתייחס לאטימות של עצם. עצם עם ערכי אלפא נמוכים הוא יותר שקוף, בעוד שעצם עם ערכי אלפא גבוהים הוא פחות שקוף, יותר אטום. אנימציית ההצצה היא פשוטה אך ורק הגברת ערך אלפא מ-0 ל-1.
אנימציית פעוטה
fade_out.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<alpha
android:duration="1000"
android:fromAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="0.0" />
</set>
אנימציית הפעוטה באנדרואיד היא בדיוק ההפך לאנימציית ההצצה, בה עלינו להפחית את ערך האלפא מ-1 ל-0.
אנימציה של התערבות צלילים חוצים
התערבות צלילים חוצים מבצעת אנימציה של התערבות צלילים באמצעות עליית הצליל ב-TextView אחת בעוד ש-TextView אחרת יורדת בצלילה. זה ניתן לבצע על ידי שימוש בקבצי fade_in.xml
ו-fade_out.xml
על שתי ה-TextViews. הקוד יידון ב-MainActivity.java
אנימציה של הבהוב
blink.xml
<set xmlns:android="https://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="0.0"
android:toAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:duration="600"
android:repeatMode="reverse"
android:repeatCount="infinite"/>
</set>
כאן עליית הצליל והירידה בצלילה מבוצעות באופן אינסופי במצב הפוך בכל פעם.
אנימציה של התקרבות
zoom_in.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<scale
xmlns:android="https://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="3"
android:toYScale="3" >
</scale>
</set>
אנו משתמשים ב־pivotX="50%"
ו־pivotY="50%"
כדי לבצע התקרבות מהמרכז של האלמנט.
אנימציה של התרחקות
zoom_out.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<scale
xmlns:android="https://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.5"
android:toYScale="0.5" >
</scale>
</set>
שים לב ש-android:from ו-android:to הם נגדיים בקובץ zoom_in.xml
ו-zoom_out.xml
.
אנימצית סיבוב
rotate.xml
<set xmlns:android="https://schemas.android.com/apk/res/android">
<rotate android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="600"
android:repeatMode="restart"
android:repeatCount="infinite"
android:interpolator="@android:anim/cycle_interpolator"/>
</set>
A from/toDegrees tag is used here to specify the degrees and a cyclic interpolator is used.
אנימציה של הזזה
move.xml
<set
xmlns:android="https://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:fillAfter="true">
<translate
android:fromXDelta="0%p"
android:toXDelta="75%p"
android:duration="800" />
</set>
אנימציה של החלקה למעלה
slide_up.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:interpolator="@android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="0.0" />
</set>
זה מתבצע על ידי הגדרת android:fromYScale="1.0″ ו-android:toYScale="0.0″ בתוך תגית scale.
אנימציה של החלקה למטה
slide_down.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
זה פשוט ההפך של slide_up.xml
.
אנימציה של התקפה
bounce.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="@android:anim/bounce_interpolator">
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
כאן משתמשים ב interpolator שנקרא bounce כדי להשלים את האנימציה בסגנון התקפה.
אנימציה סידורית
sequential.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="@android:anim/linear_interpolator" >
<!-- Move -->
<translate
android:duration="800"
android:fillAfter="true"
android:fromXDelta="0%p"
android:startOffset="300"
android:toXDelta="75%p" />
<translate
android:duration="800"
android:fillAfter="true"
android:fromYDelta="0%p"
android:startOffset="1100"
android:toYDelta="70%p" />
<translate
android:duration="800"
android:fillAfter="true"
android:fromXDelta="0%p"
android:startOffset="1900"
android:toXDelta="-75%p" />
<translate
android:duration="800"
android:fillAfter="true"
android:fromYDelta="0%p"
android:startOffset="2700"
android:toYDelta="-70%p" />
<!-- Rotate 360 degrees -->
<rotate
android:duration="1000"
android:fromDegrees="0"
android:interpolator="@android:anim/cycle_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="3800"
android:repeatCount="infinite"
android:repeatMode="restart"
android:toDegrees="360" />
</set>
כאן נעשה שימוש ב־android:startOffset שונה מהמעברים כדי לשמור על הסדר הסידורי שלהם.
אנימציה משולבת
together.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="@android:anim/linear_interpolator" >
<!-- Move -->
<scale
xmlns:android="https://schemas.android.com/apk/res/android"
android:duration="4000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="4"
android:toYScale="4" >
</scale>
<!-- Rotate 180 degrees -->
<rotate
android:duration="500"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="restart"
android:toDegrees="360" />
</set>
כאן android:startOffset
הוסר כדי לאפשר להם לקרות בו זמנית.
קוד
ה־activity_main.xml
כולל ScrollView
ו־RelativeLayout
(נדבר על זה בהדרכה אחרת) שבו כל סוג אנימציה נקרא על הטקסט באמצעות הכפתורים המתאימים שלהם. קובץ ה-xml מוצג למטה: activity_main.xml
<ScrollView xmlns:android="https://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/btnFadeIn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="Fade In" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Fade In"
android:id="@+id/txt_fade_in"
android:layout_alignBottom="@+id/btnFadeIn"
android:layout_alignLeft="@+id/txt_fade_out"
android:layout_alignStart="@+id/txt_fade_out" />
<Button
android:id="@+id/btnFadeOut"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_below="@id/btnFadeIn"
android:text="Fade Out" />
<Button
android:id="@+id/btnCrossFade"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_below="@id/btnFadeOut"
android:text="Cross Fade" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Cross Fade In"
android:id="@+id/txt_out"
android:visibility="gone"
android:layout_gravity="center_horizontal"
android:layout_alignTop="@+id/txt_in"
android:layout_alignLeft="@+id/txt_in"
android:layout_alignStart="@+id/txt_in" />
<Button
android:id="@+id/btnBlink"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_below="@id/btnCrossFade"
android:text="Blink" />
<Button
android:id="@+id/btnZoomIn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_below="@id/btnBlink"
android:text="Zoom In" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Blink"
android:id="@+id/txt_blink"
android:layout_gravity="center_horizontal"
android:layout_alignBottom="@+id/btnBlink"
android:layout_alignLeft="@+id/txt_zoom_in"
android:layout_alignStart="@+id/txt_zoom_in" />
<Button
android:id="@+id/btnZoomOut"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_below="@id/btnZoomIn"
android:text="Zoom Out" />
<Button
android:id="@+id/btnRotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_below="@id/btnZoomOut"
android:text="Rotate" />
<Button
android:id="@+id/btnMove"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_below="@id/btnRotate"
android:text="Move" />
<Button
android:id="@+id/btnSlideUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_below="@id/btnMove"
android:text="Slide Up" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Fade Out"
android:id="@+id/txt_fade_out"
android:layout_gravity="center_horizontal"
android:layout_alignBottom="@+id/btnFadeOut"
android:layout_alignLeft="@+id/txt_in"
android:layout_alignStart="@+id/txt_in" />
<Button
android:id="@+id/btnSlideDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_below="@id/btnSlideUp"
android:text="Slide Down" />
<Button
android:id="@+id/btnBounce"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_below="@id/btnSlideDown"
android:text="Bounce" />
<Button
android:id="@+id/btnSequential"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_below="@id/btnBounce"
android:text="Sequential Animation" />
<Button
android:id="@+id/btnTogether"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/btnSequential"
android:layout_margin="5dp"
android:text="Together Animation" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Cross Fade Out"
android:id="@+id/txt_in"
android:layout_gravity="center_horizontal"
android:layout_alignBottom="@+id/btnCrossFade"
android:layout_alignLeft="@+id/txt_blink"
android:layout_alignStart="@+id/txt_blink" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Zoom In"
android:id="@+id/txt_zoom_in"
android:layout_alignBottom="@+id/btnZoomIn"
android:layout_alignLeft="@+id/txt_zoom_out"
android:layout_alignStart="@+id/txt_zoom_out" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Zoom Out"
android:id="@+id/txt_zoom_out"
android:layout_alignBottom="@+id/btnZoomOut"
android:layout_toRightOf="@+id/btnSequential"
android:layout_toEndOf="@+id/btnSequential" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Rotate"
android:id="@+id/txt_rotate"
android:layout_above="@+id/btnMove"
android:layout_toRightOf="@+id/btnSequential"
android:layout_toEndOf="@+id/btnSequential" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Move"
android:id="@+id/txt_move"
android:layout_alignBottom="@+id/btnMove"
android:layout_alignLeft="@+id/txt_slide_up"
android:layout_alignStart="@+id/txt_slide_up" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Slide Up"
android:id="@+id/txt_slide_up"
android:layout_alignBottom="@+id/btnSlideUp"
android:layout_toRightOf="@+id/btnSequential"
android:layout_toEndOf="@+id/btnSequential" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Slide Down"
android:id="@+id/txt_slide_down"
android:layout_alignBottom="@+id/btnSlideDown"
android:layout_alignLeft="@+id/txt_slide_up"
android:layout_alignStart="@+id/txt_slide_up" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Bounce"
android:id="@+id/txt_bounce"
android:layout_alignBottom="@+id/btnBounce"
android:layout_alignLeft="@+id/txt_slide_down"
android:layout_alignStart="@+id/txt_slide_down" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Sequential"
android:id="@+id/txt_seq"
android:layout_alignBottom="@+id/btnSequential"
android:layout_alignLeft="@+id/txt_bounce"
android:layout_alignStart="@+id/txt_bounce" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Together"
android:id="@+id/txt_tog"
android:layout_alignBottom="@+id/btnTogether"
android:layout_toRightOf="@+id/btnSequential"
android:layout_toEndOf="@+id/btnSequential" />
</RelativeLayout>
</ScrollView>
לסיכום, `RelativeLayout
`, כפי שהשם מרמז, הסדר של רכיבי ממשק המשתמש יחסיים זה לזה. בקובץ `MainActivity.java
` נמצאות האזנות ללחצנים כל קשורים לסוג ההנפשה שלהם. הקוד המקור שלו כתוב למטה.
package com.journaldev.animations;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends Activity {
Button btnFadeIn, btnFadeOut, btnCrossFade, btnBlink, btnZoomIn,
btnZoomOut, btnRotate, btnMove, btnSlideUp, btnSlideDown,
btnBounce, btnSequential, btnTogether;
Animation animFadeIn,animFadeOut,animBlink,animZoomIn,animZoomOut,animRotate
,animMove,animSlideUp,animSlideDown,animBounce,animSequential,animTogether,animCrossFadeIn,animCrossFadeOut;
TextView txtFadeIn,txtFadeOut,txtBlink,txtZoomIn,txtZoomOut,txtRotate,txtMove,txtSlideUp,
txtSlideDown,txtBounce,txtSeq,txtTog,txtIn,txtOut;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnFadeIn = (Button) findViewById(R.id.btnFadeIn);
btnFadeOut = (Button) findViewById(R.id.btnFadeOut);
btnCrossFade = (Button) findViewById(R.id.btnCrossFade);
btnBlink = (Button) findViewById(R.id.btnBlink);
btnZoomIn = (Button) findViewById(R.id.btnZoomIn);
btnZoomOut = (Button) findViewById(R.id.btnZoomOut);
btnRotate = (Button) findViewById(R.id.btnRotate);
btnMove = (Button) findViewById(R.id.btnMove);
btnSlideUp = (Button) findViewById(R.id.btnSlideUp);
btnSlideDown = (Button) findViewById(R.id.btnSlideDown);
btnBounce = (Button) findViewById(R.id.btnBounce);
btnSequential = (Button) findViewById(R.id.btnSequential);
btnTogether = (Button) findViewById(R.id.btnTogether);
txtFadeIn=(TextView)findViewById(R.id.txt_fade_in);
txtFadeOut=(TextView)findViewById(R.id.txt_fade_out);
txtBlink=(TextView)findViewById(R.id.txt_blink);
txtZoomIn=(TextView)findViewById(R.id.txt_zoom_in);
txtZoomOut=(TextView)findViewById(R.id.txt_zoom_out);
txtRotate=(TextView)findViewById(R.id.txt_rotate);
txtMove=(TextView)findViewById(R.id.txt_move);
txtSlideUp=(TextView)findViewById(R.id.txt_slide_up);
txtSlideDown=(TextView)findViewById(R.id.txt_slide_down);
txtBounce=(TextView)findViewById(R.id.txt_bounce);
txtSeq=(TextView)findViewById(R.id.txt_seq);
txtTog=(TextView)findViewById(R.id.txt_tog);
txtIn=(TextView)findViewById(R.id.txt_in);
txtOut=(TextView)findViewById(R.id.txt_out);
animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade_in);
animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade_in);
// הופעה
btnFadeIn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
txtFadeIn.setVisibility(View.VISIBLE);
txtFadeIn.startAnimation(animFadeIn);
}
});
animFadeOut = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade_out);
// נעלמות
btnFadeOut.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
txtFadeOut.setVisibility(View.VISIBLE);
txtFadeOut.startAnimation(animFadeOut);
}
});
animCrossFadeIn = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade_in);
animCrossFadeOut = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade_out);
// הופעה מצטלבת
btnCrossFade.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
txtOut.setVisibility(View.VISIBLE);
// התחלת הופעת הופעה
txtOut.startAnimation(animCrossFadeIn);
// התחלת הופעת נעלמות
txtIn.startAnimation(animCrossFadeOut);
}
});
animBlink = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.blink);
// הבהוב
btnBlink.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
txtBlink.setVisibility(View.VISIBLE);
txtBlink.startAnimation(animBlink);
}
});
animZoomIn = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.zoom_in);
// התרחקות
btnZoomIn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
txtZoomIn.setVisibility(View.VISIBLE);
txtZoomIn.startAnimation(animZoomIn);
}
});
animZoomOut = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.zoom_out);
// התקרבות
btnZoomOut.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
txtZoomOut.setVisibility(View.VISIBLE);
txtZoomOut.startAnimation(animZoomOut);
}
});
animRotate = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.rotate);
// Rotate
btnRotate.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
txtRotate.startAnimation(animRotate);
}
});
animMove = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.move);
// Move
btnMove.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
txtMove.startAnimation(animMove);
}
});
animSlideUp = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.slide_up);
// החלקה למעלה
btnSlideUp.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
txtSlideUp.startAnimation(animSlideUp);
}
});
animSlideDown = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.slide_down);
// החלקה למטה
btnSlideDown.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
txtSlideDown.startAnimation(animSlideDown);
}
});
animBounce = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.bounce);
// החלקה למטה
btnBounce.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
txtBounce.startAnimation(animBounce);
}
});
animSequential = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.sequential);
// Sequential
btnSequential.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
txtSeq.startAnimation(animSequential);
}
});
animTogether = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.together);
// Together
btnTogether.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
txtTog.startAnimation(animTogether);
}
});
}
}
כפי שדובר לפני כן, כל הנפשת TextView מתחילה על ידי הפעלת עצם ההנפשה הרצוי בו הלוגיקה נטענת על ידי AnimationUtils.loadAnimation(). ההנפשה המצטלבת כוללת שני TextViews שבאחד מתעלם ובשני מתחיל. למטה סרטון קצר המראה את כל ההנפשות באפליקציה שלנו. ההנפשה המשולבת מוצגת בתמונה למעלה. שים לב שההנפשות האלו כאשר הן רצות על אמולטור אינן חלקות, לכן מומלץ להריץ את האפליקציה על מכשיר רגיל. זה מסיים את המדריך לדוגמה של הנפשות אנדרואיד. ניתן להוריד את פרויקט הדוגמה להנפשות אנדרואיד מהקישור למטה.
Source:
https://www.digitalocean.com/community/tutorials/android-animation-example