Android开发笔记之属性动画

我们在开发过程中,单纯的界面跳转,切换显得沉闷枯燥,因此我们都会加入一些炫酷的动画效果,来丰富我们的app效果
安卓动画主要分为两大类;

1. 帧动画
2. 补间动画

---

帧动画主要是一组图片组合起来,实现我们想要的效果
直接在布局中写入

顺序显示动画文件：animation1.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 
    根标签为animation-list，其中oneshot代表着是否只展示一遍，设置为false会不停的循环播放动画
    根标签下，通过item标签对动画中的每一个图片进行声明
    android:duration 表示展示所用的该图片的时间长度
 -->
<animation-list
 xmlns:android="http://schemas.android.com/apk/res/android"
  android:oneshot="true">//false--true设置是否循环播放
 <item android:drawable="@drawable/icon1" android:duration="150"></item>
    <item android:drawable="@drawable/icon2" android:duration="150"></item>
    <item android:drawable="@drawable/icon3" android:duration="150"></item>
    <item android:drawable="@drawable/icon4" android:duration="150"></item>
    <item android:drawable="@drawable/icon5" android:duration="150"></item>
    <item android:drawable="@drawable/icon6" android:duration="150"></item>
</animation-list>

---

补间动画:Tween
只需要定义动画开始帧和结束帧,而中间动画由系统计算补齐就可以了
我们常见的四种补间动画如下

1. AlphaAnimation:透明动画
2. ScaleAnimation:缩放动画
3. TranslateAnimation:位移动画
4. RotateAnimation;旋转动画

---

等的久了吧,我们的属性动画终于现身了,效果图如下

这个里面包含了两种动画,属性动画和普通动画
左上角的效果是属性动画右下角的是普通动画

2、属性动画的相关API
Property Animation故名思议就是通过动画的方式改变对象的属性了，我们首先需要了解几个属性：
Duration动画的持续时间，默认300ms。
Time interpolation：时间差值，乍一看不知道是什么，但是我说LinearInterpolator、AccelerateDecelerateInterpolator，大家一定知道是干嘛的了，定义动画的变化率。
Repeat count and behavior：重复次数、以及重复模式；可以定义重复多少次；重复时从头开始，还是反向。
Animator sets: 动画集合，你可以定义一组动画，一起执行或者顺序执行。
Frame refresh delay：帧刷新延迟，对于你的动画，多久刷新一次帧；默认为10ms，但最终依赖系统的当前状态；基本不用管。
相关的类
ObjectAnimator 动画的执行类，后面详细介绍
ValueAnimator 动画的执行类，后面详细介绍
AnimatorSet 用于控制一组动画的执行：线性，一起，每个动画的先后执行等。
AnimatorInflater 用户加载属性动画的xml文件
TypeEvaluator 类型估值，主要用于设置动画操作属性的值。
TimeInterpolator 时间插值，上面已经介绍。
总的来说，属性动画就是，动画的执行类来设置动画操作的对象的属性、持续时间，开始和结束的属性值，时间差值等，然后系统会根据设置的参数动态的变化对象的属性。
3、ObjectAnimator实现动画

---

下面我们就看这个列子的实现
首先我们写布局文件
代码如下所示

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.5">

        <ImageView
            android:id="@+id/b"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:src="@drawable/b" />

        <ImageView
            android:id="@+id/c"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:src="@drawable/c" />

        <ImageView
            android:id="@+id/d"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:src="@drawable/d" />

        <ImageView
            android:id="@+id/e"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:src="@drawable/e" />

        <ImageView
            android:id="@+id/f"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:src="@drawable/f" />

        <ImageView
            android:id="@+id/g"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:src="@drawable/g" />

        <ImageView
            android:id="@+id/h"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:src="@drawable/h" />

        <ImageView
            android:id="@+id/a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/a" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <RelativeLayout
            android:id="@+id/rl"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/btn_count"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:gravity="center_vertical"
                android:onClick="onclick11" />

            <ImageView
                android:id="@+id/bottom_b"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_margin="5dp"
                android:src="@drawable/b" />

            <ImageView
                android:id="@+id/bottom_c"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_margin="5dp"
                android:src="@drawable/c" />

            <ImageView
                android:id="@+id/bottom_d"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_margin="5dp"
                android:src="@drawable/d" />

            <ImageView
                android:id="@+id/bottom_e"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_margin="5dp"
                android:src="@drawable/e" />

            <ImageView
                android:id="@+id/bottom_f"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_margin="5dp"
                android:src="@drawable/f" />

            <ImageView
                android:id="@+id/bottom_g"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_margin="5dp"
                android:src="@drawable/g" />

            <ImageView
                android:id="@+id/bottom_h"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_margin="5dp"
                android:src="@drawable/h" />
        </RelativeLayout>

        <ImageView
            android:id="@+id/bottom_a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="5dp"
            android:src="@drawable/a" />

        <Button
            android:id="@+id/btn_jump"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="跳转" />
    </RelativeLayout>

</LinearLayout>

activity中的代码如下所示

public class ActivityB extends Activity implements View.OnClickListener{
    private int[] res = {
            R.id.a,R.id.b,R.id.c,R.id.d,R.id.e,R.id.f,R.id.g,R.id.h};
    private List<ImageView> imageViewList = new ArrayList<>();
    private boolean flag = true;
    private ImageView iv_a,iv_b,iv_c,iv_d,iv_e,iv_f,iv_g,iv_h;
    private int a =1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_b);
        for (int i = 0; i < res.length; i++) {
            ImageView image = (ImageView) findViewById(res[i]);
            imageViewList.add(image);
            image.setOnClickListener(this);
        }
        iv_a = (ImageView) findViewById(R.id.bottom_a);
        iv_b = (ImageView) findViewById(R.id.bottom_b);
        iv_c = (ImageView) findViewById(R.id.bottom_c);
        iv_d = (ImageView) findViewById(R.id.bottom_d);
        iv_e = (ImageView) findViewById(R.id.bottom_e);
        iv_f = (ImageView) findViewById(R.id.bottom_f);
        iv_g = (ImageView) findViewById(R.id.bottom_g);
        iv_h = (ImageView) findViewById(R.id.bottom_h);


        final RelativeLayout layout = (RelativeLayout) findViewById(R.id.rl);
        layout.setVisibility(View.GONE);
        iv_a.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                a++;
                if (a % 2 == 0) {
                    layout.setVisibility(View.VISIBLE);
                } else {
                    layout.setVisibility(View.GONE);
                }
            }
        });
        translateShow();
        findViewById(R.id.btn_jump).setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.a:
                if (flag) {
                    startAnim();
                } else {
                    closeAnim();
                }
                break;
            case R.id.btn_jump:
                Intent intent = new Intent(ActivityB.this,MainActivity.class);
                startActivity(intent);
                break;
            default:
                break;
        }
    }
    private void closeAnim(){
        for (int i = 0; i < res.length; i++) {
            ObjectAnimator animator = ObjectAnimator.ofFloat(imageViewList.get(i),"translationY"
            ,i*150F,0F);
            animator.setDuration(500);
            animator.setInterpolator(new BounceInterpolator());
            animator.setStartDelay(i*300);
            animator.start();
            flag = true;
        }
    }
    private void startAnim(){
        for (int i = 1; i < res.length; i++) {
            ObjectAnimator animator = ObjectAnimator.ofFloat(imageViewList.get(i),
                    "translationY", 0F, i * 150);
            animator.setDuration(500);
            animator.setStartDelay(i * 300);
            animator.setStartDelay(i * 300);
            animator.start();

            final int finalI = i;
            imageViewList.get(i).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(ActivityB.this, "属性动画点击" + finalI, Toast.LENGTH_SHORT).show();
                }
            });
            flag = false;
        }
    }
    public void onclick11(View view){
        final Button button = (Button) view;
        ValueAnimator valueAnimator = ValueAnimator.ofInt(0,100);
        valueAnimator.setDuration(5000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                Integer integer = (Integer) valueAnimator.getAnimatedValue();
                button.setText(""+integer);
            }
        });
        valueAnimator.start();
    }

    private void translateShow(){
        TranslateAnimation animation = new TranslateAnimation(0.0f, 0f, 0, -400);
        animation.setDuration(500);
        animation.setRepeatMode(Animation.REVERSE);
        animation.setFillAfter(true);
        animation.start();
        iv_b.setAnimation(animation);

        TranslateAnimation animation1 = new TranslateAnimation(0.0f, -130f, 0, -400);
        animation1.setDuration(700);
        animation1.setRepeatMode(Animation.REVERSE);
        animation1.setFillAfter(true);
        animation1.start();
        iv_c.setAnimation(animation1);

        TranslateAnimation animation2 = new TranslateAnimation(0.0f, -260f, 0, -350);
        animation2.setDuration(900);
        animation2.setRepeatMode(Animation.REVERSE);
        animation2.setFillAfter(true);
        animation2.start();
        iv_d.setAnimation(animation2);

        TranslateAnimation animation3 = new TranslateAnimation(0.0f, -370f, 0, -270);
        animation3.setDuration(1100);
        animation3.setRepeatMode(Animation.REVERSE);
        animation3.setFillAfter(true);
        animation3.start();
        iv_e.setAnimation(animation3);

        TranslateAnimation animation4 = new TranslateAnimation(0.0f, -400f, 0, -120);
        animation4.setDuration(1300);
        animation4.setRepeatMode(Animation.REVERSE);
        animation4.setFillAfter(true);
        animation4.start();
        iv_f.setAnimation(animation4);


        TranslateAnimation animation5 = new TranslateAnimation(0.0f, -380f, 0, 30);
        animation5.setDuration(1500);
        animation5.setRepeatMode(Animation.REVERSE);
        animation5.setFillAfter(true);
        animation5.start();
        iv_g.setAnimation(animation5);
    }
}