淺談Android變換動畫（Tween Animation）

淺談Android變換動畫（Tween Animation）

本文是基於慕課網simle淺笑老師相關視頻，自己做的整理筆記，相關鏈接如下，在此感謝老師和慕課網的分享 http://www.imooc.com/learn/379

標籤（空格分隔）： Android 動畫 慕課網

---

四種常用動畫

• Alpha ：漸變透明度動畫
• Scale ：漸變尺寸縮放動畫
• Translate :位置移動動畫
• Rotate :旋轉動畫

Tween Animation共同屬性

• Duration:動畫持續時間(單位：毫秒)
• fillAfter:設置爲true，動畫轉化在動畫結束後被應用
• fillBefore:設置爲true，動畫轉換在動畫開始前被應用
• interpolator:動畫插入其(加速、減速插入器)
• repateMode:順序重複/倒序重複
• startOffset:動畫之間的時間間隔

Animation實現方式

1. 配置文件(/res/anim)——alpha、scale、translate、rotate

示例代碼：

Animation scale = AnimationUtils.loadAnimation(TweenActivity.this,R.anim.scale_anim);
//開始動畫
img.startAnimation(scale)

1. Java代碼實現——AlphaAnimation、ScaleAnimation、TranslateAnimation、RotateAnimation

示例代碼：

    //創建Alpha動畫
    Animation alpha=new AlphaAnimation(0.1f,1.0f);
    //設置動畫時間爲5秒
    alpha.setDuration(5000);
    //開始播放
    img.startAnimation(alpha);

四種基礎動畫實現

1.AlphaAnimation（透明度動畫）

• fromAlpha：動畫起始時透明度
• toAlpha ：動畫終止時透明度

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="1000"
        android:fromAlpha="0.1"
        android:toAlpha="1.0">
    </alpha>
</set>

0.0 表示完全透明
1.0表示完全不透明

2.ScaleAnimation(縮放動畫)

• fromX,toX分別是起始和結束時x座標上的伸縮尺寸
• fromY,toY分別是起始和結束時y座標上的伸縮尺寸
• pivoX,piovY分別爲伸縮動畫相對於x,y座標開始的位置

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="2000"
        android:fillAfter="false"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0"/>
</set>

3.TranslateAnimation(位移動畫)

• fromXDeleta,fromYDelta分別是起始時X、Y的座標
• toXDelta,toYDelta分別是結束時X、Y的座標

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="3000"
        android:fromXDelta="10"
        android:fromYDelta="10"
        android:toXDelta="100"
        android:toYDelta="100"/>
</set>

4.RotateAnimation(旋轉動畫)

• fromDegress起始的角度
• toDegress終止的角度
• pivotX、pivotY分別爲旋轉動畫相對於x,y的座標開始位置

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="+360"/>
</set>

五、特效示例

1.示例一（續播1）

分別兩個動畫A和B，然後先播放動畫A，設置A的AnimationListener。當onAnimationEnd觸發（即A播放完畢）時，開始播放B。

loadAnimation = AnimationUtils.loadAnimation(this, R.anim.translate);
                image.startAnimation(loadAnimation);
                final Animation loadAnimation2 = AnimationUtils.loadAnimation(this, R.anim.rotate);
                loadAnimation.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        image.startAnimation(loadAnimation2);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });

2.示例二（續播2）

寫一個動畫集AnimationSet，在其中定義動畫A和B,爲動畫B設置startOffset,其值就是前一個動畫播放的所需時間。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="3000"
        android:fromAlpha="0.2"
        android:toAlpha="1.0"/>
    <alpha
        android:duration="3000"
        android:fromAlpha="1.0"
        android:startOffset="3000"
        android:toAlpha="0.2"
        />
</set>

3.示例三（循環閃爍）

利用Animation的setRepeatCount、setRepeatMode來實現動畫循環。

AlphaAnimation alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
                alphaAnimation.setDuration(100);
                alphaAnimation.setRepeatCount(10);
                //倒序重複REVERSE 正序重複RESTART
                alphaAnimation.setRepeatMode(Animation.REVERSE);
                image.startAnimation(alphaAnimation);

4.示例四（Activity切換動畫）

使用overridePendingTransition方法。
參數一：第二個activity進入動畫
參數二：第一個activity退出動畫

Intent intent = new Intent(MainActivity.this, MainActivity2.class);
                startActivity(intent);
                overridePendingTransition(R.anim.zoom_in, R.anim.zoom_out);

5.LayoutAnimation(佈局動畫)

爲View Groups添加動畫
使用LayoutAnimationController

ListActivity.java

public class ListActivity extends Activity {
    private ListView listView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.list_layout);
        listView = (ListView) findViewById(R.id.listView);
        List<String> list = new ArrayList<>();
        for (int i=0;i<20;i++) {
            list.add("慕課網" + i);
        }
        ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, list);
        listView.setAdapter(adapter);
        LayoutAnimationController lac = new LayoutAnimationController(AnimationUtils.loadAnimation(this, R.anim.zoom_in));
        lac.setOrder(LayoutAnimationController.ORDER_NORMAL);
        listView.setLayoutAnimation(lac);
        listView.startLayoutAnimation();
    }
}

6.FrameAnimation（逐幀動畫）

在drawable下新建一個XML文件
使用animation-list標籤來分組一個item標籤集合，
android:drawable 定義要顯示的圖片
android:duration 指定顯示它的時間（以毫秒爲單位）

anim_list.xml:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:drawable="@drawable/one"
        android:duration="500"/>
    <item
        android:drawable="@drawable/two"
        android:duration="500"/>
    <item
        android:drawable="@drawable/three"
        android:duration="500"/>
    <item
        android:drawable="@drawable/four"
        android:duration="500"/>
    <item
        android:drawable="@drawable/five"
        android:duration="500"/>
    <item
        android:drawable="@drawable/six"
        android:duration="500"/>

</animation-list>

MainActivity.java

image.setImageResource(R.drawable.anim_list);

在此輸入正文