1. 程式人生 > >Android 動畫Animation

Android 動畫Animation

開發十年,就只剩下這套架構體系了! >>>   

動畫分為檢視動畫(view animation)和屬性動畫(property animation),檢視動畫又分為幀動畫和補間動畫

檢視動畫控制元件(iv)點選事件(OnClickListener介面)觸發位置在原位置

1.幀動畫(Frame animation)

res/drawable/xxx.xml

<animation-list ... android:oneshot="true">    //    false

    <item android:drawable="@drawable/..."

              android:duration="200"/>    //    顯示時間

    ...    //    按先後順序寫

</animation-list>

 

iv.setBackgroundResource(R.drawable.xxx);

((AnimationDrawable)iv.getBackground()).start();    //    View類的start()

 

2.補間動畫(Tween animation)

分為平移、縮放、透明、旋轉和混合

res/anim/xxx.xml

a.平移(TranslateAnimation)

<translate ...

    android:fromXDelta="0"

    android:fromYDelta="0"    //圖片起始位置座標(00為左上角)

    android:toXDelta="500"

    android:toYDelta="500"

    android:duration="2000"    //    5個必要屬性

    android:fillAfter="true"       //    保持動畫最後那個狀態

    android:repeatCount="1"   //    執行兩次,"infinite":永久

    android:repeatMode="restart"/>    //    "reverse"    兩種重複模式

 

pubic void translate(View view) {

    iv.startAnimation(AnimationUtils.loadAnimation(this, R.anim.xxx));

}

a.2    程式碼構造平移動畫

public void translate(View view){

    TranslateAnimation animation = new TranslateAnimation(fromXDelta, toXDelta, fromYDelta, toYDelta);    //    float

    //    fromXDelta = toXDelta = fromYDelta = 0;toYDelta = -500;    //    移動Y

    animation.setDuration(2000);

    animation.setFillAfter(true);

    animation.setRepeatCount(1);    //    Animation.INFINITE
    animation.setRepeatMode(Animation.RESTART);

    iv.startAnimation(animation);

 

    animation = new TranslateAnimation(

                        fromXType, fromXValue,    //    Animation.RELATIVE_TO_SELF, 0

                        toXType, toXValue,            //    Animation.RELATIVE_TO_PARENT, 0

                        fromYType, fromYValue,    //    Animation.RELATIVE_TO_SELF, 0

                        toYType, toYValue,            //    Animation.RELATIVE_TO_PARENT, 倍數

    );

    注意第四排引數,結束Y位置 = 原來動畫Y + toYValue*佈局的高度

    改第四排引數為://    Animation.RELATIVE_TO_SELF, 倍數    後,結束Y位置 = 原來動畫Y + toYValue*控制元件的高度/佈局的高度

}

 

b.縮放(ScalaAnimation)

<scale ...     //    屬性都是相對於圖片本身,1212是以圖片左上角為原點的縮放倍數

    android:fromXScale="0"        //    "1"

    android:toXScale="1"            //    "2"

    android:fromYScale="0"        //    "1"

    android:toYScale="1"            //    "2"

    android:duration="2000"      //    5個必要屬性

    android:povotX="50%"

    android:povotY="50%"         //縮放中心(預設為控制元件左上角),百分數:不能為小數,為控制元件寬/高的百分比

    android:fillAfter="true"       //    保持動畫最後那個狀態

    android:repeatCount="1"   //    執行兩次,"infinite":永久

    android:repeatMode="restart"/>    //    "reverse"    兩種重複模式

 

public void scale(View view) {

    iv.startAnimation(AnimationUtils.loadAnimation(this, R.anim.xxx));

}

 

b.2 程式碼實現縮放動畫

public void scale(View view) {

    每個動畫都有的屬性:

    1.構造方法     ScalAnimation animation = new ScalAnimation(fromX, toX, fromY, toY);    //    1, 0, 1, 0

    2.時間:        animation.setDuration(2000);

    3.是否停留    //    345可省略

    4.重複次數

    5.重複模式

    6.讓控制元件展示動畫        img.setAnimation(animation);

 

    animation = new ScalAnimation(1, 0, 1, 0, pivotX, pivotY);    //    pivotX = iv.getWidth()/2;    pivotY = iv.getHeight()/2;    //    iv表示控制元件

    animation = new ScalAnimation(1, 0, 1, 0,

                                                      pivotXType, pivotX,            //    Animation.RELATIVE_TO_SELF, 0.5f

                                                      pivotYType, pivotY);           //    Animation.RELATIVE_TO_PARENT, 0.5f

}

 

c.透明(AlphaAnimation)

<alpha ...

    android:fromAlpha="1"    //    完全不透明(原圖),[0,1]的小數,不能是百分數

    android:toAlpha="0"        //    完全透明(消失)

    android:duration="2000"/>

 

public void alpha(View view) {

    iv.startAnimation(AnimationUtils.loadAnimation(this, R.anim.xxx));

}

 

c.2 程式碼實現透明動畫

public void alpha(View view) {

    AlphaAnimation animation = new AlphaAnimation(1,0.2f);

    animation.setDuration(2000);

    animation.setFillAfter(true);

    iv.startAnimation(animation);

}

 

d.旋轉(RotateAnimation)

<rotate ...

    fromDegress="0"

    toDegress="360"

    pivotX="50%"    //    100%

    pivotY="50%"    //    100%

    duration="2000"/>

 

public void rotate(View view) {

    iv.startAnimation(AnimationUtils.loadAnimation(this, R.anim.xxx));

}

d.2 程式碼實現旋轉動畫

public void rotate(View view) {

    RotateAnimation animation = new RotateAnimation(0,360);

 

    animation = new RotateAnimation(0, -360, iv.getWidth()/2, iv.getHeight()/2);

    

    animation = new RotateAnimation(0, 720,

                                                          Animation.RELATIVE_TO_PARENT, 0.5f,

                                                          Animation.RELATIVE_TO_PARENT, 0.5f);    //    ps:    不是螢幕中心

    animation.setDuration(2000);

    iv.startAnimation(animation);

}

 

e.混合(AnimationSet) 

<set ... >        //    動畫集合

    <translate />

    <rotate    />

    ...

</set>

 

public void mix(View view) {

    iv.startAnimation(AnimationUtils.loadAnimation(this, R.anim.xxx));

}

 

e.2 程式碼實現動畫集合

AnimationSet set = new AnimationSet(false);        //    為true時set可設定所有型別動畫的屬性

set.addAnimation(translateAnimation);

...

iv.startAnimation(set);

 

2.2    動畫監聽器

animation.setAnimationListener(new AnimationListener() {

    @Override

    public void onAnimationStart(Animation animation) {}

    @Override

    public void onAnimationRepeat(Animation animation) {}

    @Override

    public void onAnimationEnd(Animation animation) {}

})