Android中的動畫(待續)

Android中的動畫分爲三種:幀動畫(Frame Animation)、補間動畫(Tween Animation)和屬性動畫(Property Animation)。

幀動畫

就是通過一系列drawable依次顯示來模擬動畫效果。

girl.xml

<?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/girl_1"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_2"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_3"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_4"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_5"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_6"
        android:duration="400"/>
    <item
        android:drawable="@drawable/girl_7"
        android:duration="400"/>
    <item
        android:drawable="@drawable/girl_6"
        android:duration="400"/>
    <item
        android:drawable="@drawable/girl_7"
        android:duration="400"/>
    <item
        android:drawable="@drawable/girl_6"
        android:duration="400"/>
    <item
        android:drawable="@drawable/girl_7"
        android:duration="400"/>
    <item
        android:drawable="@drawable/girl_8"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_9"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_10"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_11"
        android:duration="200"/>

</animation-list>

MainActivity.java

public class MainActivity extends Activity {
    private ImageView iv;
    private AnimationDrawable mAnimationDrawable;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv = (ImageView) findViewById(R.id.iv);
        // 把xml文件的動畫資源設置爲iv背景
        iv.setBackgroundResource(R.drawable.girl);
        // 獲取設置的動畫資源。 執行可能需要花費一定的時間
        mAnimationDrawable = (AnimationDrawable) iv.getBackground();

    }

    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            mAnimationDrawable.start(); //異步操作
            return true;
        }
        return super.onTouchEvent(event);
    }
}

補間動畫

Android中共有四種補間動畫:透明度alpha、位移translate、縮放scale、旋轉rotate。並且,可以使用set來定義以上四種動作的混合效果。我們可以通過邏輯代碼來實現補間動畫,也可以通過配置xml文件來實現相同效果。
特性:智能應用與View對象,而且只支持一部分屬性。它只是改變了View對象繪製的位置,而沒有改變View對象本身的範圍

方法一、邏輯代碼

MainActivity.java

public class MainActivity extends Activity {
    private ImageView iv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv = (ImageView) findViewById(R.id.iv);
    }
    //透明度動畫 AlphaAnimation
    public void alpha(View view){
        AlphaAnimation aa = new AlphaAnimation(0.0f, 1.0f);
        aa.setDuration(2000);
        aa.setRepeatCount(1); //重複一次,總共兩次
        //aa.setRepeatCount(Animation.INFINITE); //無限循環播放
        aa.setRepeatMode(Animation.REVERSE); //倒序播放
        aa.setFillAfter(true); //停留在最後的效果
        iv.startAnimation(aa);  //開始動畫
    }

    //位移動畫 TranslateAnimation
    public void trans(View view){
        TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, -0.5f, 
                Animation.RELATIVE_TO_PARENT, 0.5f,  //父窗體寬度的50%
                Animation.RELATIVE_TO_PARENT, 0.0f, 
                Animation.RELATIVE_TO_PARENT, 0.0f);
        ta.setDuration(2000);
        ta.setRepeatCount(1);
        ta.setRepeatMode(Animation.REVERSE);
        iv.startAnimation(ta);
    }

    //縮放動畫 ScaleAnimation
    public void scale(View view){
        ScaleAnimation sa = new ScaleAnimation(0.1f, 2.0f, 0.1f, 2.0f, Animation.RELATIVE_TO_SELF, 
                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        sa.setDuration(2000);
        sa.setRepeatCount(1);
        sa.setRepeatMode(Animation.REVERSE);
        sa.setFillAfter(true);
        iv.startAnimation(sa);
    }

    //旋轉動畫 RotateAnimation
    public void rotate(View view){
        RotateAnimation ra = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF,
                0.0f, Animation.RELATIVE_TO_SELF, 0.0f);
        ra.setDuration(2000);
        ra.setRepeatCount(1);
        ra.setRepeatMode(Animation.REVERSE);
        iv.startAnimation(ra);
    }

    //動畫組合 AnimationSet
    public void set(View view){
        AnimationSet set = new AnimationSet(false);

        TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, -0.5f, 
                Animation.RELATIVE_TO_PARENT, 0.5f, 
                Animation.RELATIVE_TO_PARENT, -0.5f, 
                Animation.RELATIVE_TO_PARENT, 0.5f);
        ta.setDuration(2000);
        ta.setRepeatCount(1);
        ta.setRepeatMode(Animation.REVERSE);

        ScaleAnimation sa = new ScaleAnimation(0.1f, 2.0f, 0.1f, 2.0f, Animation.RELATIVE_TO_SELF, 
                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        sa.setDuration(2000);
        sa.setRepeatCount(1);
        sa.setRepeatMode(Animation.REVERSE);

        RotateAnimation ra = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF,
                0.0f, Animation.RELATIVE_TO_SELF, 0.0f);
        ra.setDuration(2000);
        ra.setRepeatCount(1);
        ra.setRepeatMode(Animation.REVERSE);

        set.addAnimation(ra);
        //set.addAnimation(ta);
        set.addAnimation(sa);
        iv.startAnimation(set);
    }
}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:onClick="rotate"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="旋轉" />

        <Button
            android:onClick="scale"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="縮放" />

        <Button
            android:onClick="trans"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="位移" />

        <Button
            android:onClick="alpha"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="透明度" />

           <Button
            android:onClick="set"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="組合動畫" />
    </LinearLayout>

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

方法二、配置xml文件

在res文件夾中創建anim文件夾進行配置,最後在MainActivity中調用AnimationUtils.loadAnimation方法即可。

<?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="2000"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:fillAfter="true"
    >
</alpha>
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="-50%p"
    android:toXDelta="50%p"
    android:fromYDelta="0"
    android:toYDelta="0"
    android:duration="2000"
    android:repeatCount="1"
    android:repeatMode="reverse">

</translate>
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="2000"
    android:repeatCount="1"
    android:repeatMode="reverse" >

</rotate>
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.1"
    android:toXScale="2.0"
    android:fromYScale="0.1"
    android:toYScale="2.0"
    android:duration="2000"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="1"
    android:repeatMode="reverse" >

</scale>
<?xml version="1.0" encoding="utf-8"?>
<set>

    <alpha
   xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fillAfter="true"
        android:fromAlpha="0.0"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:toAlpha="1.0" >
    </alpha>

    <rotate       xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:toDegrees="360" >
    </rotate>

    <scale       xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fromXScale="0.1"
        android:fromYScale="0.1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:toXScale="2.0"
        android:toYScale="2.0" >
    </scale>

    <translate      xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fromXDelta="-50%p"
        android:fromYDelta="0"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:toXDelta="50%p"
        android:toYDelta="0" >
    </translate>

</set>

MainActivity.java

public class MainActivity extends Activity {
    private ImageView iv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv = (ImageView) findViewById(R.id.iv);
    }
    //透明度動畫
    public void alpha(View view){
        Animation aa = AnimationUtils.loadAnimation(this, R.anim.alpha);
        iv.startAnimation(aa);
    }
    //位移動畫
    public void trans(View view){
        Animation ta = AnimationUtils.loadAnimation(this, R.anim.trans);
        iv.startAnimation(ta);
    }
    //縮放動畫
    public void scale(View view){
        Animation sa = AnimationUtils.loadAnimation(this, R.anim.scale);
        iv.startAnimation(sa);
    }

    //旋轉動畫
    public void rotate(View view){
        Animation ra = AnimationUtils.loadAnimation(this, R.anim.rotate);
        iv.startAnimation(ra);
    }
    //動畫組合
    public void set(View view){
        Animation set = AnimationUtils.loadAnimation(this, R.anim.set);
        iv.startAnimation(set);
    }
}

屬性動畫

特性:可改變空間的屬性,如位置、大小等。

(待續)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章