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) {}

})

3.屬性動畫

下一個動畫類型的起始狀態即爲上一個動畫類型結束的狀態，推薦使用

res/animator/xxx.xml

有animator、objectAnimator、set三個節點

<objectAnimator

    android:propertyName="translationX"        //    xml方式只能寫一個方向，透明無方向。translationX代碼提示方法：iv.setTranslationX(translationX);

    android:valueFrom="0"

    android:valueTo="300"

    duration="2000"/>

 

ObjectAnimator animator = (ObjectAnimator)AnimatorInflater.loadAnimator(this, R.animator.xxx);

animator.setTarget(iv);

animator.start();

3.2    代碼實現屬性動畫

public void translate(View view) {

    ObjectAnimator animator = ObjectAnimator.ofFloat(iv, "translationX", float ... values);        //    float ... values：0, 300

    animator.setDuration(2000);

    animator.start();

}

 

public void translate(View view) {

    ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(iv,

                                                PropertyValuesHolder.ofFloat("translationX", 0, 300),        //

                                                PropertyValuesHolder.ofFloat("translationY", 0, 300));       //    PropertyValueHolder ... values

    animator.setDuration(2000);

    animator.setReaptCount(1);                                    //    可選

    animator.setReaptMode(Animation.REVERSE)         //    可選

    animator.start();

    參考translation的取值，可替換爲：

    scale；        "scaleX", 1, 2, 1

    alpha：        "alpha", 1, 0, 1

    rotate：        "rotationX", 0, 360    //    以X軸旋轉360度    還可取值"rotation"

}

 

3.3    屬性動畫監聽器

animator.addListener(new AnimatorListener() {

    

@Override

    public void onAnimationStart(Animator animator) {}

    @Override

    public void onAnimationRepeat(Animator animator) {}

    @Override

    public void onAnimationEnd(Animator animator) {}

    @Override

    public void onAnimationCancel(Animator animator) {}

});

 

3.4 屬性動畫集：

public void together(View view) {

    AnimatorSet set = new AnimatorSet();

    ...        //    設置時間等

    set.playTogether(Animator ... items);            //    同時執行

    

    set.playSequentially(Animator ... items);        //    前後調用

    set.start();

}