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;@Overrideprotected 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);}}@Overridepublic 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() {@Overridepublic void onClick(final View view) {ValueAnimator animator = ValueAnimator.ofInt(0, 100);animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic 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;@Overrideprotected 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() {@Overridepublic 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() {@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {//通过ValueAnimator创建的数值发生器,并由此来改变View的布局属性int value = (int) valueAnimator.getAnimatedValue();ViewGroup.LayoutParams params = mHiddenView.getLayoutParams();params.height = value;mHiddenView.setLayoutParams(params);}});return animator;}
}

效果图如下所示:

这里写图片描述

代码地址