属性动画-简单入门

转载请注明出处：http://blog.csdn.net/darling_R/article/details/55001593

动画在Android开发中很常见，适当增加动画效果能给用户带来不一样的体验效果，那么今天就来人事一下安卓中的动画之一：属性动画
写一个小demo练习一下属性动画，效果图如下：

首先来看一下ObjectAnimator，代码很简单：
1。水平位移

//第一个参数是操作动画的对象（控件），第二个是动画的属性（位移，旋转，翻转等），例如：translationX，是水平位移，rotation是旋转；第三个是可变参数，是操作其属性变化的范围，例如从0，移动到300的位置；
ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "translationX", 0F, 300F);
animator.setDuration(1500);//设置动画的时长
animator.setStartDelay(200);//设置动画延迟后执行
animator.start();//动画执行

2。竖直方向位移

ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "translationY", 0F, 300F);
animator.setDuration(1500);//设置动画的时长
animator.setStartDelay(200);//设置动画延迟后执行
animator.start();//动画执行

3.旋转

ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "rotation", 0F, 360F);
animator.setDuration(1500);//设置动画的时长
animator.setStartDelay(200);//设置动画延迟后执行
animator.start();//动画执行

这样写完，运行程序，动画会一起执行；当然还有两外一种写法，就是利用PropertyValuesHolder ：
其内部对动画进行了优化，效率更高一些，有兴趣的朋友可以看看源码；

 PropertyValuesHolder p1 = PropertyValuesHolder.ofFloat("translationX", 0f, 300f);
 PropertyValuesHolder p2 = PropertyValuesHolder.ofFloat("translationY", 0f, 300f);
 PropertyValuesHolder p3 = PropertyValuesHolder.ofFloat("rotation", 0f, 360f);
 ObjectAnimator.ofPropertyValuesHolder(imageView, p1, p2, p3).setDuration(1500).start();

如果想要动画分开执行，可以添加AnimatorSet。例如：

 AnimatorSet set = new AnimatorSet();
 set.playTogether(animator, animator1);//两个动画一起执行，
 set.play(animator2).after(animator);//动画animator2在动画animator执行之后再开始执行
 //还有before（在某个动画之前执行）
 //set.play(animator).with(animator1);//动画animator和动画animator1一起执行
 set.start();

利用动画能实现很多炫酷效果，例如弹出菜单：效果如上图所示，效果是不是很可以，其实代码很简单：

private void closeMenu() {
    for (int i = 1; i < img_list.size(); i++) {
       ObjectAnimator anim = ObjectAnimator.ofFloat(img_list.get(i), "translationY", i * 150f, 0f);
       anim.setDuration(300);
       anim.setStartDelay(i * 200);
       anim.start();
    }
        flag = false;

}

private void openMenu() {
    for (int i = 1; i < img_list.size(); i++) {
       ObjectAnimator anim = ObjectAnimator.ofFloat(img_list.get(i), "translationY", (i - 1) * 150f, i * 150f);
       anim.setDuration(300);
       anim.setStartDelay(i * 200);
       anim.start();
    }
    flag = true;
}

利用这两个方法就可以显示 菜单的开和关，其实就是使用了ObjectAnimator,多设置了一些动画属性，就可以实现这种弹出菜单效果，是不是很简单啊；

最后附上全部代码：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private ImageView imageView;
    private Button button11;

    private ObjectAnimator animator, animator1, animator2;
    private ArrayList<Button> bt_list = new ArrayList<>();
    private ArrayList<ImageView> img_list = new ArrayList<>();

    private int[] imgvs = new int[]{R.id.imageView1, R.id.imageView2, R.id.imageView3, R.id.imageView4, R.id.imageView5};
    private int[] bts = new int[]{R.id.button, R.id.button2, R.id.button3, R.id.button4, R.id.button7, R.id.button10};
    private boolean flag = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = (ImageView) findViewById(R.id.imageView);
        imageView.setOnClickListener(this);
        button11 = (Button) findViewById(R.id.button11);
        button11.setOnClickListener(this);
        for (int i = 0; i < imgvs.length; i++) {
            ImageView imageIview = (ImageView) findViewById(imgvs[i]);
            imageIview.setOnClickListener(this);
            img_list.add(imageIview);
        }

        for (int i = 0; i < bts.length; i++) {
            Button bt = (Button) findViewById(bts[i]);
            bt.setOnClickListener(this);
            bt_list.add(bt);
        }
        animator = ObjectAnimator.ofFloat(imageView, "translationX", 0F, 300F);
        animator.setDuration(1500);
        animator1 = ObjectAnimator.ofFloat(imageView, "translationY", 0F, 300F);
        animator1.setDuration(1500);
        animator2 = ObjectAnimator.ofFloat(imageView, "rotation", 0F, 360F);
        animator2.setDuration(1500);
    }

    private void startAnimPro() {
        PropertyValuesHolder p1 = PropertyValuesHolder.ofFloat("translationX", 0f, 300f);
        PropertyValuesHolder p2 = PropertyValuesHolder.ofFloat("translationY", 0f, 300f);
        PropertyValuesHolder p3 = PropertyValuesHolder.ofFloat("rotation", 0f, 360f);
        ObjectAnimator.ofPropertyValuesHolder(imageView, p1, p2, p3).setDuration(1500).start();
    }

    private void startAnimSet() {
        AnimatorSet set = new AnimatorSet();
//        set.playTogether(animator, animator1);
//        set.play(animator2).after(animator);
        set.play(animator).with(animator1);
        set.start();
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.button:
               animator.start();
                break;
            case R.id.button11:
                valueAnim();
                break;
            case R.id.button2:
                animator1.start();
                break;
            case R.id.button3:
                animator2.start();
                break;
            case R.id.button4:
                animator.start();
                animator1.start();
                animator2.start();
                break;
            case R.id.button7:
                startAnimPro();
                break;
            case R.id.button10:
                startAnimSet();
                break;
            case R.id.imageView:
                Toast.makeText(this, "imgv", Toast.LENGTH_SHORT).show();
                break;
            case R.id.imageView1:
                if (!flag) {
                    openMenu();
                } else {
                    closeMenu();
                }
                break;
            case R.id.imageView2:
                Toast.makeText(this, "imgv2", Toast.LENGTH_SHORT).show();
                break;
            case R.id.imageView3:
                Toast.makeText(this, "imgv3", Toast.LENGTH_SHORT).show();
                break;
            case R.id.imageView4:
                Toast.makeText(this, "imgv4", Toast.LENGTH_SHORT).show();
                break;
            case R.id.imageView5:
                Toast.makeText(this, "imgv5", Toast.LENGTH_SHORT).show();
                break;
        }
    }

    private void valueAnim() {
        ValueAnimator anim = ValueAnimator.ofInt(0, 60);
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                button11.setText(""+(int) valueAnimator.getAnimatedValue());
            }
        });
        anim.setDuration(5000);
        anim.start();
    }

    private void closeMenu() {
        for (int i = 1; i < img_list.size(); i++) {
            ObjectAnimator anim = ObjectAnimator.ofFloat(img_list.get(i), "translationY", i * 150f, 0f);
            anim.setDuration(300);
            anim.setStartDelay(i * 200);
            anim.start();
        }
        flag = false;

    }

    private void openMenu() {
        for (int i = 1; i < img_list.size(); i++) {
            ObjectAnimator anim = ObjectAnimator.ofFloat(img_list.get(i), "translationY", (i - 1) * 150f, i * 150f);
            anim.setDuration(300);
            anim.setStartDelay(i * 200);
            anim.start();
        }
        flag = true;
    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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.yh.attributeanimationdemo.MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        app:srcCompat="@mipmap/ic_launcher" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button"
        android:layout_marginLeft="17dp"
        android:layout_marginStart="17dp"
        android:layout_toEndOf="@+id/button"
        android:layout_toRightOf="@+id/button"
        android:text="TranslationY" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:text="TranslationX" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/button2"
        android:text="Totation" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button2"
        android:layout_toEndOf="@+id/button3"
        android:layout_toRightOf="@+id/button3"
        android:text="groups" />


    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        app:srcCompat="@mipmap/ic_launcher" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        app:srcCompat="@mipmap/ic_launcher" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        app:srcCompat="@mipmap/ic_launcher" />

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        app:srcCompat="@mipmap/ic_launcher" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        app:srcCompat="@mipmap/ic_launcher" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/button4"
        android:layout_alignRight="@+id/button4"
        android:layout_below="@+id/button3"
        android:text="PropertyValuesHolder" />

    <Button
        android:id="@+id/button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button7"
        android:layout_toEndOf="@+id/button7"
        android:layout_toRightOf="@+id/button7"
        android:text="AnimSet" />

    <Button
        android:id="@+id/button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button2"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="14dp"
        android:text="ValueAnim" />
</RelativeLayout>