1- View Animation

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">
    <translate
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromYDelta="100%"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toYDelta="0" />
</set> 
11:anim_zoom_in


<?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"?>
<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>
هذه كانت ملفات الxmlالخاصة بالanimation وسأضع لكم الملفات الخاصه باتصميم Layout

Layout


<?xml version="1.0" encoding="utf-8"?>
<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>
وايضا سأضيف لكم ملفات الjavaالخاصه بربط ملفات الانيميشن بالعناصر الموجوده في الlayout
وانا في حالتي هذه اضفت الحركه على صوره 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);
    }
}




ليست هناك تعليقات:

إرسال تعليق