1 Animation وهو عبارة عن مؤثرات يتم تطبيقها على الـ View نفسه كتطبيق مؤثر تحرك ImageView من الاعلى للأسفل على سبيل المثال أو ظهور Button من الخفاء أو عمل Scale لـ TextView معين كلها مؤثرات تتسم بأنها تطبق على الـ View مباشرة ككل .
الـ View Animation
كما ذكرنا أن الـ view animation هو نظام يوفر لك عدة مؤثرات حركية يمكن تطبيقها على الـ view بشكل عامل منها الـتدوير والتكبير والتصغير والتحريك والشفافية وسااضع لكم مجموعه من الحركات الجاهزه التي يمكنك استخدامها في مشاريعك
مكن تنفيذ التأثير السابق باستخدام xml أو جافا وسنوضح من خلال XML ..
سوف تقوم بإنشاء مجلد anim داخل مجلد res
بداخل مجلد anim قم بعمل ملف xml جديد واعطه اى اسم تحبه مثال: anim_blink
بعد إنشاء الملف ضف هذه الاكواد
1: anim_blink
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://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>
2: anim_bounce
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://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>
3: anim_fade_in
<?xml version="1.0" encoding="utf-8"?>
<alpha
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="500"
/>
4:anim_fade_out
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
5:anim_move
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="@android:anim/linear_interpolator">
<translate
android:duration="800"
android:fromXDelta="0%p"
android:toXDelta="75%p" />
</set>
6:anim_rotate
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://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:interpolator="@android:anim/cycle_interpolator"/>
</set>7: anim_slide_bottom
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="@android:integer/config_mediumAnimTime"
android:fromYDelta="0%p"
android:interpolator="@android:anim/accelerate_interpolator"
android:toYDelta="100%p"/>
</set>
8:anim_slide_left
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromXDelta="100%p"
android:toXDelta="0" />
9:anim_slide_right
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromXDelta="0"
android:toXDelta="100%p" />
10:anim_slide_up
<set xmlns:android="http://schemas.android.com/apk/res/android">11:anim_zoom_in
<translate
android:duration="@android:integer/config_mediumAnimTime"
android:fromYDelta="100%"
android:interpolator="@android:anim/accelerate_interpolator"
android:toYDelta="0" />
</set>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale xmlns:android="http://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" />
</set>
12:anim_zoom_out
<?xml version="1.0" encoding="utf-8"?>هذه كانت ملفات الxmlالخاصة بالanimation وسأضع لكم الملفات الخاصه باتصميم Layout
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale xmlns:android="http://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" />
</set>
Layout
<?xml version="1.0" encoding="utf-8"?>وايضا سأضيف لكم ملفات الjavaالخاصه بربط ملفات الانيميشن بالعناصر الموجوده في الlayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:gravity="center">
<ImageView
android:id="@+id/object"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:src="@drawable/brandlogo" />
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="@+id/btnFadeIn"
android:layout_width="00dp"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:onClick="fadeInAnim"
android:text="Fade In"
android:textAppearance="@style/TextAppearance.AppCompat" />
<Button
android:id="@+id/btnFadeOut"
android:layout_width="00dp"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:onClick="fadeOutAnim"
android:text="Fade Out"
android:textAppearance="@style/TextAppearance.AppCompat" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="@+id/btnBounce"
android:layout_width="00dp"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:onClick="bounce"
android:text="Bounce"
android:textAppearance="@style/TextAppearance.AppCompat" />
<Button
android:id="@+id/btnBlink"
android:layout_width="00dp"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:onClick="blink"
android:text="Blink"
android:textAppearance="@style/TextAppearance.AppCompat" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="@+id/btnMove"
android:layout_width="00dp"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:onClick="move"
android:text="Move"
android:textAppearance="@style/TextAppearance.AppCompat" />
<Button
android:id="@+id/btnRotate"
android:layout_width="00dp"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:onClick="rotate"
android:text="Rotate"
android:textAppearance="@style/TextAppearance.AppCompat" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="@+id/btnSlideBottom"
android:layout_width="00dp"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:onClick="slideBottom"
android:text="Slide Bottom"
android:textAppearance="@style/TextAppearance.AppCompat" />
<Button
android:id="@+id/btnSlideUp"
android:layout_width="00dp"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:onClick="slideUp"
android:text="Slide Up"
android:textAppearance="@style/TextAppearance.AppCompat" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="@+id/btnSlideLeft"
android:layout_width="00dp"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:onClick="slideLeft"
android:text="Slide Left"
android:textAppearance="@style/TextAppearance.AppCompat" />
<Button
android:id="@+id/btnSlideRight"
android:layout_width="00dp"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:onClick="slideRight"
android:text="Slide Right"
android:textAppearance="@style/TextAppearance.AppCompat" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="@+id/btnZoomIn"
android:layout_width="00dp"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:onClick="zoomIn"
android:text="Zoom In"
android:textAppearance="@style/TextAppearance.AppCompat" />
<Button
android:id="@+id/btnZoomOut"
android:layout_width="00dp"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:onClick="zoomOut"
android:text="Zoom Out"
android:textAppearance="@style/TextAppearance.AppCompat" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
وانا في حالتي هذه اضفت الحركه على صوره ImageViewانت يمكنك اضافتها على اي عنصر تريده بالlayout
ملف الجافا
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
public class MainActivityAnimation2 extends AppCompatActivity {
ImageView object;
Animation anim;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.example_animation2);
object = (ImageView) findViewById(R.id.object);
}
public void fadeInAnim(View view) {
anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.anim_fade_in);
object.startAnimation(anim);
}
public void fadeOutAnim(View view) {
anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.anim_fade_out);
object.startAnimation(anim);
}
public void bounce(View view) {
anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.anim_bounce);
object.startAnimation(anim);
}
public void blink(View view) {
anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.anim_blink);
object.startAnimation(anim);
}
public void move(View view) {
anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.anim_move);
object.startAnimation(anim);
}
public void rotate(View view) {
anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.anim_rotate);
object.startAnimation(anim);
}
public void slideBottom(View view) {
anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.anim_slide_bottom);
object.startAnimation(anim);
}
public void slideUp(View view) {
anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.anim_slide_up);
object.startAnimation(anim);
}
public void slideLeft(View view) {
anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.anim_slide_left);
object.startAnimation(anim);
}
public void slideRight(View view) {
anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.anim_slide_right);
object.startAnimation(anim);
}
public void zoomIn(View view) {
anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.anim_zoom_in);
object.startAnimation(anim);
}
public void zoomOut(View view) {
anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.anim_zoom_out);
object.startAnimation(anim);
}
}
التصنيف:
اكواد