1. 程式人生 > >android 屬性動畫之 ObjectAnimator

android 屬性動畫之 ObjectAnimator

一、ObjectAnimator展示單個動畫效果

1、translate

    //view從原始位置減速下移500,無限迴圈
    private void translationY1(View view) {
        ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationY", 0f, 500f);
        animator.setInterpolator(new DecelerateInterpolator());//減速
        animator.setRepeatCount(-1
);//設定動畫重複次數,-1表示無限 animator.setRepeatMode(ValueAnimator.REVERSE);//設定動畫迴圈模式 animator.setDuration(1000); animator.start(); }
    // view從螢幕頂端下移500
    private void translationY(View view){
        ObjectAnimator animator = ObjectAnimator.ofFloat(view,"Y",0f,500f);
        animator.setDuration(1000
); animator.start(); }

2、scale

    //view從原始尺寸縮小為0
    private void scale_smalller(View view){
        ObjectAnimator animatorX = ObjectAnimator.ofFloat(view, "scaleX", 1f, 0f);
        ObjectAnimator animatorY = ObjectAnimator.ofFloat(view, "scaleY", 1f, 0f);
        AnimatorSet animatorSet = new
AnimatorSet(); animatorSet.setDuration(2000); animatorSet.play(animatorX).with(animatorY);//兩個動畫同時開始 animatorSet.start(); }
    //view從原始尺寸變大為原來2倍大
    private void scale_bigger(View view){
        ObjectAnimator animatorX = ObjectAnimator.ofFloat(view, "scaleX", 1f, 2f);
        ObjectAnimator animatorY = ObjectAnimator.ofFloat(view, "scaleY", 1f, 2f);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(2000);
        animatorSet.play(animatorX).with(animatorY);//兩個動畫同時開始
        animatorSet.start();
    }
    //view先從原始尺寸縮小為0,再變大為原來2倍大
    private void scaleToSmallToBig(View view){
        ObjectAnimator animatorX1 = ObjectAnimator.ofFloat(view, "scaleX", 1f, 0f);
        ObjectAnimator animatorY1 = ObjectAnimator.ofFloat(view, "scaleY", 1f, 0f);
        ObjectAnimator animatorX2 = ObjectAnimator.ofFloat(view, "scaleX", 0f, 2f);
        ObjectAnimator animatorY2 = ObjectAnimator.ofFloat(view, "scaleY", 0f, 2f);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(3000);
        animatorSet.play(animatorX1).with(animatorY1);
        animatorSet.play(animatorX2).with(animatorY2).after(animatorX1);
        animatorSet.start();
    }

3、alpha

    //view透明度從1變到0.3
    private void changeAlpha(View view) {
        ObjectAnimator animator = ObjectAnimator.ofFloat(view, "alpha", 1f, 0.3f);
        animator.setDuration(1000);
        animator.start();
    }

4、rotate

    //view順時針旋轉360度
    private void rotate(View view){
        ObjectAnimator animator = ObjectAnimator .ofFloat(view, "rotation", 0f, 360f);
        animator.setDuration(1000);
        animator.start();
    }

二、ObjectAnimator展示多個動畫效果

1、按順序播放動畫

    //按順序播放動畫:view先右移500,再下移500,最後旋轉360,每個動畫耗時0.5s
    private void playAnimatorSequentially(View view){
        ObjectAnimator animator1 = ObjectAnimator.ofFloat(view, "translationX", 0f, 500f);
        ObjectAnimator animator2 = ObjectAnimator.ofFloat(view, "translationY", 0f, 500f);
        ObjectAnimator animator3 = ObjectAnimator .ofFloat(view, "rotation", 0f, 360f);
        AnimatorSet animatorSet = new AnimatorSet() ;
        animatorSet.playSequentially(animator1,animator2,animator3);
        animatorSet.setDuration(500);
        animatorSet.start();
    }

2、若干動畫同時進行

     //3個動畫同時進行,一共耗時2s
    private void playAnimatorTogether(View view){
        ObjectAnimator animator1 = ObjectAnimator.ofFloat(view, "translationX", 0f, 500f);
        ObjectAnimator animator2 = ObjectAnimator.ofFloat(view, "translationY", 0f, 500f);
        ObjectAnimator animator3 = ObjectAnimator .ofFloat(view, "rotation", 0f, 360f);
        AnimatorSet set =new AnimatorSet();
        set.playTogether(animator1,animator2,animator3);
        set.setDuration(2000);
        set.start();
    }

三、為動畫新增監聽事件

方式1(四個方法全實現):

    //為動畫新增監聽事件方式一(四個方法全實現)
    private void addAnimatorListener1(View view){
        ObjectAnimator animator = ObjectAnimator.ofFloat(view, "Y", 0f, 1000f);
        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {
                //動畫開始前呼叫此方法
                Toast.makeText(ObjectAnimatorActivity.this, "start", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAnimationEnd(Animator animator) {
                //動畫結束後呼叫此方法
                Toast.makeText(ObjectAnimatorActivity.this, "end", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
        animator.setDuration(3000);
        animator.start();
    }

方式2(選擇實現方法)

    //為動畫新增監聽事件方式二(選擇實現方法)
    private void addAnimatorListener2(View view){
        ObjectAnimator animator = ObjectAnimator.ofFloat(view, "Y", 0f, 1000f);
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                //動畫開始前呼叫此方法
                Toast.makeText(ObjectAnimatorActivity.this, "start", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                //動畫結束後呼叫此方法
                Toast.makeText(ObjectAnimatorActivity.this, "end", Toast.LENGTH_SHORT).show();
            }
        });
        animator.setDuration(3000);
        animator.start();
    }

這裡貼一個使用ObjectAnimator實現經典彈球選單demo的程式碼

public class MainActivity extends Activity implements View.OnClickListener{

    private int[] res = {R.id.imageView_a,R.id.imageView_b,
                         R.id.imageView_c, R.id.imageView_d,
                         R.id.imageView_e,R.id.imageView_f,
                          R.id.imageView_g,R.id.imageView_h};

    private List<ImageView> imageViewList = new ArrayList<ImageView>();

    private boolean flag = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        for (int i = 0;i<res.length;i++){
            ImageView imageView = (ImageView) findViewById(res[i]);
            imageView.setOnClickListener(this);
            imageViewList.add(imageView);
        }
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.imageView_a:
                if (flag){ //第一次點選展開選單
                    startAnima();
                }else{
                    closeAnima();
                }
                break;
            default:
                Toast.makeText(this, "你點選了"+view.getId(),
                Toast.LENGTH_SHORT).show();
                break;
        }
    }

    //展開選單
    private void startAnima() {
        for (int i = 1;i<res.length;i++){
            ObjectAnimator animator = 
ObjectAnimator.ofFloat(imageViewList.get(i),
                    "TranslationY",0f,i*200f);
            animator.setDuration(1000);
            //新增一個模仿彈球落地的動畫效果
            animator.setInterpolator(new BounceInterpolator());
            //每個延時0.3s依次落下
            animator.setStartDelay(i*300);
            animator.start();
            flag = false;
        }
    }

    //回收選單
    private void closeAnima() {
        for (int i = 1;i<res.length;i++){
            ObjectAnimator animator =  
  ObjectAnimator.ofFloat(imageViewList.get(i),
                    "TranslationY",i*200f,0f);
            animator.setDuration(500);
            //新增一個模仿彈球落地的動畫效果
            animator.setInterpolator(new BounceInterpolator());
            //每個延時0.3s依次回收
            animator.setStartDelay(i*300);
            animator.start();
            flag = true;
        }

    }
}

佈局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sqf.objectanimatorsample.MainActivity">

    <ImageView
        android:id="@+id/imageView_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:src="@drawable/b"/>
    <ImageView
        android:id="@+id/imageView_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:src="@drawable/c"/>
    <ImageView
        android:id="@+id/imageView_d"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:src="@drawable/d"/>
    <ImageView
        android:id="@+id/imageView_e"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:src="@drawable/e"/>
    <ImageView
        android:id="@+id/imageView_f"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:src="@drawable/f"/>
    <ImageView
        android:id="@+id/imageView_g"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:src="@drawable/g"/>
    <ImageView
        android:id="@+id/imageView_h"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:src="@drawable/h"/>
    <ImageView
        android:id="@+id/imageView_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/a"/>
</FrameLayout>