Animation

Android中動畫Animation Overview

1. Drawable Animation(幀動畫)
2. View Animation
3. Property Animation

01-Drawable Animation(幀動畫)

1.XML文件的代碼方式實現: 核心類 AnimationDrawable

AnimationDrawable rocketAnimation;

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
  rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
  rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
}

public boolean onTouchEvent(MotionEvent event) {
  if (event.getAction() == MotionEvent.ACTION_DOWN) {
    rocketAnimation.start();
    return true;
  }
  return super.onTouchEvent(event);
}

//在res/drawable/中定義XML文件rocket_thrust.xml
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

注:把xml文件設置給Image控件屬性設置:

1. 通過XML來是實現:android:src="@drawable/frame_anim"
2. 通過代碼實現::iv.setImageResource(R.drawable.frame_anim);

2.直接以代碼的方式實現:

// 創建一個幀動畫
AnimationDrawable drawable = new AnimationDrawable();
// 添加一幀的動畫
drawable.addFrame(context.getResources()
    .getDrawable(R.drawable.desktop_rocket_launch_1), 200);
drawable.addFrame(context.getResources()
    .getDrawable(R.drawable.desktop_rocket_launch_2), 200);
 // 爲Imageview設置幀動畫
 rocketView.setImageDrawable(drawable);
 drawable.start();

02-View Animation(補間動畫)

注:

1.透明 : AlphaAnimation

//方式1:直接以代碼的方式實現
public void alpha1(View view) {
    /*
     * 參數1:從完全透明 啥都看不見 參數2:到完全不透明 啥的看的見
     */
    AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
    alphaAnimation.setDuration(100);
    // 設置重複次數
    alphaAnimation.setRepeatCount(Animation.INFINITE);
    // 設置重複模式
    alphaAnimation.setRepeatMode(Animation.REVERSE);
    // 讓ImageView執行這個動畫效果
    iv.startAnimation(alphaAnimation);

    // iv.setAnimation(alphaAnimation);
    // alphaAnimation.start(); 不兼容高版本

}

//方式2:XML文件的方式實現,XML文件定義在res/anim/中
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0"
    android:toAlpha="1"
    android:duration="2000"
    android:repeatCount="2"
    android:repeatMode="reverse"
    >
</alpha>
public void alpha2(View view){
    Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);
    iv.startAnimation(animation); 
}

2.平移: TranslateAnimation

public void translate(View view){
    /*
     * 座標系相對自己的
     * 參數1/2:從x的哪個座標到x的哪個座標
     * 參數3/4:從y的哪個座標到y的哪個座標
     */
    TranslateAnimation translateAnimation = new TranslateAnimation(0, 100, 0, 100);
    translateAnimation.setDuration(2000);
    //讓動畫保持執行完後的效果
    translateAnimation.setFillAfter(true);
    view2.startAnimation(translateAnimation);
}

3.縮放: ScaleAnimation

public void scale(View view){
    /*
     * 參數1:x方向從哪個倍數開始
     * 參數2:x方向到哪個倍數
     * 參數3:y方向從哪個倍數開始
     * 參數4:y向下到哪個倍數
     * 參數5:x中心的類型(x方向參考的座標系)
     * 參數6:中心點的x座標(如果參考自己,傳遞的是百分比)
     * 參數7:y中心的類型(y方向參考的座標系)
     * 參數8:中心點的y座標(如果參考自己,傳遞的是百分比)
     */
    ScaleAnimation scaleAnimation = new ScaleAnimation(0.1f, 10, 0.1f, 10, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.25f);
    scaleAnimation.setDuration(5000);
    iv.startAnimation(scaleAnimation);
}

4.旋轉: RotateAnimation

public void rotate(View view){
    RotateAnimation rotateAnimation = new RotateAnimation(0, 45, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0);
    //long duration = rotateAnimation.getDuration();
    rotateAnimation.setDuration(1000);
    rotateAnimation.setRepeatCount(Animation.INFINITE);
    rotateAnimation.setRepeatMode(Animation.REVERSE);
    rotateAnimation.setFillAfter(true);
    iv.startAnimation(rotateAnimation);
}

5.集合: AnimationSet

public void set(View view){
    AnimationSet animationSet = new AnimationSet(true);
    AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
    alphaAnimation.setDuration(1000);
    //設置重複次數
    alphaAnimation.setRepeatCount(Animation.INFINITE);
    //設置重複模式
    alphaAnimation.setRepeatMode(Animation.REVERSE);
    //將透明動畫添加到集合
    animationSet.addAnimation(alphaAnimation);

    RotateAnimation rotateAnimation = new RotateAnimation(0, 45, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0);
    rotateAnimation.setDuration(1000);
    rotateAnimation.setRepeatCount(Animation.INFINITE);
    rotateAnimation.setRepeatMode(Animation.REVERSE);
    //將旋轉動畫添加到集合
    animationSet.addAnimation(rotateAnimation);
    //讓ImageView執行動畫集合
    iv.startAnimation(animationSet);
}

03-Property Animation(屬性動畫)

1.透明 : ObjectAnimator-alpha

public void alpha1(View view) {
    // iv.setAlpha(alpha)
    /*
     * 參數1:要修改哪個控件 參數2:要修改的控件的屬性的名稱 參數3:要將屬性的值修改爲(可變參數)
     */
    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(iv, "alpha", 0, 1, 0.5f);
    objectAnimator.setDuration(2000);
    objectAnimator.start();
}
//方式一:以XML文件的方式實現,定義在res/animator/
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" 
android:propertyName="alpha"
android:duration="3000"
android:repeatCount="1"
android:valueFrom="0"
android:valueTo="1"
android:repeatMode="reverse"
android:startOffset="1000"
>
</objectAnimator>

public void alpha2(View view) {
    ObjectAnimator objectAnimator = (ObjectAnimator) AnimatorInflater.loadAnimator(this, R.animator.alpha_animtor);
    // 要作用在哪個控件上
    objectAnimator.setTarget(iv);
    objectAnimator.start();

}

2.平移,旋轉,縮放 : ObjectAnimator-alpha-translationX-rotationY

ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(iv, "translationX", 0,200);
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(iv, "scaleX", 1,0.1f);
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(iv, "rotationY", 0,10);

3.集合 : AnimatorSet

public void set(View view) {
    AnimatorSet animatorSet = new AnimatorSet();
    ObjectAnimator rotationX = ObjectAnimator.ofFloat(iv, "rotationX", 0, 45);
    rotationX.setDuration(1000);
    ObjectAnimator rotationY = ObjectAnimator.ofFloat(iv, "rotationY", 0, 45);
    rotationY.setDuration(1000);
    // 讓他們同時執行
    // animatorSet.playTogether(rotationX,rotationY);
    // 連續執行
    animatorSet.playSequentially(rotationX, rotationY);
    // 開始
    animatorSet.start();
}

4.ValueAnimator.

private void moveRocket2Original() {
    int startX = paramsRocket.x;
    int endX = 0;
    //只負責值的變化.
    ValueAnimator animatorX = ValueAnimator.ofInt(startX, endX);
    //值變化的監聽
    animatorX.addUpdateListener(new AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            int value = (Integer) animation.getAnimatedValue();
            paramsRocket.x = value;
            mWM.updateViewLayout(rocketView, paramsRocket);
        }
    });
    //動畫一個監聽
    animatorX.addListener(new AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {}
        @Override
        public void onAnimationRepeat(Animator animation) {}
        @Override
        public void onAnimationEnd(Animator animation) {
            rocketView.setImageResource(R.drawable.desktop_bg_2);
        }
        @Override
        public void onAnimationCancel(Animator animation) {}
    });
    animatorX.start();
}