تستخدم الرسوم المتحركة في أندرويد لإعطاء واجهة المستخدم مظهرًا ثريًا وشعورًا. يمكن تنفيذ الرسوم المتحركة في تطبيقات أندرويد من خلال XML أو رمز أندرويد. في هذا البرنامج التعليمي للرسوم المتحركة في أندرويد، سنستخدم رموز XML لإضافة الرسوم المتحركة إلى تطبيقنا.
الرسوم المتحركة في أندرويد
الرسوم المتحركة في تطبيقات أندرويد هي عملية إنشاء حركة وتغيير شكل. الطرق الأساسية للرسوم المتحركة التي سنتعرض عليها في هذا البرنامج التعليمي هي:
- رسم الظهور
- رسم الاختفاء
- رسم الانتقال المتداخل
- رسم الوميض
- رسم التكبير
- رسم التصغير
- رسم الدوران
- رسم الحركة
- رسم الانزلاق لأعلى
- رسم الانزلاق لأسفل
- رسم الارتداد
- رسم التتابع
- رسم المجموعة
مثال على الرسم المتحرك في أندرويد بواسطة XML
نقوم بإنشاء مجلد موارد تحت مجلد res يسمى anim للحفاظ على جميع ملفات XML التي تحتوي على منطق الرسم المتحرك. يعرض الملف XML المبين أدناه نموذجًا لكود الرسم المتحرك في أندرويد. 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 : إنه معدل التغيير في الرسم المتحرك. يمكننا تحديد منحنيات التغير الخاصة بنا باستخدام الوقت كقيد. في الشيفرة البرمجية أعلاه ، يتم تعيين منحني تغيير مضمن
-
android:duration : مدة الرسم المتحرك التي يجب أن يكتمل فيها الرسم المتحرك. هنا هو 300 مللي ثانية. هذه هي عادة المدة المثلى لعرض الانتقال على الشاشة. يتم تعيين بداية ونهاية الرسم المتحرك باستخدام:
android:fromTRANSFORMATION android:toTRANSFORMATION -
TRANSFORMATION : هو التحويل الذي نرغب في تحديده. في حالتنا ، نبدأ بتحجيم x و y بقيمة 0 وننتهي بتحجيم x و y بقيمة 1
-
android:fillAfter : تحدد هذه الخاصية ما إذا كان يجب أن يكون العنصر مرئيًا أو مخفيًا في نهاية الرسم المتحرك. لقد قمنا بتعيينها كقيمة مرئية في الشيفرة البرمجية أعلاه. إذا تم تعيينها على القيمة false ، فإن العنصر يعود إلى حالته السابقة بعد الرسم المتحرك
-
android:startOffset : هو الوقت الذي يجب انتظاره قبل بدء الرسم المتحركة. يُستخدم هذا الخاصية بشكل رئيسي لتنفيذ عدة رسوم متحركة بتسلسل
-
android:repeatMode : هذا مفيد عندما ترغب في تكرار الرسم المتحركة
-
android:repeatCount : يعرف عدد مرات تكرار الرسم المتحركة. إذا قمنا بتعيين هذه القيمة على لانهائي، ستتكرر الرسوم المتحركة لا نهاية لها
تحميل الرسوم المتحركة عندما يتم النقر على عنصر واجهة المستخدم
هدفنا هو عرض رسم متحرك عند النقر على أي عنصر واجهة المستخدم (مثل TextView). لذلك نحتاج إلى استخدام فئة Animation. يتم تحميل ملف XML الذي يحتوي على منطق الرسم المتحرك باستخدام فئة AnimationUtils عن طريق استدعاء دالة loadAnimation(). يوضح المقتطف التالي هذا التنفيذ.
Animation animation;
animation = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.sample_animation);
لبدء الرسم المتحرك ، نحتاج إلى استدعاء دالة startAnimation() على عنصر واجهة المستخدم كما هو موضح في المقتطف التالي:
sampleTextView.startAnimation(animation);
هنا نقوم بتنفيذ الرسم المتحرك على عنصر TextView من خلال تمرير نوع الرسم المتحرك كمعلمة.
إعداد مستمعي الرسم المتحرك
هذا مطلوب فقط إذا كنا نرغب في الاستماع إلى أحداث مثل البدء والانتهاء أو التكرار. لهذا يجب أن ينفذ النشاط AnimationListener ويجب تجاوز الأساليب التالية.
- onAnimationStart: سيتم تنشيطها بمجرد بدء الرسم المتحرك
- onAnimationEnd: سيتم تنشيطها بمجرد انتهاء الرسم المتحرك
- onAnimationRepeat: سيتم تنشيطها إذا تكرر الرسم المتحرك
هيكل مشروع الرسم المتحرك في Android
كما ترى، لقد قمنا بتضمين الـ xml لجميع أنواع الرسوم المتحركة الرئيسية المشمولة أعلاه.
أمثلة على رموز XML لرسومات Android
هنا أقدم رمزًا عينيًا لمعظم الرسومات الشائعة في 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>
هنا، يشير alpha إلى شفافية الكائن. الكائن ذو قيم alpha أقل شفافية، بينما الكائن ذو قيم alpha أعلى أقل شفافية وأكثر غموضًا. رسم تلاشٍ للأعلى ليس سوى زيادة قيمة alpha من 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>
رسم تلاشٍ للأسفل في Android هو تمامًا عكس رسم التلاشي للأعلى، حيث نحتاج إلى خفض قيمة alpha من 1 إلى 0.
تحوّل الصور المتتالية
تتم عملية التحوّل الصور المتتالية عن طريق تطبيق تأثير التلاشي على TextView الأول في حين يتم تلاشي TextView الثاني. يمكن تنفيذ ذلك باستخدام ملفي fade_in.xml و fade_out.xml على الـ TextViewين. سيتم شرح الشفرة في 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>
هنا يتم استخدام معامل الارتداد لإكمال الرسم المتحرك بشكل ارتدادي.
تأثير الرسم المتسلسل
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);
}
});
}
}
كما تم مناقشته سابقًا ، يتم بدء تشغيل كل تأثير نص بتنشيط كائن الرسم المتحرك المعني الذي يتم تحميله بواسطة طريقة AnimationUtils.loadAnimation(). يتكون تأثير الانتقال التدريجي من اثنين من عناصر TextView حيث يتلاشى أحدهما ويظهر الآخر. أدناه فيديو قصير يوضح جميع التأثيرات في تطبيقنا. 
يمكن رؤية التأثير المجتمع في الصورة أعلاه. يرجى ملاحظة أن هذه التأثيرات عند تشغيلها على محاكي قد لا تكون سلسة ، لذا يُوصى بتشغيل التطبيق على جهاز عادي. وهذا ينهي مثال تعليمي حول تأثيرات الاندرويد. يمكنك تنزيل مشروع مثال تأثيرات الاندرويد من الرابط أدناه.
Source:
https://www.digitalocean.com/community/tutorials/android-animation-example