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

2019年5月26日 130次阅读来源: 珠穆朗玛小王子

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

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

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

《仿win8菜单的按下缩小抬起恢复大小的效果》这里写图片描述

大概就是按下的时候缩小，抬起的时候恢复到正常的大小的一个简单的效果。对这篇博客感兴趣的可以点击链接
(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、为什么这种缩放是以中心点缩放，是默认的吗，有知道的少年，希望可以留言一下。
3、还有一点被不知道谁的手机铃声“咱们结婚吧”，一下子给我弄忘了，想起来了再补上…

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

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

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

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

    原文作者：珠穆朗玛小王子
    原文地址: https://www.jianshu.com/p/cb45439b0d33
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。