Android动画机制与使用技巧（四）——Android动画特效

灵动菜单

下图中展示的是灵动菜单的效果图。当用户点击小红点后，弹出菜单，并带有一个缓冲的过渡动画，这也是Google在Material Design中所强调的动画过渡效果。

那这样一个动画效果的菜单该怎么实现？首先，它具有交互性，所以肯定不能使用视图动画而必须使用属性动画。其次，只需要针对每个不同的按钮设置不同的动画，并设置相应的插值器就可以实现展开、合拢效果了。代码如下所示：

/**
 * Created by Administrator on 2016/6/3.
 * 灵动菜单
 */
public class PropertyActivity extends Activity implements View.OnClickListener {

    private int[] mRes = {R.id.imageView_a, R.id.imageView_b, R.id.imageView_c,
            R.id.imageView_d, R.id.imageView_e};
    private List<ImageView> mImageViews = new ArrayList<ImageView>();
    private boolean mFlag = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_property);
        for (int i = 0; i < mRes.length; i++) {
            ImageView imageView = (ImageView) findViewById(mRes[i]);
            imageView.setOnClickListener(this);
            mImageViews.add(imageView);
        }
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.imageView_a:
                if (mFlag) {
                    startAnim();
                } else {
                    closeAnim();
                }
                break;
            default:
                Toast.makeText(this, "" + view.getId(), Toast.LENGTH_SHORT).show();
                break;
        }
    }

    private void closeAnim() {
        ObjectAnimator animator0 = ObjectAnimator.ofFloat(mImageViews.get(0), "alpha", 0.5F, 1F);
        ObjectAnimator animator1 = ObjectAnimator.ofFloat(mImageViews.get(1), "translationY", 200F, 0);
        ObjectAnimator animator2 = ObjectAnimator.ofFloat(mImageViews.get(2), "translationX", 200F, 0);
        ObjectAnimator animator3 = ObjectAnimator.ofFloat(mImageViews.get(3), "translationY", -200F, 0);
        ObjectAnimator animator4 = ObjectAnimator.ofFloat(mImageViews.get(4), "translationX", -200F, 0);
        AnimatorSet set = new AnimatorSet();
        set.setDuration(500);
        set.setInterpolator(new BounceInterpolator());
        set.playTogether(animator0, animator1, animator2, animator3, animator4);
        set.start();
        mFlag = true;
    }

    private void startAnim() {
        ObjectAnimator animator0 = ObjectAnimator.ofFloat(mImageViews.get(0), "alpha", 1, 0.5f);
        ObjectAnimator animator1 = ObjectAnimator.ofFloat(mImageViews.get(1), "translationY", 200);
        ObjectAnimator animator2 = ObjectAnimator.ofFloat(mImageViews.get(2), "translationX", 200);
        ObjectAnimator animator3 = ObjectAnimator.ofFloat(mImageViews.get(3), "translationY", -200);
        ObjectAnimator animator4 = ObjectAnimator.ofFloat(mImageViews.get(4), "translationX", -200);
        AnimatorSet set = new AnimatorSet();
        set.setDuration(500);
        set.setInterpolator(new BounceInterpolator());
        set.playTogether(animator0, animator1, animator2, animator3, animator4);
        set.start();
        mFlag = false;
    }
}

计时器动画

我们通过ValueAnimator来实现计时器的动画效果，当点击后，数字不断增加，如下图所示：

代码如下所示：

        mTimerTextView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(final View view) {
                ValueAnimator animator = ValueAnimator.ofInt(0, 100);
                animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator valueAnimator) {
                        mTimerTextView.setText("$" + valueAnimator.getAnimatedValue());
                    }
                });
                animator.setTarget(view);
                animator.setDuration(3000);
                animator.start();
            }
        });

下拉展开动画

当点击一个View时的时候，显示下面隐藏的一个View，要实现这个功能，需要将View的visibility属性由gone设置为visible即可，但是这个过程是瞬间完成的。如果让View在显示时增加一个动画效果，则需要让隐藏的View的高度不断变化，但不是迅速增加到目标值。所以使用ValueAnimator来模拟这个过程。代码如下：

/**
 * Created by Administrator on 2016/6/3.
 * 下拉展开动画
 */
public class DropActivity extends Activity {

    private LinearLayout mHiddenView;
    private float mDensity;
    private int mHiddenViewMeasuredHeight;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drop);
        mHiddenView = (LinearLayout) findViewById(R.id.hidden_view);
        // 获取像素密度
        mDensity = getResources().getDisplayMetrics().density;
        // 获取布局的高度,40是在XML文件中定义的布局高度
        mHiddenViewMeasuredHeight = (int) (mDensity * 40 + 0.5);
    }

    public void llClick(View view) {
        if (mHiddenView.getVisibility() == View.GONE) {
            // 打开动画
            animateOpen();
        } else {
            // 关闭动画
            animateClose();
        }
    }

    private void animateClose() {
        ValueAnimator animator = createDropAnimator(mHiddenView.getHeight(), 0);
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                mHiddenView.setVisibility(View.GONE);
            }
        });
        animator.start();
    }

    private void animateOpen() {
        mHiddenView.setVisibility(View.VISIBLE);
        ValueAnimator animator = createDropAnimator(0, mHiddenViewMeasuredHeight);
        animator.start();
    }

    private ValueAnimator createDropAnimator(int start, int end) {
        ValueAnimator animator = ValueAnimator.ofInt(start, end);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                //通过ValueAnimator创建的数值发生器，并由此来改变View的布局属性
                int value = (int) valueAnimator.getAnimatedValue();
                ViewGroup.LayoutParams params = mHiddenView.getLayoutParams();
                params.height = value;
                mHiddenView.setLayoutParams(params);
            }
        });
        return animator;
    }
}

效果图如下所示：

代码地址