android属性动画与补间动画的区别及用法

最近开始喜欢上了写博客，目的当然是记录学过的内容，方便下一次来查找，直接进入主题。最近在写demo的时候发现了一个BUG，就是当我用补间动画，也就是视图动画，去实现某个控件的动画效果的时候，点击图片没有反应，这是为什么呢？反复查找了一些资料之后，终于找到了答案。android在3.0之后有了属性动画，这时我用属性动画代替了之前的补间动画，接下来展示测试的一个小demo。

首先在activity_main.xml中

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

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="testTweenAnimation"
android:text="测试补间(视图)动画" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="testPropertyAnimation"
android:text="测试属性动画" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="reset"
android:text="重置补间动画" />

<ImageView
android:id="@+id/iv_animation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/logo" />
</LinearLayout>

在MainActivity中

package com.pbq.propertyanimation;

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

/**
* 测试属性动画的基本使用
*
*/
public class MainActivity extends Activity {

private ImageView iv_animation;
private TextView tv_animation_msg;

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

iv_animation = (ImageView) findViewById(R.id.iv_animation);
iv_animation.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "点击了图片", Toast.LENGTH_SHORT).show();
}
});
}

/**
* 补间(视图)动画
* @param v
*/
public void testTweenAnimation(View v) {
TranslateAnimation animation = new TranslateAnimation(0, iv_animation.getWidth(), 0, iv_animation.getHeight());
animation.setDuration(3000);
animation.setFillAfter(true);
iv_animation.startAnimation(animation);
}

private AnimatorSet animatorSet;
/**
* testPropertyAnimation
* @param v
*/
public void testPropertyAnimation(View v) {

ObjectAnimator animator3 = ObjectAnimator.ofFloat(iv_animation,"translationX",0,iv_animation.getWidth());
ObjectAnimator animator4 = ObjectAnimator.ofFloat(iv_animation,"translationY",0,iv_animation.getHeight());

AnimatorSet set = new AnimatorSet();
set.playTogether(animator3,animator4);
set.setDuration(2000);
set.start();

//        ObjectAnimator animator = ObjectAnimator.ofFloat(iv_animation, "translationX", 0,iv_animation.getWidth());
//        ObjectAnimator animator2 = ObjectAnimator.ofFloat(iv_animation, "translationY", 0,iv_animation.getHeight());
//        AnimatorSet animatorSet = new AnimatorSet();
//        animatorSet.setDuration(2000);
//        animatorSet.setInterpolator(new BounceInterpolator());
//        //两个动画一起播放
//        animatorSet.playTogether(animator, animator2);
//        //开始播放
//        animatorSet.start();

//      //另外一种写法
//        iv_animation.animate()
//                 .translationXBy(iv_animation.getWidth())
//                 .translationYBy(iv_animation.getWidth())
//                 .setDuration(2000)
//                 .setInterpolator(new BounceInterpolator())
//                 .start();

}

public void reset(View v) {
iv_animation.clearAnimation();
}

}

这里具体是展示一张图片平移的过程。使用补间动画中平移动画(TranslateAnimation)，TranslateAnimation构造方法中，第一个参数表示开始时X轴的坐标，第二个参数表示结束时X轴的坐标，第三个参数表示开始时Y轴的坐标，第四个表示结束时Y轴的坐标。坐标类型默认相对于控件本身。然后设置延迟和设置最终固定为平移完成时的状态。最后开启动画。

使用属性动画来完成平移图片过程中，使用ObjectAnimator类来实现，ObjectAnimator类提供了许多方法，有ofFloat，ofInt，ofObject等等，具体使用哪一个呢？从view的setTranslationX()中看出里面需要float类型的参数，因此使用ofFloat这个方法。当中第一个参数表示需要去进行动画效果的控件，即目标控件。第二个参数是一个String类型的参数，表示需要进行的是平移操作，即setTranslationX()中“translationX”表示向x轴平移。第三个参数表示开始时X轴的坐标，第四个参数表示结束时X轴的坐标。向y轴平移也是一样的步骤。

下面来看效果图：



点击测试补间动画，然后再点击图片，此时没有执行点击操作，图片的点击操作还在原来图片的位置。



点击测试属性动画，然后点击图片，此时能够执行图片的点击事件