简介

Android 平台自带了一个计算器程序(Calculator), UI 做的非常漂亮美观，如 下图所示。

Calculator 程序

实现原理

普通状态下的按钮

按钮由两部分组成：一是黑色背景；二是一个透明背景的圆，圆内侧有一块白斑， 为按钮带来立体感。如下图所示：

normal color button

按钮按下特效

按钮按下时变成带渐变效果的红色，该效果用一带渐变效果的底图跟前景色红色按 PorterDuff 中的 SRC_IN 模式进行组合得到，如下图所示：

clicked button

动画的实现

按下按钮后抬起鼠标，按钮有个红色图案旋转的特效，实现思路有如下几点：

• 设置一个标志表示动画是否在运行
• 在 onDraw 函数中调用 postInvalidDelayed 函数持续刷新屏幕
• 每次刷新屏幕时(可以称之为一帧)根据动画已运行的时间动态改变 alpha 值并旋转底图。

核心代码

    private void drawMagicFlame(int duration, Canvas canvas) {
        int alpha = 255 - 255 * duration / CLICK_FEEDBACK_DURATION;
        int color = CLICK_FEEDBACK_COLOR | (alpha << 24);
        mButtonBackground.setColorFilter(color, PorterDuff.Mode.SRC_IN);

        int cx = getWidth() / 2;
        int cy = getHeight() / 2;
        float angle = 250.0f * duration / CLICK_FEEDBACK_DURATION;
        canvas.rotate(angle, cx, cy);
        mButtonBackground.draw(canvas);
        canvas.rotate(-angle, cx, cy);
    }

    @Override
    public void onDraw(Canvas canvas) {
        if (mAnimStart != -1) {
            int animDuration = (int) (System.currentTimeMillis() - mAnimStart);

            if (animDuration >= CLICK_FEEDBACK_DURATION) {
                mButtonBackground.clearColorFilter();
                mAnimStart = -1;
            } else {
                drawMagicFlame(animDuration, canvas);
                postInvalidateDelayed(CLICK_FEEDBACK_INTERVAL);
            }
        } else if (isPressed()) {
            drawMagicFlame(0, canvas);
        }

        mButton.draw(canvas);

        CharSequence text = getText();
        canvas.drawText(text, 0, text.length(), mTextX, mTextY, getPaint());
    }