仿win8菜单的按下缩小抬起恢复大小的效果-白红宇

最近工作不是很忙，一直在看跟技术有关的各种资料，丰富一下自己的知识，提高一下自己的水平，今天上了一下csdn看郭霖老师（移动开发博客专家）的博客，发现哎呀妈呀，换了头像，虽然看博客知道郭霖老师要结婚了，但是换头像高调秀恩爱还是给了我一个惊喜，看着漂亮的新娘子，想起了郭冬临的一句话：他那么磕碜，怎么就看上他了呢...

当然这是开玩笑，看了郭霖老师的博客两年了，心里还是很有感触的，所以忍不住把郭霖老师和张鸿洋老师（移动开发博客专家，而且也换了结婚照头像，果然与郭霖老师基友情深）的博客又随意翻了一下，于是拿张鸿洋的老师的很早写的一个博客作为参考，写一点自己的东西，作为纪念。

先看一张效果图，这是从张鸿洋老师的博客里复制的

大概就是按下的时候缩小，抬起的时候恢复到正常的大小的一个简单的效果。对这篇博客感兴趣的可以点击链接 (http://blog.csdn.net/lmj623565791/article/details/23441455)。

说一下张鸿洋老师的整篇博客的思路（估计现在老师肯定不会这么实现了）： 1、写一个简单的算法，得到控件大小上的缩放比例梯度变化值。 2、在onTouchEvent方法里，按下时通过handler机制，设置图片的matrix的缩放值。

我看博客有翻看评论的习惯，因为每个人的思考角度不同，会提出有趣的，可能实现起来更好的方案。其中有最近有一条评论：如果用属性动画实现不是更简单吗？稍微思考一下，这确实是个好办法，在这个效果中，属性动画更简单，并且代码量也会少很多，基本不需要做什么维护工作，最近也有在复习属性动画，于是决定自己来通过属性动画来实现这个效果。

先贴出最初版本的代码

package com.example.scaleview;import android.animation.ObjectAnimator;import android.animation.PropertyValuesHolder;import android.annotation.SuppressLint;import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;/** * 一个简单的View，只是为了测试按下和抬起的动画 * */public class ScaleView extends View {	private static final int DURATION = 100;	private Paint paint;	/**	 * 缩小的动画	 * */	private ObjectAnimator scaleDownAnim;	/**	 * 放大的动画	 * */	private ObjectAnimator scaleUpAnim;	public ScaleView(Context context, AttributeSet attrs, int defStyleAttr) {		super(context, attrs, defStyleAttr);		paint = new Paint();	}	public ScaleView(Context context, AttributeSet attrs) {		this(context, attrs, 0);	}	public ScaleView(Context context) {		this(context, null);	}	@Override	protected void onDraw(Canvas canvas) {		super.onDraw(canvas);		// 如果是先画出形状，是画不出颜色的		canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint);		canvas.drawColor(android.R.color.black);	}	@SuppressLint("ClickableViewAccessibility")	@Override	public boolean onTouchEvent(MotionEvent event) {		switch (event.getAction()) {		case MotionEvent.ACTION_DOWN:			showScaleDownAnimation();			break;		case MotionEvent.ACTION_UP:			showScaleUpAnimation();			break;		default:			break;		}		return true;	}	/**	 * 按下缩放的动画	 * */	private void showScaleDownAnimation() {		float scaleXFrom = 1.0f;		float scaleYFrom = 1.0f;		// 宽度的变化		PropertyValuesHolder scaleXP = PropertyValuesHolder.ofFloat("scaleX",				scaleXFrom, 0.8f);		// 高度的变化		PropertyValuesHolder scaleYP = PropertyValuesHolder.ofFloat("scaleY",				scaleYFrom, 0.8f);		if (scaleDownAnim == null) {			scaleDownAnim = ObjectAnimator.ofPropertyValuesHolder(this,					scaleXP, scaleYP).setDuration(DURATION);		} else {			scaleDownAnim.setValues(scaleXP, scaleYP);		}		scaleDownAnim.start();	}	/**	 * 抬起恢复大小的动画	 * */	private void showScaleUpAnimation() {		float scaleXFrom = 0.8f;		float scaleYFrom = 0.8f;		// 宽度的变化		PropertyValuesHolder scaleXP = PropertyValuesHolder.ofFloat("scaleX",				scaleXFrom, 1.0f);		// 高度的变化		PropertyValuesHolder scaleYP = PropertyValuesHolder.ofFloat("scaleY",				scaleYFrom, 1.0f);		if (scaleUpAnim == null) {			scaleUpAnim = ObjectAnimator.ofPropertyValuesHolder(this, scaleXP,					scaleYP).setDuration(DURATION);		} else {			scaleUpAnim.setValues(scaleXP, scaleYP);		}		scaleUpAnim.start();	}}复制代码

代码很简单，没有什么可以具体说明的技术点。但是会有一个问题，例如一个非常蛋疼的情况，连续不停的点击，这个效果就会变得有些卡顿，体验会很差，因为有时按下的动画还没有结束，抬起的动画就开始了，或者抬起的动画还没结束，按下的动画又开始了，两个动画在时间上互相出现了冲突，产生了上面的问题。

于是修改了最终版：

package com.example.scaleview;import android.animation.ObjectAnimator;import android.animation.PropertyValuesHolder;import android.annotation.SuppressLint;import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;/** * 一个简单的View，只是为了测试按下和抬起的动画 * */public class ScaleView extends View {	private static final int DURATION = 100;	private Paint paint;	/**	 * 缩小的动画	 * */	private ObjectAnimator scaleDownAnim;	/**	 * 放大的动画	 * */	private ObjectAnimator scaleUpAnim;	public ScaleView(Context context, AttributeSet attrs, int defStyleAttr) {		super(context, attrs, defStyleAttr);		paint = new Paint();	}	public ScaleView(Context context, AttributeSet attrs) {		this(context, attrs, 0);	}	public ScaleView(Context context) {		this(context, null);	}	@Override	protected void onDraw(Canvas canvas) {		super.onDraw(canvas);		// 如果是先画出形状，是画不出颜色的		canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint);		canvas.drawColor(android.R.color.black);	}	@SuppressLint("ClickableViewAccessibility")	@Override	public boolean onTouchEvent(MotionEvent event) {		switch (event.getAction()) {		case MotionEvent.ACTION_DOWN:			showScaleDownAnimation();			break;		case MotionEvent.ACTION_UP:			showScaleUpAnimation();			break;		default:			break;		}		return true;	}	/**	 * 按下缩放的动画	 * */	private void showScaleDownAnimation() {		float scaleXFrom = 1.0f;		float scaleYFrom = 1.0f;		// 如果抬起的动画还没有结束，获取当前的缩放的比例作为按下动画的缩放开始的值		if (scaleUpAnim != null && scaleUpAnim.isRunning()) {			scaleXFrom = (Float) scaleUpAnim.getAnimatedValue();			scaleYFrom = (Float) scaleUpAnim.getAnimatedValue();			// 停止抬起的动画			scaleUpAnim.end();		}		// 宽度的变化		PropertyValuesHolder scaleXP = PropertyValuesHolder.ofFloat("scaleX",				scaleXFrom, 0.8f);		// 高度的变化		PropertyValuesHolder scaleYP = PropertyValuesHolder.ofFloat("scaleY",				scaleYFrom, 0.8f);		if (scaleDownAnim == null) {			scaleDownAnim = ObjectAnimator.ofPropertyValuesHolder(this,					scaleXP, scaleYP).setDuration(DURATION);		} else {			scaleDownAnim.setValues(scaleXP, scaleYP);		}		scaleDownAnim.start();	}	/**	 * 抬起恢复大小的动画	 * */	private void showScaleUpAnimation() {		float scaleXFrom = 0.8f;		float scaleYFrom = 0.8f;		// 如果按下的动画还没有结束，获取当前的缩放的比例作为按下动画的缩放开始的值		if (scaleDownAnim != null && scaleDownAnim.isRunning()) {			scaleXFrom = (Float) scaleDownAnim.getAnimatedValue();			scaleYFrom = (Float) scaleDownAnim.getAnimatedValue();			// 停止按下的动画			scaleDownAnim.end();		}		// 宽度的变化		PropertyValuesHolder scaleXP = PropertyValuesHolder.ofFloat("scaleX",				scaleXFrom, 1.0f);		// 高度的变化		PropertyValuesHolder scaleYP = PropertyValuesHolder.ofFloat("scaleY",				scaleYFrom, 1.0f);		if (scaleUpAnim == null) {			scaleUpAnim = ObjectAnimator.ofPropertyValuesHolder(this, scaleXP,					scaleYP).setDuration(DURATION);		} else {			scaleUpAnim.setValues(scaleXP, scaleYP);		}		scaleUpAnim.start();	}}复制代码

修改的地方就是在两个显示动画的方法里，增加了判断，如果之前的动画还没有结束，获取这个动画当前的比例作为自己的缩放的开始比例，然后把之前的动画停掉。

其中有两个方法简单说明一下：

得到属性动画的当前的变化值 Float scaleXFrom = (Float) scaleDownAnim.getAnimatedValue(); 强转的类型就是我们之前设置的类型，例如ofFloat(), ofInt()

属性动画的end（）方法 这个方法从单词看上去似乎是让动画直接回到最终状态，实际上是停留到当前状态，不再变化。

PS: 1、不知道有没有少年跟我一样会担心，如果view缩放了，在他上面的View会不会掉下来，就会显得很难看，我试了一下是不会的。 2、为什么这种缩放是以中心点缩放，是默认的吗，有知道的少年，希望可以留言一下。

最后还是非常的推荐郭霖老师和张鸿洋老师的博客，而且在其他学习网站上都有他们录制的教学视频，都非常有学习的价值。

如果对属性动画了解不多的少年，可以去两位老师的博客查看相关资料，都有很详细的介绍和使用demo。

这样这篇博客差不多就要结束了，和参考的老师的博客的代码对比一下，很明显少了很多，而且看起来更工整，实现逻辑也很简单，几乎不用担心会出现什么bug。第一次写博客，编辑工具录屏软件都不会用，就不要挑我的毛病了。

希望两位老师新婚快乐，基友情深，我也应该向他们学习，偶尔写个博客分享一下自己的收获。